Merge pull request #2769 from dpalou/MOBILE-3759

Mobile 3759

scripts/langindex.json

@@ -379,10 +379,15 @@
   "addon.mod_assign.noteam_desc": "assign",
   "addon.mod_assign.notgraded": "assign",
   "addon.mod_assign.numberofdraftsubmissions": "assign",
+  "addon.mod_assign.numberofdraftsubmissionscountdescription": "local_moodlemobileapp",
   "addon.mod_assign.numberofparticipants": "assign",
+  "addon.mod_assign.numberofparticipantscountdescription": "local_moodlemobileapp",
   "addon.mod_assign.numberofsubmissionsneedgrading": "assign",
+  "addon.mod_assign.numberofsubmissionsneedgradingcountdescription": "local_moodlemobileapp",
   "addon.mod_assign.numberofsubmittedassignments": "assign",
+  "addon.mod_assign.numberofsubmittedassignmentscountdescription": "local_moodlemobileapp",
   "addon.mod_assign.numberofteams": "assign",
+  "addon.mod_assign.numberofteamscountdescription": "local_moodlemobileapp",
   "addon.mod_assign.numwords": "moodle",
   "addon.mod_assign.outof": "assign",
   "addon.mod_assign.overdue": "assign",
@@ -535,6 +540,7 @@
   "addon.mod_feedback.captchaofflinewarning": "local_moodlemobileapp",
   "addon.mod_feedback.complete_the_form": "feedback",
   "addon.mod_feedback.completed_feedbacks": "feedback",
+  "addon.mod_feedback.completedfeedbackscountdescription": "local_moodlemobileapp",
   "addon.mod_feedback.continue_the_form": "feedback",
   "addon.mod_feedback.feedback_is_not_open": "feedback",
   "addon.mod_feedback.feedback_submitted_offline": "local_moodlemobileapp",
@@ -557,6 +563,7 @@
   "addon.mod_feedback.preview": "moodle",
   "addon.mod_feedback.previous_page": "feedback",
   "addon.mod_feedback.questions": "feedback",
+  "addon.mod_feedback.questionscountdescription": "local_moodlemobileapp",
   "addon.mod_feedback.response_nr": "feedback",
   "addon.mod_feedback.responses": "feedback",
   "addon.mod_feedback.save_entries": "feedback",
@@ -1445,6 +1452,7 @@
   "core.course.activitynotyetviewableremoteaddon": "local_moodlemobileapp",
   "core.course.activitynotyetviewablesiteupgradeneeded": "local_moodlemobileapp",
   "core.course.allsections": "local_moodlemobileapp",
+  "core.course.aria:sectionprogress": "local_moodlemobileapp",
   "core.course.askadmintosupport": "local_moodlemobileapp",
   "core.course.availablespace": "local_moodlemobileapp",
   "core.course.cannotdeletewhiledownloading": "local_moodlemobileapp",
@@ -1472,6 +1480,8 @@
   "core.course.couldnotloadsections": "local_moodlemobileapp",
   "core.course.coursesummary": "moodle",
   "core.course.downloadcourse": "tool_mobile",
+  "core.course.downloadcoursesprogressdescription": "local_moodlemobileapp",
+  "core.course.downloadsectionprogressdescription": "local_moodlemobileapp",
   "core.course.errordownloadingcourse": "local_moodlemobileapp",
   "core.course.errordownloadingsection": "local_moodlemobileapp",
   "core.course.errorgetmodule": "local_moodlemobileapp",
@@ -1531,6 +1541,7 @@
   "core.courses.selfenrolment": "local_moodlemobileapp",
   "core.courses.sendpaymentbutton": "enrol_paypal",
   "core.courses.show": "block_myoverview",
+  "core.courses.therearecourses": "moodle",
   "core.courses.totalcoursesearchresults": "local_moodlemobileapp",
   "core.currentdevice": "local_moodlemobileapp",
   "core.datastoredoffline": "local_moodlemobileapp",
@@ -1880,6 +1891,7 @@
   "core.login.signuprequiredfieldnotsupported": "local_moodlemobileapp",
   "core.login.siteaddress": "local_moodlemobileapp",
   "core.login.siteaddressplaceholder": "donottranslate",
+  "core.login.sitebadgedescription": "local_moodlemobileapp",
   "core.login.sitehasredirect": "local_moodlemobileapp",
   "core.login.siteinmaintenance": "local_moodlemobileapp",
   "core.login.sitepolicynotagreederror": "local_moodlemobileapp",
@@ -2169,6 +2181,7 @@
   "core.tag.tagarea_course_modules": "tag",
   "core.tag.tagarea_post": "tag",
   "core.tag.tagarea_user": "tag",
+  "core.tag.tagareabadgedescription": "local_moodlemobileapp",
   "core.tag.tags": "moodle",
   "core.tag.warningareasnotsupported": "local_moodlemobileapp",
   "core.teachers": "moodle",

src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html

@@ -10,10 +10,13 @@
             <ion-icon [name]="prefetchCoursesData[selectedFilter].icon" slot="icon-only" aria-hidden="true">
             </ion-icon>
         </ion-button>
