MOBILE-3745 a11y: Minor improvements on dividers

main
Pau Ferrer Ocaña 2021-05-06 14:52:50 +02:00
parent 833f65c628
commit 6e94f0b3ab
21 changed files with 51 additions and 39 deletions

View File

@ -126,8 +126,8 @@
<ion-icon *ngIf="!advanced" name="fas-caret-right" slot="start" aria-hidden="true"></ion-icon>
<ion-icon *ngIf="advanced" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
<ion-label>
<span *ngIf="!advanced">{{ 'core.showmore' | translate }}</span>
<span *ngIf="advanced">{{ 'core.showless' | translate }}</span>
<h2 *ngIf="!advanced">{{ 'core.showmore' | translate }}</h2>
<h2 *ngIf="advanced">{{ 'core.showless' | translate }}</h2>
</ion-label>
</ion-item-divider>

View File

@ -40,7 +40,7 @@
<ion-list *ngIf="filteredEvents && filteredEvents.length" class="ion-no-margin">
<ng-container *ngFor="let event of filteredEvents">
<ion-item-divider *ngIf="event.showDate">
<ion-label>{{ event.timestart * 1000 | coreFormatDate: "strftimedayshort" }}</ion-label>
<ion-label><h2>{{ event.timestart * 1000 | coreFormatDate: "strftimedayshort" }}</h2></ion-label>
</ion-item-divider>
<ion-item class="addon-calendar-event ion-text-wrap" [attr.aria-label]="event.name" (click)="gotoEvent(event.id)"
[attr.aria-current]="event.id == eventId ? 'page' : 'false'"

View File

@ -28,7 +28,7 @@
</ion-card>
<ion-card *ngIf="completion && tracked">
<ion-item-divider>
<ion-label>{{ 'addon.coursecompletion.requiredcriteria' | translate }}</ion-label>
<ion-label><h2>{{ 'addon.coursecompletion.requiredcriteria' | translate }}</h2></ion-label>
</ion-item-divider>
<ion-item class="ion-hide-md-up ion-text-wrap" *ngFor="let criteria of completion.completions">
<ion-label>
@ -71,7 +71,7 @@
</ion-card>
<ion-card *ngIf="showSelfComplete && tracked">
<ion-item-divider>
<ion-label>{{ 'addon.coursecompletion.manualselfcompletion' | translate }}</ion-label>
<ion-label><h2>{{ 'addon.coursecompletion.manualselfcompletion' | translate }}</h2></ion-label>
</ion-item-divider>
<ion-item>
<ion-label>

View File

@ -93,7 +93,8 @@
[@coreSlideInOut]="message.useridfrom == currentUserId ? '' : 'fromLeft'">
<ion-label>
<!-- User data. -->
<h2 class="addon-message-user">
<h2 class="addon-message-user" [attr.aria-label]="message.useridfrom == currentUserId ?
('addon.messages.you' | translate) : members[message.useridfrom].fullname">
<core-user-avatar slot="start" [user]="members[message.useridfrom]" [linkProfile]="false"
*ngIf="message.showUserData"></core-user-avatar>
@ -101,7 +102,7 @@
<ion-note *ngIf="!message.pending">{{ message.timecreated | coreFormatDate: "strftimetime" }}</ion-note>
<ion-note *ngIf="message.pending">
<ion-icon name="fas-clock" [attr.aria-label]="'core.notsent' | translate "></ion-icon>
<ion-icon name="fas-clock" [attr.aria-label]="'core.notsent' | translate" role="status"></ion-icon>
</ion-note>
</h2>

View File

@ -37,7 +37,7 @@
[attr.aria-expanded]="favourites.expanded" role="heading button">
<ion-icon *ngIf="!favourites.expanded" name="fas-caret-right" slot="start" aria-hidden="true"></ion-icon>
<ion-icon *ngIf="favourites.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
<ion-label>{{ 'core.favourites' | translate }} ({{ favourites.count }})</ion-label>
<ion-label><h2>{{ 'core.favourites' | translate }} ({{ favourites.count }})</h2></ion-label>
<ion-badge slot="end" *ngIf="favourites.unread">{{ favourites.unread }}</ion-badge>
</ion-item-divider>
<div [hidden]="!favourites.conversations || !favourites.expanded || favourites.loading" #favlist>
@ -60,7 +60,7 @@
[attr.aria-expanded]="group.expanded" role="heading button">
<ion-icon *ngIf="!group.expanded" name="fas-caret-right" slot="start" aria-hidden="true"></ion-icon>
<ion-icon *ngIf="group.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
<ion-label>{{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})</ion-label>
<ion-label><h2>{{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})</h2></ion-label>
<ion-badge slot="end" *ngIf="group.unread">{{ group.unread }}</ion-badge>
</ion-item-divider>
<div [hidden]="!group.conversations || !group.expanded || group.loading" #grouplist>
@ -82,7 +82,9 @@
[attr.aria-expanded]="individual.expanded" role="heading button">
<ion-icon *ngIf="!individual.expanded" name="fas-caret-right" slot="start" aria-hidden="true"></ion-icon>
<ion-icon *ngIf="individual.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
<ion-label>{{ 'addon.messages.individualconversations' | translate }} ({{ individual.count }})</ion-label>
<ion-label>
<h2>{{ 'addon.messages.individualconversations' | translate }} ({{ individual.count }})</h2>
</ion-label>
<ion-badge slot="end" *ngIf="individual.unread">{{ individual.unread }}</ion-badge>
</ion-item-divider>
<div [hidden]="!individual.conversations || !individual.expanded || individual.loading" #indlist>

