MOBILE-3753 menu: Add context to main menu badges

src/addons/messages/services/handlers/mainmenu.ts

@@ -47,6 +47,7 @@ export class AddonMessagesMainMenuHandlerService implements CoreMainMenuHandler,
         class: 'addon-messages-handler',
         showBadge: true, // Do not check isMessageCountEnabled because we'll use fallback it not enabled.
         badge: '',
+        badgeA11yText: 'addon.messages.unreadconversations',
         loading: true,
     };
 

src/addons/notifications/services/handlers/mainmenu.ts

@@ -41,6 +41,7 @@ export class AddonNotificationsMainMenuHandlerService implements CoreMainMenuHan
         class: 'addon-notifications-handler',
         showBadge: true,
         badge: '',
+        badgeA11yText: 'addon.notifications.unreadnotification',
         loading: true,
     };
 

src/core/features/mainmenu/pages/menu/menu.html

@@ -16,11 +16,14 @@
             [selected]="tab.page === selectedTab"
             [tabindex]="selectedTab == tab.page ? 0 : -1"
             [attr.aria-controls]="tab.id"
-            [attr.aria-label]="tab.title | translate"
         >
             <ion-icon [name]="tab.icon" aria-hidden="true"></ion-icon>
             <ion-label aria-hidden="true">{{ tab.title | translate }}</ion-label>
-            <ion-badge *ngIf="tab.badge">{{ tab.badge }}</ion-badge>
+            <ion-badge *ngIf="tab.badge" aria-hidden="true">{{ tab.badge }}</ion-badge>
+            <span class="sr-only">{{ tab.title | translate }}</span>
+            <span *ngIf="tab.badge && tab.badgeA11yText" class="sr-only">
+                {{ tab.badgeA11yText | translate: {$a : tab.badge } }}
+            </span>
         </ion-tab-button>
 
         <ion-tab-button
@@ -32,10 +35,10 @@
             layout="label-hide"
             [tabindex]="selectedTab == morePageName ? 0 : -1"
             [attr.aria-controls]="morePageName"
-            [attr.aria-label]="'core.more' | translate"
         >
             <ion-icon name="fas-bars" aria-hidden="true"></ion-icon>
             <ion-label aria-hidden="true">{{ 'core.more' | translate }}</ion-label>
+            <span class="sr-only">{{ 'core.more' | translate }}</span>
         </ion-tab-button>
     </ion-tab-bar>
 </ion-tabs>

src/core/features/mainmenu/pages/more/more.html

@@ -30,8 +30,12 @@
             <ion-label>
                 <h2>{{ handler.title | translate}}</h2>
             </ion-label>
-            <ion-badge slot="end" *ngIf="handler.showBadge" [hidden]="handler.loading || !handler.badge">{{handler.badge}}
+            <ion-badge slot="end" *ngIf="handler.showBadge" [hidden]="handler.loading || !handler.badge" aria-hidden="true">
+                {{handler.badge}}
             </ion-badge>
+            <span *ngIf="handler.showBadge && handler.badge && handler.badgeA11yText" class="sr-only">
+                {{ handler.badgeA11yText | translate: {$a : handler.badge } }}
+            </span>
             <ion-spinner slot="end" *ngIf="handler.showBadge && handler.loading"></ion-spinner>
         </ion-item>
         <ng-container *ngFor="let item of customItems">

src/core/features/mainmenu/services/mainmenu-delegate.ts

@@ -65,6 +65,11 @@ export interface CoreMainMenuHandlerData {
      */
     badge?: string;
 
+    /**
+     * Accessibility text to add on the badge. Only used if showBadge is true.
+     */
+    badgeA11yText?: string;
+
     /**
      * If true, the badge number is being loaded. Only used if showBadge is true.
      */