-        <ion-badge class="core-course-download-courses-progress" *ngIf="prefetchCoursesData[selectedFilter].badge">
+        <ion-badge class="core-course-download-courses-progress" *ngIf="prefetchCoursesData[selectedFilter].badge"
+            role="progressbar" [attr.aria-valuemax]="prefetchCoursesData[selectedFilter].total"
+            [attr.aria-valuenow]="prefetchCoursesData[selectedFilter].count"
+            [attr.aria-valuetext]="prefetchCoursesData[selectedFilter].badgeA11yText">
             {{prefetchCoursesData[selectedFilter].badge}}
         </ion-badge>
-        <ion-spinner *ngIf="prefetchCoursesData[selectedFilter].loading"></ion-spinner>
+        <ion-spinner *ngIf="prefetchCoursesData[selectedFilter].loading" aria-hidden="true"></ion-spinner>
     </div>
     <core-context-menu slot="end">
         <core-context-menu-item *ngIf="loaded && showFilterSwitchButton()" [priority]="1000"

src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html

@@ -7,7 +7,9 @@
             (click)="prefetchCourses()" [attr.aria-label]="'core.courses.downloadcourses' | translate">
             <ion-icon [name]="prefetchCoursesData.icon" slot="icon-only" aria-hidden="true"></ion-icon>
         </ion-button>
-        <ion-badge class="core-course-download-courses-progress" *ngIf="prefetchCoursesData.badge">
+        <ion-badge class="core-course-download-courses-progress" *ngIf="prefetchCoursesData.badge"
+            role="progressbar" [attr.aria-valuemax]="prefetchCoursesData.total"
+            [attr.aria-valuenow]="prefetchCoursesData.count" [attr.aria-valuetext]="prefetchCoursesData.badgeA11yText">
             {{prefetchCoursesData.badge}}
         </ion-badge>
         <ion-spinner *ngIf="!prefetchCoursesData.icon || prefetchCoursesData.loading"></ion-spinner>

src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html

@@ -7,7 +7,9 @@
             (click)="prefetchCourses()" [attr.aria-label]="'core.courses.downloadcourses' | translate">
             <ion-icon [name]="prefetchCoursesData.icon" slot="icon-only" aria-hidden="true"></ion-icon>
         </ion-button>
-        <ion-badge class="core-course-download-courses-progress" *ngIf="prefetchCoursesData.badge">
+        <ion-badge class="core-course-download-courses-progress" *ngIf="prefetchCoursesData.badge"
+            role="progressbar" [attr.aria-valuemax]="prefetchCoursesData.total"
+            [attr.aria-valuenow]="prefetchCoursesData.count" [attr.aria-valuetext]="prefetchCoursesData.badgeA11yText">
             {{prefetchCoursesData.badge}}
         </ion-badge>
         <ion-spinner *ngIf="!prefetchCoursesData.icon || prefetchCoursesData.loading"></ion-spinner>

src/addons/competency/pages/coursecompetencies/coursecompetencies.html

@@ -22,9 +22,13 @@
             </ng-container>
             <ion-item class="ion-text-wrap" *ngIf="competencies.statistics.canbegradedincourse">
                 <ion-label>
-                    {{ 'addon.competency.xcompetenciesproficientoutofyincourse' | translate: {$a:
+                    <span id="addon-competency-course-{{courseId}}-progress">
-                        {x: competencies.statistics.proficientcompetencycount, y: competencies.statistics.competencycount} } }}
+                        {{ 'addon.competency.xcompetenciesproficientoutofyincourse' | translate: {$a:
-                    <core-progress-bar [progress]="competencies.statistics.proficientcompetencypercentage"></core-progress-bar>
+                            {x: competencies.statistics.proficientcompetencycount, y: competencies.statistics.competencycount} } }}
+                    </span>
+                    <core-progress-bar [progress]="competencies.statistics.proficientcompetencypercentage"
+                        ariaDescribedBy="addon-competency-course-{{courseId}}-progress">
+                    </core-progress-bar>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap"

src/addons/competency/pages/plan/plan.html

@@ -52,13 +52,15 @@
                 </ion-item>
                 <ion-item class="ion-text-wrap" lines="none">
                     <ion-label>
-                        <p>
+                        <p id="addon-competency-plan-{{plan.plan.id}}-progress">
                             <strong>{{ 'addon.competency.progress' | translate }}</strong>:
                             {{ 'addon.competency.xcompetenciesproficientoutofy' | translate:
                                 {$a: {x: plan.proficientcompetencycount, y: plan.competencycount} } }}
                         </p>
                         <core-progress-bar [progress]="plan.proficientcompetencypercentage"
-                            [text]="plan.proficientcompetencypercentageformatted"></core-progress-bar>
+                            [text]="plan.proficientcompetencypercentageformatted"
+                            ariaDescribedBy="addon-competency-plan-{{plan.plan.id}}-progress">
+                        </core-progress-bar>
                     </ion-label>
                 </ion-item>
             </ion-list>

src/addons/messages/pages/contacts/contacts.html

@@ -56,7 +56,8 @@
             </core-tab>
 
             <!-- Requests tab. -->
-            <core-tab [title]="'addon.messages.requests' | translate" (ionSelect)="selectTab('requests')" [badge]="requestsBadge">
+            <core-tab [title]="'addon.messages.requests' | translate" (ionSelect)="selectTab('requests')" [badge]="requestsBadge"
+                badgeA11yText="addon.messages.pendingcontactrequests">
                 <ng-template>
                     <ion-refresher slot="fixed" [disabled]="!requestsLoaded" (ionRefresh)="refreshData($event.target)">
                         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>

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

