From 4c59d4ce8104f58190b9e0bf2d78703532b0d90f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 11 May 2021 17:28:10 +0200
Subject: [PATCH] MOBILE-3753 menu: Add context to main menu badges

---
 src/addons/messages/services/handlers/mainmenu.ts        | 1 +
 src/addons/notifications/services/handlers/mainmenu.ts   | 1 +
 src/core/features/mainmenu/pages/menu/menu.html          | 9 ++++++---
 src/core/features/mainmenu/pages/more/more.html          | 6 +++++-
 src/core/features/mainmenu/services/mainmenu-delegate.ts | 5 +++++
 5 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/addons/messages/services/handlers/mainmenu.ts b/src/addons/messages/services/handlers/mainmenu.ts
index 4461ee4f9..2f8021415 100644
--- a/src/addons/messages/services/handlers/mainmenu.ts
+++ b/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,
     };
 
diff --git a/src/addons/notifications/services/handlers/mainmenu.ts b/src/addons/notifications/services/handlers/mainmenu.ts
index dbf5aeb1e..5cb4584d2 100644
--- a/src/addons/notifications/services/handlers/mainmenu.ts
+++ b/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,
     };
 
diff --git a/src/core/features/mainmenu/pages/menu/menu.html b/src/core/features/mainmenu/pages/menu/menu.html
index 1b2d09b25..ba8099d71 100644
--- a/src/core/features/mainmenu/pages/menu/menu.html
+++ b/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>
diff --git a/src/core/features/mainmenu/pages/more/more.html b/src/core/features/mainmenu/pages/more/more.html
index 79b029c4e..7811f7d7a 100644
--- a/src/core/features/mainmenu/pages/more/more.html
+++ b/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">
diff --git a/src/core/features/mainmenu/services/mainmenu-delegate.ts b/src/core/features/mainmenu/services/mainmenu-delegate.ts
index 862bb5b55..998550f49 100644
--- a/src/core/features/mainmenu/services/mainmenu-delegate.ts
+++ b/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.
      */