From d66effda8e32b0aa950f446936745adde8deb172 Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Fri, 18 Nov 2022 13:09:59 +0100
Subject: [PATCH 1/3] MOBILE-4065 a11y: Display tabbed element if behind
 collapsible footer

---
 src/core/directives/collapsible-footer.ts | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/core/directives/collapsible-footer.ts b/src/core/directives/collapsible-footer.ts
index 035a845f5..00352c09a 100644
--- a/src/core/directives/collapsible-footer.ts
+++ b/src/core/directives/collapsible-footer.ts
@@ -54,6 +54,7 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
     protected viewportPromise?: CoreCancellablePromise<void>;
     protected loadingHeight = false;
     protected pageDidEnterListener?: EventListener;
+    protected keyUpListener?: EventListener;
     protected page?: HTMLElement;
 
     constructor(el: ElementRef, protected ionContent: IonContent) {
@@ -83,7 +84,7 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
             this.calculateHeight();
         });
 
-        this.listenScrollEvents();
+        this.listenEvents();
     }
 
     /**
@@ -120,9 +121,9 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
     }
 
     /**
-     * Setup scroll event listener.
+     * Setup event listeners.
      */
-    protected async listenScrollEvents(): Promise<void> {
+    protected async listenEvents(): Promise<void> {
         if (!this.content || this.content?.classList.contains('has-collapsible-footer')) {
             return;
         }
@@ -185,6 +186,17 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
                 this.calculateHeight();
             },
         );
+
+        // Handle scroll when navigating using tab key and the selected element is behind the footer.
+        this.content.addEventListener('keyup', this.keyUpListener = (ev: KeyboardEvent) => {
+            if (ev.key !== 'Tab' || !document.activeElement) {
+                return;
+            }
+
+            if (document.activeElement.getBoundingClientRect().bottom > this.element.getBoundingClientRect().top) {
+                document.activeElement.scrollIntoView({ block: 'center' });
+            }
+        });
     }
 
     /**
@@ -259,6 +271,9 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
             if (this.endContentScrollListener) {
                 this.content.removeEventListener('ionScrollEnd', this.endContentScrollListener);
             }
+            if (this.keyUpListener) {
+                this.content.removeEventListener('keyup', this.keyUpListener);
+            }
         }
 
         if (this.page && this.pageDidEnterListener) {

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 2/3] 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);
+    }
+
 }

From b7f3e3d6f78c04908dec6ef883bf5ef6328c9b2a Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Mon, 21 Nov 2022 12:55:38 +0100
Subject: [PATCH 3/3] MOBILE-4065 bbb: Remove unneeded chevron right in iOS

---
 src/addons/mod/bigbluebuttonbn/components/index/index.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/addons/mod/bigbluebuttonbn/components/index/index.html b/src/addons/mod/bigbluebuttonbn/components/index/index.html
index 899bee333..2fceda715 100644
--- a/src/addons/mod/bigbluebuttonbn/components/index/index.html
+++ b/src/addons/mod/bigbluebuttonbn/components/index/index.html
@@ -91,7 +91,8 @@
         </ion-item>
         <ng-container *ngFor="let recording of recordings">
             <ion-item *ngIf="recording.url" button class="addon-mod_bbb-recording-title" [attr.aria-expanded]="recording.expanded"
-                (click)="toggle(recording)" [attr.aria-label]="(recording.expanded ? 'core.collapse' : 'core.expand') | translate">
+                (click)="toggle(recording)" [attr.aria-label]="(recording.expanded ? 'core.collapse' : 'core.expand') | translate"
+                detail="false">
                 <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
                     [class.expandable-status-icon-expanded]="recording.expanded">
                 </ion-icon>