@@ -96,7 +96,13 @@
                     <h2 *ngIf="!assign.teamsubmission">{{ 'addon.mod_assign.numberofparticipants' | translate }}</h2>
                 </ion-label>
                 <ion-badge slot="end" *ngIf="showNumbers" color="primary">
-                    {{ summary.participantcount }}
+                    <span aria-hidden="true">{{ summary.participantcount }}</span>
+                    <span class="sr-only" *ngIf="!assign.teamsubmission">
+                        {{ 'addon.mod_assign.numberofparticipantscountdescription' | translate:{count: summary.participantcount} }}
+                    </span>
+                    <span class="sr-only" *ngIf="assign.teamsubmission">
+                        {{ 'addon.mod_assign.numberofteamscountdescription' | translate:{count: summary.participantcount} }}
+                    </span>
                 </ion-badge>
             </ion-item>
 
@@ -107,7 +113,11 @@
                 (click)="goToSubmissionList(submissionStatusDraft, !!summary.submissiondraftscount)">
                 <ion-label><h2>{{ 'addon.mod_assign.numberofdraftsubmissions' | translate }}</h2></ion-label>
                 <ion-badge slot="end" *ngIf="showNumbers" color="primary">
-                    {{ summary.submissiondraftscount }}
+                    <span aria-hidden="true">{{ summary.submissiondraftscount }}</span>
+                    <span class="sr-only">
+                        {{ 'addon.mod_assign.numberofdraftsubmissionscountdescription' | translate:
+                            {count: summary.submissiondraftscount} }}
+                    </span>
                 </ion-badge>
             </ion-item>
 
@@ -118,7 +128,11 @@
                 (click)="goToSubmissionList(submissionStatusSubmitted, !!summary.submissionssubmittedcount)">
                 <ion-label><h2>{{ 'addon.mod_assign.numberofsubmittedassignments' | translate }}</h2></ion-label>
                 <ion-badge slot="end" *ngIf="showNumbers" color="primary">
-                    {{ summary.submissionssubmittedcount }}
+                    <span aria-hidden="true">{{ summary.submissionssubmittedcount }}</span>
+                    <span class="sr-only">
+                        {{ 'addon.mod_assign.numberofsubmittedassignmentscountdescription' | translate:
+                            {count: summary.submissionssubmittedcount} }}
+                    </span>
                 </ion-badge>
             </ion-item>
 
@@ -128,7 +142,11 @@
                 (click)="goToSubmissionList(needGrading, needsGradingAvailable)">
                 <ion-label><h2>{{ 'addon.mod_assign.numberofsubmissionsneedgrading' | translate }}</h2></ion-label>
                 <ion-badge slot="end" color="primary">
-                    {{ summary.submissionsneedgradingcount }}
+                    <span aria-hidden="true">{{ summary.submissionsneedgradingcount }}</span>
+                    <span class="sr-only">
+                        {{ 'addon.mod_assign.numberofsubmissionsneedgradingcountdescription' | translate:
+                            {count: summary.submissionsneedgradingcount} }}
+                    </span>
                 </ion-badge>
             </ion-item>
         </ion-list>

src/addons/mod/assign/lang.json

@@ -64,10 +64,15 @@
     "noteam_desc": "This assignment requires submission in groups. You are not a member of any group, so you cannot create a submission. Please contact your teacher to be added to a group.",
     "notgraded": "Not graded",
     "numberofdraftsubmissions": "Drafts",
+    "numberofdraftsubmissionscountdescription": "There are {{count}} drafts.",
     "numberofparticipants": "Participants",
+    "numberofparticipantscountdescription": "There are {{count}} participants.",
     "numberofsubmittedassignments": "Submitted",
+    "numberofsubmittedassignmentscountdescription": "There are {{count}} submitted assignments.",
     "numberofsubmissionsneedgrading": "Needs grading",
+    "numberofsubmissionsneedgradingcountdescription": "There are {{count}} submissions that need grading.",
     "numberofteams": "Groups",
+    "numberofteamscountdescription": "There are {{count}} teams.",
     "numwords": "{{$a}} words",
     "outof": "{{$a.current}} out of {{$a.total}}",
     "overdue": "<font color=\"red\">Assignment is overdue by: {{$a}}</font>",

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

@@ -78,7 +78,12 @@
             <ion-label>
                 <h2>{{ 'addon.mod_feedback.completed_feedbacks' | translate }}</h2>
             </ion-label>
-            <ion-badge slot="end">{{completedCount}}</ion-badge>
+            <ion-badge slot="end">
+                <span aria-hidden="true">{{completedCount}}</span>
+                <span class="sr-only">
+                    {{ 'addon.mod_feedback.completedfeedbackscountdescription' | translate:{count: completedCount} }}
+                </span>
+            </ion-badge>
         </ion-item>
         <ion-item class="ion-text-wrap" *ngIf="!access.isanonymous && access.canviewreports" (click)="openNonRespondents()"
             detail="true" button>
@@ -90,7 +95,12 @@
             <ion-label>
                 <h2>{{ 'addon.mod_feedback.questions' | translate }}</h2>
             </ion-label>
