MOBILE-3745 a11y: Minor improvements on dividers

src/addons/calendar/pages/edit-event/edit-event.html

@@ -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>
+                    <h2 *ngIf="!advanced">{{ 'core.showmore' | translate }}</h2>
-                    <span *ngIf="advanced">{{ 'core.showless' | translate }}</span>
+                    <h2 *ngIf="advanced">{{ 'core.showless' | translate }}</h2>
                 </ion-label>
             </ion-item-divider>
 

src/addons/calendar/pages/list/list.html

@@ -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'"

src/addons/coursecompletion/pages/report/report.html

@@ -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>

src/addons/messages/pages/discussion/discussion.html

@@ -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>
 

src/addons/messages/pages/group-conversations/group-conversations.html

@@ -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>

src/addons/messages/pages/search/search.html

@@ -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 -->

src/addons/mod/feedback/pages/nonrespondents/nonrespondents.html

@@ -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">

src/addons/mod/feedback/pages/respondents/respondents.html

@@ -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"

src/addons/mod/forum/components/edit-post/edit-post.html

@@ -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"

src/addons/mod/forum/components/post/post.html

@@ -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">

src/addons/mod/forum/pages/new-discussion/new-discussion.html

@@ -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">

src/addons/mod/glossary/components/index/addon-mod-glossary-index.html

@@ -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)"

src/addons/mod/glossary/pages/edit/edit.html

@@ -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>

src/addons/mod/lesson/pages/player/player.html

@@ -57,9 +57,13 @@
                     (ngSubmit)="submitQuestion($event)">
 
                     <ion-item-divider class="ion-text-wrap" *ngIf="pageContent">
-                        <core-format-text [component]="component" [componentId]="lesson?.coursemodule" [text]="pageContent"
+                        <ion-label>
-                            contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId">
+                            <h2>
-                        </core-format-text>
+                                <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. -->

src/addons/mod/wiki/components/map/map.html

@@ -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>

src/addons/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html

@@ -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"

src/core/features/course/components/format/core-course-format.html

@@ -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">

src/core/features/login/pages/email-signup/email-signup.html

@@ -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">

src/core/features/login/pages/forgotten-password/forgotten-password.html

@@ -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>

src/core/features/sitehome/pages/index/index.html

@@ -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'">

src/core/features/user/pages/about/about.html

@@ -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">