View File

@ -38,7 +38,7 @@
<ng-template #resultsTemplate let-item="item">
<ng-container *ngIf="item.results.length > 0">
<ion-item-divider class="ion-text-wrap">
<ion-label>{{ item.titleString | translate }}</ion-label>
<ion-label><h2>{{ item.titleString | translate }}</h2></ion-label>
</ion-item-divider>
<!-- List of results -->

View File

@ -26,7 +26,7 @@
</ion-item>
<ion-item-divider>
<ion-label>{{ 'addon.mod_feedback.non_respondents_students' | translate : {$a: total } }}</ion-label>
<ion-label><h2>{{ 'addon.mod_feedback.non_respondents_students' | translate : {$a: total } }}</h2></ion-label>
</ion-item-divider>
<ng-container *ngIf="total > 0">
<ion-item *ngFor="let user of users" class="ion-text-wrap">

View File

@ -29,7 +29,7 @@
<ng-container *ngIf="responses.responses.total > 0">
<ion-item-divider>
<ion-label>
{{ 'addon.mod_feedback.non_anonymous_entries' | translate : {$a: responses.responses.total } }}
<h2>{{ 'addon.mod_feedback.non_anonymous_entries' | translate : {$a: responses.responses.total } }}</h2>
</ion-label>
</ion-item-divider>
<ion-item *ngFor="let attempt of responses.responses.attempts" class="ion-text-wrap" button detail="true"
@ -54,7 +54,7 @@
<ng-container *ngIf="responses.anonResponses.total > 0">
<ion-item-divider>
<ion-label>
{{ 'addon.mod_feedback.anonymous_entries' |translate : {$a: responses.anonResponses.total } }}
<h2>{{ 'addon.mod_feedback.anonymous_entries' |translate : {$a: responses.anonResponses.total } }}</h2>
</ion-label>
</ion-item-divider>
<ion-item *ngFor="let attempt of responses.anonResponses.attempts" class="ion-text-wrap" button detail="true"

View File

