From 35c2a569b53d26c68cd0b1bf04dbec1fcdbc1a64 Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Tue, 11 May 2021 10:04:32 +0200
Subject: [PATCH] MOBILE-3746 a11y: Highlight focused element

---
 .../mod/forum/components/index/index.html     |  2 +-
 src/core/components/combobox/combobox.scss    | 25 +++++++++++--------
 .../tabs-outlet/core-tabs-outlet.html         |  1 +
 src/theme/theme.base.scss                     | 15 +++++++++++
 src/theme/theme.light.scss                    |  1 +
 5 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/addons/mod/forum/components/index/index.html b/src/addons/mod/forum/components/index/index.html
index c66bb6cf4..e79488e3d 100644
--- a/src/addons/mod/forum/components/index/index.html
+++ b/src/addons/mod/forum/components/index/index.html
@@ -86,7 +86,7 @@
             <ion-item *ngFor="let discussion of discussions.items"
                 class="addon-mod-forum-discussion" detail="true"
                 [lines]="discussion.groupname && 'none'" [attr.aria-current]="discussions.getItemAriaCurrent(discussion)"
-                (click)="discussions.select(discussion)">
+                (click)="discussions.select(discussion)" button>
                 <ion-label>
                     <div class="addon-mod-forum-discussion-title">
                         <h2 class="ion-text-wrap">
diff --git a/src/core/components/combobox/combobox.scss b/src/core/components/combobox/combobox.scss
index 19a8eb6fc..7f9ce62d1 100644
--- a/src/core/components/combobox/combobox.scss
+++ b/src/core/components/combobox/combobox.scss
@@ -19,19 +19,19 @@
         --padding-end: 10px;
         --padding-bottom: 10px;
         --padding-start: 16px;
+
+        &.md {
+            --background-activated-opacity: 0;
+            --background-focused-opacity: .12;
+        }
+
+        &.ios {
+            --background-activated-opacity: .12;
+            --background-focused-opacity: .15;
+        }
     }
 }
 
-:host-context(.md) {
-    --background-activated-opacity: 0;
-    --background-focused-opacity: .12;
-}
-
-:host-context(.ios) {
-    --background-activated-opacity: .12;
-    --background-focused-opacity: .15;
-}
-
 ion-select,
 ion-button {
     background: var(--background);
@@ -42,6 +42,11 @@ ion-button {
     overflow: hidden;
     margin: 8px;
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+
+    &:focus,
+    &:focus-within {
+        border: 2px solid var(--a11y-focus-outline-color);
+    }
 }
 
 ion-select {
diff --git a/src/core/components/tabs-outlet/core-tabs-outlet.html b/src/core/components/tabs-outlet/core-tabs-outlet.html
index 4662bb224..c6963585f 100644
--- a/src/core/components/tabs-outlet/core-tabs-outlet.html
+++ b/src/core/components/tabs-outlet/core-tabs-outlet.html
@@ -14,6 +14,7 @@
                             [hidden]="!hideUntil"
                             [id]="tab.id! + '-tab'"
                             class="tab-slide"
+                            tabindex="-1"
                             [class.selected]="selected == tab.id">
                             <ion-tab-button
                                 (ionTabButtonClick)="selectTab(tab.id, $event)"
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index d10a8615f..06514e2f4 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -500,3 +500,18 @@ img.core-media-adapt-width {
 audio.core-media-adapt-width {
     width: 100%;
 }
+
+// Focus highlight for accessibility.
+.ion-focused,
+ion-input.has-focus,
+.ion-focused ion-toggle:focus-within,
+.ion-focused ion-select:focus-within,
+.ion-focused ion-checkbox:focus-within,
+.ion-focused ion-radio:focus-within {
+    border: 2px solid var(--a11y-focus-outline-color);
+}
+
+// Treat cases where there's a focusable element inside an item, like a button.
+ion-item.ion-focused:not(:focus) {
+    border: none;
+}
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 62527d5e9..6e0560c88 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -64,6 +64,7 @@
 
     // Accessibility vars.
     --a11y-min-target-size: 44px;
+    --a11y-focus-outline-color: #005ECC;
 
     --module-icon-size: 24px;