-            <ion-badge slot="end">{{itemsCount}}</ion-badge>
+            <ion-badge slot="end">
+                <span aria-hidden="true">{{itemsCount}}</span>
+                <span class="sr-only">
+                    {{ 'addon.mod_feedback.questionscountdescription' | translate:{count: itemsCount} }}
+                </span>
+            </ion-badge>
         </ion-item>
     </ion-list>
 </ng-template>

src/addons/mod/feedback/lang.json

@@ -6,6 +6,7 @@
     "captchaofflinewarning": "Feedback with CAPTCHA cannot be completed offline, or if not configured, or if the server is down.",
     "complete_the_form": "Answer the questions",
     "completed_feedbacks": "Submitted answers",
+    "completedfeedbackscountdescription": "There are {{count}} submitted answers.",
     "continue_the_form": "Continue answering the questions",
     "feedback_is_not_open": "The feedback is not open",
     "feedback_submitted_offline": "This feedback has been saved to be submitted later.",
@@ -28,6 +29,7 @@
     "preview": "Preview",
     "previous_page": "Previous page",
     "questions": "Questions",
+    "questionscountdescription": "There are {{count}} questions.",
     "response_nr": "Response number",
     "responses": "Responses",
     "save_entries": "Submit your answers",
@@ -35,4 +37,4 @@
     "show_nonrespondents": "Show non-respondents",
     "started": "Started",
     "this_feedback_is_already_submitted": "You've already completed this activity."
-}
+}

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

@@ -142,9 +142,11 @@
                             <ion-note>
                                 <ion-icon name="fas-comments" aria-hidden="true"></ion-icon>
                                 {{ 'addon.mod_forum.numreplies' | translate:{numreplies: discussion.numreplies} }}
-                                <ion-badge *ngIf="discussion.numunread" class="ion-text-center"
+                                <ion-badge *ngIf="discussion.numunread" class="ion-text-center">
-                                    [attr.aria-label]="'addon.mod_forum.unreadpostsnumber' | translate:{ '$a' : discussion.numunread}">
+                                    <span aria-hidden="true">{{ discussion.numunread }}</span>
-                                    {{ discussion.numunread }}
+                                    <span class="sr-only">
+                                        {{ 'addon.mod_forum.unreadpostsnumber' | translate:{ '$a' : discussion.numunread} }}
+                                    </span>
                                 </ion-badge>
                             </ion-note>
                         </ion-col>

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

@@ -85,7 +85,7 @@
             <ion-label>
                 <ion-spinner></ion-spinner>
                 <h2 *ngIf="progressMessage">{{ progressMessage | translate }}</h2>
-                <core-progress-bar *ngIf="showPercentage" [progress]="percentage"></core-progress-bar>
+                <core-progress-bar *ngIf="showPercentage" [progress]="percentage" [a11yText]="progressMessage"></core-progress-bar>
             </ion-label>
         </ion-item>
     </ion-list>

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

@@ -301,7 +301,8 @@
                             </core-user-avatar>
                             <ion-label>
                                 <h2>{{ student.fullname }}</h2>
-                                <core-progress-bar [progress]="student.bestgrade"></core-progress-bar>
+                                <core-progress-bar [progress]="student.bestgrade" a11yText="addon.mod_lesson.grade">
+                                </core-progress-bar>
                             </ion-label>
                         </ion-item>
                     </ion-card>

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

@@ -170,8 +170,11 @@
                 </ion-grid>
                 <ion-item class="ion-text-wrap" *ngIf="lesson?.progressbar && !canManage && pageData">
                     <ion-label>
-                        {{ 'addon.mod_lesson.progresscompleted' | translate:{$a: pageData.progress} }}
+                        <span id="addon-mod_lesson-{{cmId}}-progress">
-                        <core-progress-bar [progress]="pageData.progress"></core-progress-bar>
+                            {{ 'addon.mod_lesson.progresscompleted' | translate:{$a: pageData.progress} }}
+                        </span>
+                        <core-progress-bar [progress]="pageData.progress" ariaDescribedBy="addon-mod_lesson-{{cmId}}-progress">
+                        </core-progress-bar>
                     </ion-label>
                 </ion-item>
                 <div class="core-info-card" *ngIf="lesson?.progressbar && canManage">
@@ -224,8 +227,12 @@
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="lesson.progressbar && eolData.progresscompleted" lines="none">
                     <ion-label>
-                        {{ 'addon.mod_lesson.progresscompleted' | translate:{$a: eolData.progresscompleted.value} }}
+                        <span id="addon-mod_lesson-{{cmId}}-progress-end">
-                        <core-progress-bar [progress]="eolData.progresscompleted.value"></core-progress-bar>
+                            {{ 'addon.mod_lesson.progresscompleted' | translate:{$a: eolData.progresscompleted.value} }}
+                        </span>
+                        <core-progress-bar [progress]="eolData.progresscompleted.value"
+                            ariaDescribedBy="addon-mod_lesson-{{cmId}}-progress-end">
+                        </core-progress-bar>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="eolData.displayofgrade" lines="none">

src/addons/mod/lesson/pages/player/player.page.ts