@ -29,7 +29,7 @@
[attr.aria-expanded]="advanced" [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate">
<ion-icon *ngIf="!advanced" name="fa-caret-right" slot="start" aria-hidden="true"></ion-icon>
<ion-icon *ngIf="advanced" name="fa-caret-down" slot="start" aria-hidden="true"></ion-icon>
<ion-label>{{ 'addon.mod_forum.advanced' | translate }}</ion-label>
<ion-label><h2>{{ 'addon.mod_forum.advanced' | translate }}</h2></ion-label>
</ion-item-divider>
<ng-container *ngIf="advanced">
<core-attachments *ngIf="forum.id && forum.maxattachments > 0"

View File

@ -127,7 +127,7 @@
<ion-label>
<ion-icon *ngIf="!advanced" name="fa-caret-right" slot="start" aria-hidden="true"></ion-icon>
<ion-icon *ngIf="advanced" name="fa-caret-down" slot="start" aria-hidden="true"></ion-icon>
{{ 'addon.mod_forum.advanced' | translate }}
<h2>{{ 'addon.mod_forum.advanced' | translate }}</h2>
</ion-label>
</ion-item-divider>
<ng-container *ngIf="advanced">

View File

@ -35,7 +35,7 @@
[attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') |translate" role="heading button">
<ion-icon *ngIf="!advanced" name="fa-caret-right" slot="start" aria-hidden="true"></ion-icon>
<ion-icon *ngIf="advanced" name="fa-caret-down" slot="start" aria-hidden="true"></ion-icon>
<ion-label>{{ 'addon.mod_forum.advanced' | translate }}</ion-label>
<ion-label><h2>{{ 'addon.mod_forum.advanced' | translate }}</h2></ion-label>
</ion-item-divider>
<ng-container *ngIf="advanced">
<ion-item *ngIf="showGroups && groupIds.length > 1 && accessInfo.cancanposttomygroups">

View File

@ -64,7 +64,7 @@
<ion-list *ngIf="!isSearch && entries.offlineEntries.length > 0">
<ion-item-divider>
<ion-label>{{ 'addon.mod_glossary.entriestobesynced' | translate }}</ion-label>
<ion-label><h2>{{ 'addon.mod_glossary.entriestobesynced' | translate }}</h2></ion-label>
</ion-item-divider>
<ion-item *ngFor="let entry of entries.offlineEntries" (click)="entries.select(entry)" detail="false" button
[attr.aria-current]="entries.getItemAriaCurrent(entry)">
@ -79,7 +79,7 @@
<ion-list *ngIf="entries.onlineEntries.length > 0">
<ng-container *ngFor="let entry of entries.onlineEntries; let index = index">
<ion-item-divider *ngIf="getDivider && showDivider(entry, entries.onlineEntries[index - 1])">
{{ getDivider!(entry) }}
<ion-label><h2>{{ getDivider!(entry) }}</h2></ion-label>
</ion-item-divider>
<ion-item button (click)="entries.select(entry)" [attr.aria-current]="entries.getItemAriaCurrent(entry)"

View File

@ -46,14 +46,14 @@
</ion-textarea>
</ion-item>
<ion-item-divider>
<ion-label>{{ 'addon.mod_glossary.attachment' | translate }}</ion-label>
<ion-label><h2>{{ 'addon.mod_glossary.attachment' | translate }}</h2></ion-label>
</ion-item-divider>
<core-attachments [files]="attachments" [component]="component" [componentId]="glossary.coursemodule"
[allowOffline]="true">
</core-attachments>
<ng-container *ngIf="glossary.usedynalink">
<ion-item-divider>
<ion-label>{{ 'addon.mod_glossary.linking' | translate }}</ion-label>
<ion-label><h2>{{ 'addon.mod_glossary.linking' | translate }}</h2></ion-label>
</ion-item-divider>
<ion-item class="ion-text-wrap">
<ion-label>{{ 'addon.mod_glossary.entryusedynalink' | translate }}</ion-label>

View File

@ -57,9 +57,13 @@
(ngSubmit)="submitQuestion($event)">
<ion-item-divider class="ion-text-wrap" *ngIf="pageContent">
<ion-label>
<h2>
<core-format-text [component]="component" [componentId]="lesson?.coursemodule" [text]="pageContent"
contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId">
</core-format-text>
</h2>
</ion-label>
</ion-item-divider>
<!-- Render a different input depending on the type of the question. -->

View File

@ -18,7 +18,7 @@
</ion-item>
<ng-container *ngFor="let letter of map">
<ion-item-divider *ngIf="letter.label">
<ion-label>{{ letter.label }}</ion-label>
<ion-label><h2>{{ letter.label }}</h2></ion-label>
</ion-item-divider>
<ion-item class="ion-text-wrap" *ngFor="let page of letter.pages" (click)="goToPage(page)"
[attr.aria-current]="selectedTitle == page.title ? 'page' : 'false'" button>

View File

@ -1,7 +1,7 @@
<ion-list>
<ng-container *ngFor="let group of subwikis">
<ion-item-divider *ngIf="group.label">
<ion-label><strong>{{ group.label }}</strong></ion-label>
<ion-label><h2>{{ group.label }}</h2></ion-label>
</ion-item-divider>
<ion-item class="ion-text-wrap" *ngFor="let subwiki of group.subwikis" (click)="openSubwiki(subwiki)"
[attr.disabled]="!subwiki.canedit && subwiki.id <= 0"

View File

@ -118,7 +118,10 @@
[class.core-section-download]="downloadEnabled"
[class.item-dimmed]="section.visible === 0 || section.uservisible === false">
<ion-label>
<core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course?.id"></core-format-text>
<h2>
<core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course?.id">
</core-format-text>
</h2>
<!-- Section download. -->
<ng-container *ngTemplateOutlet="sectionDownloadTemplate; context: {section: section}"></ng-container>
<p *ngIf="section.visible === 0 || section.availabilityinfo">

View File

@ -90,7 +90,7 @@
<!-- Username and password. -->
<ion-item-divider class="ion-text-wrap">
<ion-label>{{ 'core.login.createuserandpass' | translate }}</ion-label>
<ion-label><h3>{{ 'core.login.createuserandpass' | translate }}</h3></ion-label>
</ion-item-divider>
<ion-item class="ion-text-wrap">
<ion-label position="stacked">
@ -119,7 +119,7 @@
<!-- More details. -->
<ion-item-divider class="ion-text-wrap">
<ion-label>
{{ 'core.login.supplyinfo' | translate }}
<h3>{{ 'core.login.supplyinfo' | translate }}</h3>
</ion-label>
</ion-item-divider>
<ion-item class="ion-text-wrap">
@ -169,7 +169,7 @@
<!-- Other categories. -->
<ng-container *ngFor="let category of categories">
<ion-item-divider class="ion-text-wrap">
<ion-label>{{ category.name }}</ion-label>
<ion-label><h3>{{ category.name }}</h3></ion-label>
</ion-item-divider>
<core-user-profile-field *ngFor="let field of category.fields" [field]="field" [edit]="true" [signup]="true"
registerAuth="email" [form]="signupForm"></core-user-profile-field>
@ -179,7 +179,7 @@
<ng-container *ngIf="settings.recaptchapublickey">
<ion-item-divider class="ion-text-wrap">
<ion-label>
<span [core-mark-required]="true">{{ 'core.login.security_question' | translate }}</span>
<h3><span [core-mark-required]="true">{{ 'core.login.security_question' | translate }}</span></h3>
</ion-label>
</ion-item-divider>
<core-recaptcha [publicKey]="settings.recaptchapublickey" [model]="captcha" [siteUrl]="siteUrl"></core-recaptcha>
@ -188,7 +188,7 @@
<!-- Site policy (if any). -->
<ng-container *ngIf="settings.sitepolicy">
<ion-item-divider class="ion-text-wrap">
<ion-label>{{ 'core.login.policyagreement' | translate }}</ion-label>
<ion-label><h3>{{ 'core.login.policyagreement' | translate }}</h3></ion-label>
</ion-item-divider>
<ion-item class="ion-text-wrap">
<ion-label>
@ -217,9 +217,9 @@
<ion-list *ngIf="allRequiredSupported && isMinor">
<ion-item-divider class="ion-text-wrap">
<ion-label>
<p *ngIf="siteName" class="item-heading ion-padding">
<h3 *ngIf="siteName" class="item-heading ion-padding">
<core-format-text [text]="siteName" [filter]="false"></core-format-text>
</p>
</h3>
</ion-label>
</ion-item-divider>
<ion-item class="ion-text-wrap" lines="none">

View File

@ -16,7 +16,7 @@
<ion-card>
<form [formGroup]="myForm" (ngSubmit)="resetPassword($event)" #resetPasswordForm>
<ion-item-divider class="ion-text-wrap">
<ion-label>{{ 'core.login.searchby' | translate }}</ion-label>
<ion-label><h2>{{ 'core.login.searchby' | translate }}</h2></ion-label>
</ion-item-divider>
<ion-radio-group formControlName="field">
<ion-item>

View File

@ -31,7 +31,9 @@
<!-- Site home items: news, categories, courses, etc. -->
<ng-container *ngIf="items.length > 0">
<ion-item-divider *ngIf="section && section!.hasContent"></ion-item-divider>
<ion-item-divider *ngIf="section && section!.hasContent">
<ion-label></ion-label>
</ion-item-divider>
<ng-container *ngFor="let item of items">
<ng-container [ngSwitch]="item">
<ng-container *ngSwitchCase="'LIST_OF_COURSE'">

View File

@ -13,7 +13,7 @@
<core-loading [hideUntil]="userLoaded">
<ion-list *ngIf="user">
<ion-item-group *ngIf="hasContact">
<ion-item-divider><ion-label>{{ 'core.user.contact' | translate}}</ion-label></ion-item-divider>
<ion-item-divider><ion-label><h2>{{ 'core.user.contact' | translate}}</h2></ion-label></ion-item-divider>
<ion-item class="ion-text-wrap" *ngIf="user.email">
<ion-label>
<h2>{{ 'core.user.email' | translate }}</h2>
@ -60,7 +60,7 @@
</ion-item>
</ion-item-group>
<ion-item-group *ngIf="hasDetails">
<ion-item-divider><ion-label>{{ 'core.userdetails' | translate}}</ion-label></ion-item-divider>
<ion-item-divider><ion-label><h2>{{ 'core.userdetails' | translate}}</h2></ion-label></ion-item-divider>
<ion-item class="ion-text-wrap" *ngIf="user.url">
<ion-label>
<h2>{{ 'core.user.webpage' | translate}}</h2>
@ -80,7 +80,7 @@
</core-user-profile-field>
</ion-item-group>
<ion-item-group *ngIf="user.description">
<ion-item-divider><ion-label>{{ 'core.user.description' | translate}}</ion-label></ion-item-divider>
<ion-item-divider><ion-label><h2>{{ 'core.user.description' | translate}}</h2></ion-label></ion-item-divider>
<ion-item class="ion-text-wrap">
<ion-label>
<p><core-format-text [text]="user.description" contextLevel="user" [contextInstanceId]="user.id">