From 4e643a363e7dbc53b1287f252991389a90add3ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Mon, 10 May 2021 14:26:15 +0200
Subject: [PATCH] MOBILE-3749 a11y: Implement cancel key on pages

---
 .../login/pages/reconnect/reconnect.html      |  2 +-
 .../login/pages/reconnect/reconnect.ts        | 23 +++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
index c2da9867a..10db38476 100644
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@@ -7,7 +7,7 @@
         <ion-title>{{ 'core.login.reconnect' | translate }}</ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content class="ion-padding">
+<ion-content class="ion-padding" (keydown)="keyDown($event)" (keyup)="keyUp($event)">
     <div class="ion-text-wrap ion-text-center ion-margin-bottom" [ngClass]="{'item-avatar-center': showSiteAvatar}">
         <!-- Show user avatar. -->
         <img *ngIf="showSiteAvatar" [src]="userAvatar" class="large-avatar" core-external-content [siteId]="siteId"
diff --git a/src/core/features/login/pages/reconnect/reconnect.ts b/src/core/features/login/pages/reconnect/reconnect.ts
index 8eeb846b1..21c3c4f9a 100644
--- a/src/core/features/login/pages/reconnect/reconnect.ts
+++ b/src/core/features/login/pages/reconnect/reconnect.ts
@@ -271,4 +271,27 @@ export class CoreLoginReconnectPage implements OnInit, OnDestroy {
         }
     }
 
+    /**
+     * A11y key functionality that prevents keyDown events.
+     *
+     * @param e Event.
+     */
+    keyDown(e: KeyboardEvent): void {
+        if (e.key == 'Escape') {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
+
+    /**
+     * Cancel reconnect.
+     *
+     * @param e Event.
+     */
+    keyUp(e: KeyboardEvent): void {
+        if (e.key == 'Escape') {
+            this.cancel(e);
+        }
+    }
+
 }