From 2cafed758fc2ec68f758723a6505d9afabd9fb80 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Wed, 20 Apr 2022 05:25:44 +0100
Subject: [PATCH] [PS-266] A11y: change tabbed interface to toggle buttons,
 correctly announce currently active tab as pressed (#2505)

* Change routerLink links to button elements

* Set aria-pressed attribute on button depending on routerLinkActive

* Change base styles to apply to tabs that use `<button>` instead of `<a>`
---
 src/popup/scss/base.scss      |  7 +++--
 src/popup/tabs.component.html | 50 ++++++++++++++++++++++++-----------
 2 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/src/popup/scss/base.scss b/src/popup/scss/base.scss
index 42b70cd4583..c19cb129a28 100644
--- a/src/popup/scss/base.scss
+++ b/src/popup/scss/base.scss
@@ -316,7 +316,8 @@ header {
       padding: 0;
       margin: 0;
 
-      a {
+      a,
+      button {
         text-align: center;
         display: block;
         padding: 7px 0;
@@ -325,6 +326,7 @@ header {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        width: 100%;
 
         @include themify($themes) {
           color: themed("mutedColor");
@@ -345,7 +347,8 @@ header {
       }
 
       &.active {
-        a {
+        a,
+        button {
           @include themify($themes) {
             color: themed("primaryColor");
           }
diff --git a/src/popup/tabs.component.html b/src/popup/tabs.component.html
index 94163d9b0f6..e522d3311b0 100644
--- a/src/popup/tabs.component.html
+++ b/src/popup/tabs.component.html
@@ -2,30 +2,50 @@
   <router-outlet></router-outlet>
   <nav class="tabs">
     <ul>
-      <li routerLinkActive="active" *ngIf="showCurrentTab">
-        <a routerLink="current" appA11yTitle="{{ 'currentTab' | i18n }}">
+      <li routerLinkActive="active" #rlaCurrentTab="routerLinkActive" *ngIf="showCurrentTab">
+        <button
+          routerLink="current"
+          appA11yTitle="{{ 'currentTab' | i18n }}"
+          [attr.aria-pressed]="rlaCurrentTab.isActive"
+        >
           <i class="bwi bwi-folder-closed-f bwi-2x" aria-hidden="true"></i>{{ "tab" | i18n }}
-        </a>
+        </button>
       </li>
-      <li routerLinkActive="active">
-        <a routerLink="vault" appA11yTitle="{{ 'myVault' | i18n }}">
+      <li routerLinkActive="active" #rlaMyVault="routerLinkActive">
+        <button
+          routerLink="vault"
+          appA11yTitle="{{ 'myVault' | i18n }}"
+          [attr.aria-pressed]="rlaMyVault.isActive"
+        >
           <i class="bwi bwi-lock-f bwi-2x" aria-hidden="true"></i>{{ "myVault" | i18n }}
-        </a>
+        </button>
       </li>
-      <li routerLinkActive="active">
-        <a routerLink="send" appA11yTitle="{{ 'send' | i18n }}">
+      <li routerLinkActive="active" #rlaSend="routerLinkActive">
+        <button
+          routerLink="send"
+          appA11yTitle="{{ 'send' | i18n }}"
+          [attr.aria-pressed]="rlaSend.isActive"
+        >
           <i class="bwi bwi-send-f bwi-2x" aria-hidden="true"></i>{{ "send" | i18n }}
-        </a>
+        </button>
       </li>
-      <li routerLinkActive="active">
-        <a routerLink="generator" appA11yTitle="{{ 'passGen' | i18n }}">
+      <li routerLinkActive="active" #rlaGenerator="routerLinkActive">
+        <button
+          routerLink="generator"
+          appA11yTitle="{{ 'passGen' | i18n }}"
+          [attr.aria-pressed]="rlaGenerator.isActive"
+        >
           <i class="bwi bwi-generate-f bwi-2x" aria-hidden="true"></i>{{ "generator" | i18n }}
-        </a>
+        </button>
       </li>
-      <li routerLinkActive="active">
-        <a routerLink="settings" appA11yTitle="{{ 'settings' | i18n }}">
+      <li routerLinkActive="active" #rlaSettings="routerLinkActive">
+        <button
+          routerLink="settings"
+          appA11yTitle="{{ 'settings' | i18n }}"
+          [attr.aria-pressed]="rlaSettings.isActive"
+        >
           <i class="bwi bwi-cog-f bwi-2x" aria-hidden="true"></i>{{ "settings" | i18n }}
-        </a>
+        </button>
       </li>
     </ul>
   </nav>