@@ -98,8 +98,8 @@ export class AddonModLessonPlayerPage implements OnInit, OnDestroy, CanLeave {
     loadingMenu?: boolean; // Whether the lesson menu is being loaded.
     mediaFile?: CoreWSExternalFile; // Media file of the lesson.
     activityLink?: AddonModLessonActivityLink; // Next activity link data.
+    cmId!: number; // Course module ID.
 
-    protected cmId!: number; // Course module ID.
     protected password?: string; // Lesson password (if any).
     protected forceLeave = false; // If true, don't perform any check when leaving the view.
     protected offline?: boolean; // Whether we are in offline mode.

src/addons/mod/lesson/pages/user-retake/user-retake.html

@@ -19,7 +19,7 @@
                 </core-user-avatar>
                 <ion-label>
                     <h2>{{student.fullname}}</h2>
-                    <core-progress-bar [progress]="student.bestgrade"></core-progress-bar>
+                    <core-progress-bar [progress]="student.bestgrade" a11yText="addon.mod_lesson.grade"></core-progress-bar>
                 </ion-label>
             </ion-item>
 

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

@@ -242,7 +242,8 @@
                     <ion-label>
                         <ion-spinner></ion-spinner>
                         <h2 *ngIf="progressMessage">{{ progressMessage | translate }}</h2>
-                        <core-progress-bar *ngIf="showPercentage" [progress]="percentage"></core-progress-bar>
+                        <core-progress-bar *ngIf="showPercentage" [progress]="percentage" [a11yText]="progressMessage">
+                        </core-progress-bar>
                     </ion-label>
                 </ion-item>
             </ion-list>

src/core/classes/tabs.ts

@@ -670,5 +670,6 @@ export type CoreTabBase = {
     icon?: string; // The tab icon.
     badge?: string; // A badge to add in the tab.
     badgeStyle?: string; // The badge color.
+    badgeA11yText?: string; // Accessibility text to add on the badge.
     enabled?: boolean; // Whether the tab is enabled.
 };

src/core/components/context-menu/context-menu-item.ts

@@ -50,6 +50,7 @@ export class CoreContextMenuItemComponent implements OnInit, OnDestroy, OnChange
     @Input() priority?: number; // Used to sort items. The highest priority, the highest position.
     @Input() badge?: string; // A badge to show in the item.
     @Input() badgeClass?: number; // A class to set in the badge.
+    @Input() badgeA11yText?: string; // Description for the badge, if needed.
     @Input() hidden?: boolean; // Whether the item should be hidden.
     @Output() action?: EventEmitter<() => void>; // Will emit an event when the item clicked.
     @Output() onClosed?: EventEmitter<() => void>; // Will emit an event when the popover is closed because the item was clicked.

src/core/components/context-menu/core-context-menu-popover.html

@@ -12,6 +12,11 @@
             [class.icon-slash]="item.iconSlash" slot="end">
         </ion-icon>
         <ion-spinner *ngIf="(item.href || item.action) && item.iconAction == 'spinner'" slot="end"></ion-spinner>
-        <ion-badge class="{{item.badgeClass}}" slot="end" *ngIf="item.badge">{{item.badge}}</ion-badge>
+        <ion-badge class="{{item.badgeClass}}" slot="end" *ngIf="item.badge">
+            <span [attr.ara-hidden]="!!item.badgeA11yText">{{item.badge}}</span>
+            <span class="sr-only" *ngIf="item.badgeA11yText">
+                {{ item.badgeA11yText | translate: {$a : item.badge } }}
+            </span>
+        </ion-badge>
     </ion-item>
 </ion-list>

src/core/components/progress-bar/core-progress-bar.html

@@ -1,5 +1,9 @@
 <ng-container *ngIf="progress >= 0">
-    <progress max="100" [value]="progress" role="progressbar" [attr.aria-valuenow]="progress">
+    <progress max="100" [value]="progress" role="progressbar" [attr.aria-valuenow]="progress"
+        [attr.aria-valuetext]="progressBarValueText" [attr.aria-describedby]="ariaDescribedBy">
     </progress>
-    <div class="core-progress-text">{{ 'core.percentagenumber' | translate: {$a: text} }}</div>
+    <div class="core-progress-text">
+        <span class="sr-only" *ngIf="a11yText">{{ a11yText | translate }}</span>
+        {{ 'core.percentagenumber' | translate: {$a: text} }}
+    </div>
 </ng-container>

src/core/components/progress-bar/progress-bar.ts

@@ -14,6 +14,7 @@
 
 import { Component, Input, OnChanges, SimpleChange, ChangeDetectionStrategy } from '@angular/core';
 import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
+import { Translate } from '@singletons';
 
 /**
  * Component to show a progress bar and its value.
@@ -31,7 +32,12 @@ export class CoreProgressBarComponent implements OnChanges {
 
     @Input() progress!: number | string; // Percentage from 0 to 100.
     @Input() text?: string; // Percentage in text to be shown at the right. If not defined, progress will be used.
+    @Input() a11yText?: string; // Accessibility text to read before the percentage.
+    @Input() ariaDescribedBy?: string; // ID of the element that described the progress, if any.
+
     width?: SafeStyle;
+    progressBarValueText?: string;
+
     protected textSupplied = false;
 
     constructor(private sanitizer: DomSanitizer) { }
@@ -66,6 +72,11 @@ export class CoreProgressBarComponent implements OnChanges {
                 this.width = this.sanitizer.bypassSecurityTrustStyle(this.progress + '%');
             }
         }
+
+        if (changes.text || changes.progress || changes.a11yText) {
+            this.progressBarValueText = (this.a11yText ? Translate.instant(this.a11yText) + ' ' : '') +
+                Translate.instant('core.percentagenumber', { $a: this.text });
+        }
     }
 
 }

src/core/components/tabs-outlet/core-tabs-outlet.html

@@ -30,7 +30,12 @@
                             >
                                 <ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true"></ion-icon>
                                 <ion-label>{{ tab.title | translate}}</ion-label>
-                                <ion-badge *ngIf="tab.badge">{{ tab.badge }}</ion-badge>
+                                <ion-badge *ngIf="tab.badge">
+                                    <span [attr.aria-hidden]="!!tab.badgeA11yText">{{ tab.badge }}</span>
+                                    <span *ngIf="tab.badgeA11yText" class="sr-only">
+                                        {{ tab.badgeA11yText | translate: {$a : tab.badge } }}
+                                    </span>
+                                </ion-badge>
                             </ion-tab-button>
                         </ion-slide>
                     </ng-container>

src/core/components/tabs/core-tabs.html

@@ -28,7 +28,12 @@
                         >
                             <ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true"></ion-icon>
                             <ion-label>{{ tab.title | translate}}</ion-label>
-                            <ion-badge *ngIf="tab.badge">{{ tab.badge }}</ion-badge>
+                            <ion-badge *ngIf="tab.badge">
+                                <span [attr.aria-hidden]="!!tab.badgeA11yText">{{ tab.badge }}</span>
+                                <span *ngIf="tab.badgeA11yText" class="sr-only">
+                                    {{ tab.badgeA11yText | translate: {$a : tab.badge } }}
+                                </span>
+                            </ion-badge>
                         </ion-tab-button>
                     </ion-slide>
                 </ng-container>

src/core/components/tabs/tab.ts

@@ -49,6 +49,7 @@ export class CoreTabComponent implements OnInit, OnDestroy, CoreTabBase {
     @Input() icon?: string; // The tab icon.
     @Input() badge?: string; // A badge to add in the tab.
     @Input() badgeStyle?: string; // The badge color.
+    @Input() badgeA11yText?: string; // Accessibility text to add on the badge.
     @Input() class?: string; // Class, if needed.
     @Input() set enabled(value: boolean) { // Whether the tab should be shown.
         value = value === undefined ? true : value;

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

@@ -45,7 +45,8 @@
                     <ng-container *ngIf="selectedSection">
                         <ion-item class="core-course-progress"
                             *ngIf="selectedSection?.id == allSectionsId && progress !== undefined">
-                            <core-progress-bar [progress]="progress"></core-progress-bar>
+                            <core-progress-bar [progress]="progress" a11yText="core.course.aria:sectionprogress">
+                            </core-progress-bar>
                         </ion-item>
                         <ion-item *ngIf="selectedSection && selectedSection.id != allSectionsId &&
                             (selectedSection.availabilityinfo || selectedSection.visible === 0)">
@@ -158,7 +159,9 @@
     <div *ngIf="section && downloadEnabled" slot="end" class="core-button-spinner core-section-download">
         <!-- Download progress. -->
         <ion-badge class="core-course-download-section-progress"
-            *ngIf="section.isDownloading && section.total > 0 && section.count < section.total">
+            *ngIf="section.isDownloading && section.total > 0 && section.count < section.total" role="progressbar"
+            [attr.aria-valuemax]="section.total" [attr.aria-valuenow]="section.count"
+            [attr.aria-valuetext]="'core.course.downloadsectionprogressdescription' | translate:section">
             {{section.count}} / {{section.total}}
         </ion-badge>
 

src/core/features/course/components/format/format.ts

@@ -105,6 +105,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
     progress?: number;
     sectionSelectorModalOptions: ModalOptions = {
         component: CoreCourseSectionSelectorComponent,
+        componentProps: {},
     };
 
     protected sectionStatusObserver?: CoreEventObserver;
@@ -124,12 +125,6 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
      * Component being initialized.
      */
     ngOnInit(): void {
-
-        this.sectionSelectorModalOptions.componentProps = {
-            course: this.course,
-            sections: this.sections,
-        };
-
         // Listen for section status changes.
         this.sectionStatusObserver = CoreEvents.on(
             CoreEvents.SECTION_STATUS_CHANGED,
@@ -187,6 +182,8 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
      */
     ngOnChanges(changes: { [name: string]: SimpleChange }): void {
         this.setInputData();
+        this.sectionSelectorModalOptions.componentProps!.course = this.course;
+        this.sectionSelectorModalOptions.componentProps!.sections = this.sections;
 
         if (changes.course && this.course) {
             // Course has changed, try to get the components.

src/core/features/course/components/section-selector/section-selector.html

@@ -20,7 +20,9 @@
                 <ion-label>
                     <h2><core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course?.id">
                     </core-format-text></h2>
-                    <core-progress-bar *ngIf="section.progress >= 0" [progress]="section.progress"></core-progress-bar>
+                    <core-progress-bar *ngIf="section.progress >= 0" [progress]="section.progress"
+                        a11yText="core.course.aria:sectionprogress">
+                    </core-progress-bar>
 
                     <ion-badge color="info" *ngIf="section.visible === 0 && section.uservisible !== false"
                         class="ion-text-wrap">

src/core/features/course/lang.json

@@ -3,6 +3,7 @@
     "activitynotyetviewableremoteaddon": "Your organisation installed a plugin that is not yet supported.",
     "activitynotyetviewablesiteupgradeneeded": "Your organisation's Moodle installation needs to be updated.",
     "allsections": "All sections",
+    "aria:sectionprogress": "Section progress:",
     "askadmintosupport": "Contact the site administrator and tell them you want to use this activity with the Moodle Mobile app.",
     "availablespace": " You currently have about {{available}} free space.",
     "cannotdeletewhiledownloading": "Files cannot be deleted while the activity is being downloaded. Please wait for the download to finish.",
@@ -30,6 +31,8 @@
     "couldnotloadsections": "Could not load the sections. Please try again later.",
     "coursesummary": "Course summary",
     "downloadcourse": "Download course",
+    "downloadcoursesprogressdescription": "Downloading courses: downloaded {{count}} out of {{total}}.",
+    "downloadsectionprogressdescription": "Downloading section: downloaded {{count}} out of {{total}}.",
     "errordownloadingcourse": "Error downloading course.",
     "errordownloadingsection": "Error downloading section.",
     "errorgetmodule": "Error getting activity data.",

src/core/features/course/services/course-helper.ts

@@ -135,6 +135,9 @@ export type CorePrefetchStatusInfo = {
     icon: string; // Icon based on the status.
     loading: boolean; // If it's a loading status.
     badge?: string; // Progress badge string if any.
+    badgeA11yText?: string; // Description of the badge if any.
+    count?: number; // Amount of already downloaded courses.
+    total?: number; // Total of courses.
     downloadSucceeded?: boolean; // Whether download has succeeded (in case it's downloaded).
 };
 
@@ -1235,6 +1238,9 @@ export class CoreCourseHelperProvider {
         try {
             await this.confirmAndPrefetchCourses(courses, (progress) => {
                 prefetch.badge = progress.count + ' / ' + progress.total;
+                prefetch.badgeA11yText = Translate.instant('core.course.downloadcoursesprogressdescription', progress);
+                prefetch.count = progress.count;
+                prefetch.total = progress.total;
             });
             prefetch.icon = CoreConstants.ICON_OUTDATED;
         } finally {

src/core/features/courses/components/course-list-item/core-courses-course-list-item.html

@@ -24,7 +24,7 @@
             </core-format-text>
         </h2>
         <p *ngIf="isEnrolled && course.progress! >= 0 && course.completionusertracked !== false">
-            <core-progress-bar [progress]="course.progress"></core-progress-bar>
+            <core-progress-bar [progress]="course.progress" a11yText="core.courses.aria:courseprogress"></core-progress-bar>
         </p>
     </ion-label>
     <ng-container *ngIf="!isEnrolled">

src/core/features/courses/components/course-progress/core-courses-course-progress.html

@@ -56,7 +56,7 @@
     </ion-item>
     <ion-item *ngIf="showAll && course.progress! >= 0 && course.completionusertracked !== false" lines="none">
         <ion-label>
-            <core-progress-bar [progress]="course.progress"></core-progress-bar>
+            <core-progress-bar [progress]="course.progress" a11yText="core.courses.aria:courseprogress"></core-progress-bar>
         </ion-label>
     </ion-item>
     <ng-content></ng-content>

src/core/features/courses/lang.json

@@ -40,5 +40,6 @@
     "selfenrolment": "Self enrolment",
     "sendpaymentbutton": "Send payment via PayPal",
     "show": "Restore to view",
+    "therearecourses": "There are {{$a}} courses",
     "totalcoursesearchresults": "Total courses: {{$a}}"
 }

src/core/features/courses/pages/categories/categories.html

@@ -48,7 +48,10 @@
                             </core-format-text>
                         </h2>
                     </ion-label>
-                    <ion-badge slot="end" *ngIf="category.coursecount > 0" color="light">{{category.coursecount}}</ion-badge>
+                    <ion-badge slot="end" *ngIf="category.coursecount > 0" color="light">
+                        <span aria-hidden="true">{{ category.coursecount }}</span>
+                        <span class="sr-only">{{ 'core.courses.therearecourses' | translate:{ $a: category.coursecount } }}</span>
+                    </ion-badge>
                 </ion-item>
             </section>
         </div>

src/core/features/courses/pages/my-courses/my-courses.html

@@ -20,7 +20,10 @@
                 [attr.aria-label]="'core.loading' | translate"></ion-spinner>
                 <ion-badge [hidden]="!downloadAllCoursesEnabled || !courses || courses.length < 2 || !downloadAllCoursesLoading ||
                     downloadAllCoursesBadge == '' || !downloadAllCoursesLoading"
-                [attr.aria-label]="'core.downloading' | translate">{{downloadAllCoursesBadge}}</ion-badge>
+                    role="progressbar" [attr.aria-valuemax]="downloadAllCoursesTotal"
+                    [attr.aria-valuenow]="downloadAllCoursesCount" [attr.aria-valuetext]="downloadAllCoursesBadgeA11yText">
+                    {{downloadAllCoursesBadge}}
+                </ion-badge>
             </core-navbar-buttons>
         </ion-buttons>
     </ion-toolbar>

src/core/features/courses/pages/my-courses/my-courses.ts

@@ -26,6 +26,7 @@ import { CoreCourseHelper } from '@features/course/services/course-helper';
 import { CoreConstants } from '@/core/constants';
 import { CoreCourseOptionsDelegate } from '@features/course/services/course-options-delegate';
 import { CoreNavigator } from '@services/navigator';
+import { Translate } from '@singletons';
 
 /**
  * Page that displays the list of courses the user is enrolled in.
@@ -48,6 +49,9 @@ export class CoreCoursesMyCoursesPage implements OnInit, OnDestroy {
     downloadAllCoursesLoading = false;
     downloadAllCoursesBadge = '';
     downloadAllCoursesEnabled = false;
+    downloadAllCoursesCount?: number;
+    downloadAllCoursesTotal?: number;
+    downloadAllCoursesBadgeA11yText = '';
 
     protected myCoursesObserver: CoreEventObserver;
     protected siteUpdatedObserver: CoreEventObserver;
@@ -183,6 +187,10 @@ export class CoreCoursesMyCoursesPage implements OnInit, OnDestroy {
         try {
             await CoreCourseHelper.confirmAndPrefetchCourses(this.courses, (progress) => {
                 this.downloadAllCoursesBadge = progress.count + ' / ' + progress.total;
+                this.downloadAllCoursesBadgeA11yText =
+                    Translate.instant('core.course.downloadcoursesprogressdescription', progress);
+                this.downloadAllCoursesCount = progress.count;
+                this.downloadAllCoursesTotal = progress.total;
             });
         } catch (error) {
             if (!this.isDestroyed) {

src/core/features/grades/pages/courses/courses.html

@@ -35,7 +35,12 @@
                             contextLevel="course"
                         ></core-format-text>
                     </ion-label>
-                    <ion-badge slot="end" color="light">{{course.grade}}</ion-badge>
+                    <ion-badge slot="end" color="light">
+                        <span class="sr-only" *ngIf="course.grade && course.grade != '-'">
+                            {{ 'core.grades.grade' | translate }}
+                        </span>
+                        {{course.grade}}
+                    </ion-badge>
                 </ion-item>
             </ion-list>
         </core-loading>

src/core/features/login/lang.json

@@ -105,6 +105,7 @@
     "signuprequiredfieldnotsupported": "The signup form contains a required custom field that isn't supported in the app. Please create your account using a web browser.",
     "siteaddress": "Your site",
     "siteaddressplaceholder": "https://campus.example.edu",
+    "sitebadgedescription": "There are {{count}} unread notifications.",
     "sitehasredirect": "Your site contains at least one HTTP redirect. The app cannot follow redirects, this could be the issue that's preventing the app from connecting to your site.",
     "siteinmaintenance": "Your site is in maintenance mode",
     "sitepolicynotagreederror": "Site policy not agreed.",
@@ -121,4 +122,4 @@
     "webservicesnotenabled": "Your host site may not have enabled Web services. Please contact your administrator for help.",
     "youcanstillconnectwithcredentials": "You can still connect to the site by entering your username and password.",
     "yourenteredsite": "Connect to your site"
-}
+}

src/core/features/login/pages/sites/sites.html

@@ -29,7 +29,10 @@
                 <p><core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text></p>
                 <p>{{site.siteUrl}}</p>
             </ion-label>
-            <ion-badge slot="end" *ngIf="!showDelete && site.badge">{{site.badge}}</ion-badge>
+            <ion-badge slot="end" *ngIf="!showDelete && site.badge">
+                <span aria-hidden="true">{{site.badge}}</span>
+                <span class="sr-only">{{ 'core.login.sitebadgedescription' | translate:{ count: site.badge } }}</span>
+            </ion-badge>
             <ion-button *ngIf="showDelete" slot="end" fill="clear" color="danger" (click)="deleteSite($event, site)"
                 [attr.aria-label]="'core.delete' | translate">
                 <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>

src/core/features/tag/lang.json

@@ -8,6 +8,7 @@
     "searchtags": "Search tags",
     "showingfirsttags": "Showing {{$a}} most popular tags",
     "tag": "Tag",
+    "tagareabadgedescription": "There are {{count}} items.",
     "tagarea_course": "Courses",
     "tagarea_course_modules": "Activities and resources",
     "tagarea_post": "Blog posts",

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

@@ -23,7 +23,10 @@
                     <ion-label>
                         <h2>{{ area!.nameKey | translate }}</h2>
                     </ion-label>
-                    <ion-badge slot="end" *ngIf="area!.badge">{{ area!.badge }}</ion-badge>
+                    <ion-badge slot="end" *ngIf="area!.badge">
+                        <span aria-hidden="true">{{ area!.badge }}</span>
+                        <span class="sr-only">{{ 'core.tag.tagareabadgedescription' | translate:{ count: area!.badge } }}</span>
+                    </ion-badge>
                 </ion-item>
             </ion-list>
             <core-empty-box icon="fa-tag" *ngIf="!hasUnsupportedAreas && (!areas || !areas.length)"