From 17d21a53b66afcf04245802d9a57cb999d169ec4 Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Mon, 21 Nov 2022 11:19:22 +0100
Subject: [PATCH] MOBILE-4065 a11y: Fix pointer cancellation in tabs

---
 src/core/classes/aria-role-tab.ts             | 25 ++++++++++++++-----
 .../tabs-outlet/core-tabs-outlet.html         |  2 +-
 src/core/components/tabs/core-tabs.html       |  2 +-
 .../features/mainmenu/pages/menu/menu.html    |  7 +++---
 src/core/features/mainmenu/pages/menu/menu.ts |  7 ++++++
 5 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/src/core/classes/aria-role-tab.ts b/src/core/classes/aria-role-tab.ts
index fcaf1c86b..3459ca41a 100644
--- a/src/core/classes/aria-role-tab.ts
+++ b/src/core/classes/aria-role-tab.ts
@@ -16,6 +16,8 @@ export class CoreAriaRoleTab<T = unknown> {
 
     componentInstance: T;
 
+    protected selectTabCandidate?: string;
+
     constructor(componentInstance: T) {
         this.componentInstance = componentInstance;
     }
@@ -23,9 +25,10 @@ export class CoreAriaRoleTab<T = unknown> {
     /**
      * A11y key functionality that prevents keyDown events.
      *
+     * @param tabFindIndex Tab findable index.
      * @param e Event.
      */
-    keyDown(e: KeyboardEvent): void {
+    keyDown(tabFindIndex: string, e: KeyboardEvent): void {
         if (e.key == ' ' ||
             e.key == 'Enter' ||
             e.key == 'Home' ||
@@ -35,6 +38,11 @@ export class CoreAriaRoleTab<T = unknown> {
         ) {
             e.preventDefault();
             e.stopPropagation();
+            e.stopImmediatePropagation();
+        }
+
+        if (e.key == ' ' || e.key == 'Enter') {
+            this.selectTabCandidate = tabFindIndex;
         }
     }
 
@@ -48,20 +56,25 @@ export class CoreAriaRoleTab<T = unknown> {
      * End: When a tab has focus, moves focus to the last tab.
      * https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html
      *
-     * @param tabFindIndex Tab finable index.
+     * @param tabFindIndex Tab findable index.
      * @param e Event.
      * @return Promise resolved when done.
      */
     keyUp(tabFindIndex: string, e: KeyboardEvent): void {
+        e.preventDefault();
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+
         if (e.key == ' ' || e.key == 'Enter') {
-            this.selectTab(tabFindIndex, e);
+            if (this.selectTabCandidate === tabFindIndex) {
+                this.selectTab(tabFindIndex, e);
+            }
+
+            this.selectTabCandidate = undefined;
 
             return;
         }
 
-        e.preventDefault();
-        e.stopPropagation();
-
         const tabs = this.getSelectableTabs();
 
         let index = tabs.findIndex((tab) => tabFindIndex == tab.findIndex);
diff --git a/src/core/components/tabs-outlet/core-tabs-outlet.html b/src/core/components/tabs-outlet/core-tabs-outlet.html
index 8c92bb295..b820e9c72 100644
--- a/src/core/components/tabs-outlet/core-tabs-outlet.html
+++ b/src/core/components/tabs-outlet/core-tabs-outlet.html
@@ -10,7 +10,7 @@
                 <ng-container *ngFor="let tab of tabs">
                     <ion-slide role="presentation" [id]="tab.id! + '-tab'" tabindex="-1" [class.selected]="selected == tab.id"
                         class="{{tab.class}}">
-                        <ion-tab-button (ionTabButtonClick)="selectTab(tab.id, $event)" (keydown)="tabAction.keyDown($event)"
+                        <ion-tab-button (ionTabButtonClick)="selectTab(tab.id, $event)" (keydown)="tabAction.keyDown(tab.id, $event)"
                             (keyup)="tabAction.keyUp(tab.id, $event)" [tab]="tab.page" [layout]="layout" role="tab"
                             [attr.aria-controls]="tab.id" [attr.aria-selected]="selected == tab.id"
                             [tabindex]="selected == tab.id ? 0 : -1">
diff --git a/src/core/components/tabs/core-tabs.html b/src/core/components/tabs/core-tabs.html
index 928d55486..26f990e08 100644
--- a/src/core/components/tabs/core-tabs.html
+++ b/src/core/components/tabs/core-tabs.html
@@ -9,7 +9,7 @@
             <ng-container *ngFor="let tab of tabs">
                 <ion-slide *ngIf="tab.enabled" role="presentation" [id]="tab.id! + '-tab'" [class.selected]="selected == tab.id"
                     class="{{tab.class}}">
-                    <ion-tab-button (click)="selectTab(tab.id, $event)" (keydown)="tabAction.keyDown($event)"
+                    <ion-tab-button (click)="selectTab(tab.id, $event)" (keydown)="tabAction.keyDown(tab.id, $event)"
                         (keyup)="tabAction.keyUp(tab.id, $event)" [layout]="layout" role="tab" [attr.aria-controls]="tab.id"
                         [attr.aria-selected]="selected == tab.id" [tabindex]="selected == tab.id ? 0 : -1">
                         <ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true"></ion-icon>
diff --git a/src/core/features/mainmenu/pages/menu/menu.html b/src/core/features/mainmenu/pages/menu/menu.html
index 6984fb599..2cc91b881 100644
--- a/src/core/features/mainmenu/pages/menu/menu.html
+++ b/src/core/features/mainmenu/pages/menu/menu.html
@@ -5,7 +5,7 @@
 
         <core-user-menu-button *ngIf="loaded && tabsPlacement == 'side'" [alwaysShow]="true"></core-user-menu-button>
 
-        <ion-tab-button *ngFor="let tab of tabs" (keydown)="tabAction.keyDown($event)" (keyup)="tabAction.keyUp(tab.page, $event)"
+        <ion-tab-button *ngFor="let tab of tabs" (keydown)="tabAction.keyDown(tab.page, $event)" (keyup)="tabAction.keyUp(tab.page, $event)"
             [hidden]="!loaded && tab.hide" [tab]="tab.page" [disabled]="tab.hide" layout="label-hide" class="{{tab.class}}"
             [selected]="tab.page === selectedTab" [tabindex]="selectedTab == tab.page ? 0 : -1" [attr.aria-controls]="tab.id">
             <ion-icon class="core-tab-icon" [name]="tab.icon" aria-hidden="true"></ion-icon>
@@ -17,8 +17,9 @@
             </span>
         </ion-tab-button>
 
-        <ion-tab-button (keydown)="tabAction.keyDown($event)" (keyup)="tabAction.keyUp(morePageName, $event)" [hidden]="!loaded"
-            [tab]="morePageName" layout="label-hide" [tabindex]="selectedTab == morePageName ? 0 : -1" [attr.aria-controls]="morePageName">
+        <ion-tab-button (keydown)="tabAction.keyDown(morePageName, $event)" (keyup)="tabAction.keyUp(morePageName, $event)"
+            [hidden]="!loaded" [tab]="morePageName" layout="label-hide" [tabindex]="selectedTab == morePageName ? 0 : -1"
+            [attr.aria-controls]="morePageName">
             <ion-icon class="core-tab-icon" name="ellipsis-horizontal" aria-hidden="true"></ion-icon>
             <ion-label aria-hidden="true">{{ 'core.more' | translate }}</ion-label>
             <span class="sr-only">{{ 'core.more' | translate }}</span>
diff --git a/src/core/features/mainmenu/pages/menu/menu.ts b/src/core/features/mainmenu/pages/menu/menu.ts
index bda11ff26..090a0ebf8 100644
--- a/src/core/features/mainmenu/pages/menu/menu.ts
+++ b/src/core/features/mainmenu/pages/menu/menu.ts
@@ -362,4 +362,11 @@ class CoreMainMenuRoleTab extends CoreAriaRoleTab<CoreMainMenuPage> {
         return this.componentInstance.tabsPlacement == 'bottom';
     }
 
+    /**
+     * @inheritdoc
+     */
+    selectTab(tabId: string): void {
+        this.componentInstance.mainTabs?.select(tabId);
+    }
+
 }