From 2b58861296e09b585365a095a0ea9fe2b536515d Mon Sep 17 00:00:00 2001
From: Daniel James Smith <djsmith85@users.noreply.github.com>
Date: Thu, 3 Feb 2022 17:46:14 +0100
Subject: [PATCH] [AccountSwitching]Make account switcher accessible (#1289)

* Make account switcher keyboard accessible

* ScreenReader: Announce submenu and expansion

* ScreenReader: Announc switch account button with account info

* Fix tab focus on dropdown

* Fix esc not changing state

* Fix linting issues

Co-authored-by: Hinton <oscar@oscarhinton.com>
---
 .../layout/account-switcher.component.html    | 40 +++++++++++++------
 src/app/layout/account-switcher.component.ts  |  8 +++-
 src/scss/header.scss                          | 12 +++++-
 3 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/src/app/layout/account-switcher.component.html b/src/app/layout/account-switcher.component.html
index aa65cd46..a3ea2478 100644
--- a/src/app/layout/account-switcher.component.html
+++ b/src/app/layout/account-switcher.component.html
@@ -1,9 +1,12 @@
-<a
+<button
   class="account-switcher"
   (click)="toggle()"
   cdkOverlayOrigin
   #trigger="cdkOverlayOrigin"
   [hidden]="!showSwitcher"
+  aria-haspopup="menu"
+  aria-expanded="isOpen"
+  aria-controls="cdk-overlay-container"
 >
   <ng-container *ngIf="activeAccountEmail != null; else noActiveAccount">
     <app-avatar
@@ -13,6 +16,7 @@
       [fontSize]="14"
       [dynamic]="true"
       *ngIf="activeAccountEmail != null"
+      aria-hidden="true"
     ></app-avatar>
     <span>{{ activeAccountEmail }}</span>
   </ng-container>
@@ -24,26 +28,33 @@
     aria-hidden="true"
     [ngClass]="{ 'bwi-angle-down': !isOpen, 'bwi-chevron-up': isOpen }"
   ></i>
-</a>
+</button>
 
 <ng-template
   cdkConnectedOverlay
   [cdkConnectedOverlayOrigin]="trigger"
   [cdkConnectedOverlayHasBackdrop]="true"
   [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
-  (backdropClick)="toggle()"
+  (backdropClick)="close()"
+  (detach)="close()"
   [cdkConnectedOverlayOpen]="showSwitcher && isOpen"
   [cdkConnectedOverlayPositions]="overlayPostition"
   cdkConnectedOverlayMinWidth="250px"
 >
-  <div class="account-switcher-dropdown" [@transformPanel]="'open'">
+  <div
+    class="account-switcher-dropdown"
+    [@transformPanel]="'open'"
+    cdkTrapFocus
+    cdkTrapFocusAutoCapture
+  >
     <div class="accounts" *ngIf="numberOfAccounts > 0">
-      <a
+      <button
         *ngFor="let a of accounts | keyvalue"
         class="account"
         [ngClass]="{ active: a.value.profile.authenticationStatus == 'active' }"
-        href="#"
-        (mousedown)="switch(a.key)"
+        (click)="switch(a.key)"
+        appA11yTitle="{{ 'loggedInAsOn' | i18n: a.value.profile.email:a.value.serverUrl }}"
+        attr.aria-label="{{ 'switchAccount' | i18n }}"
       >
         <app-avatar
           [data]="a.value.profile.email"
@@ -52,30 +63,33 @@
           [fontSize]="14"
           [dynamic]="true"
           *ngIf="a.value.profile.email != null"
+          aria-hidden="true"
         ></app-avatar>
         <div class="accountInfo">
-          <span class="email">{{ a.value.profile.email }}</span>
-          <span class="server" *ngIf="a.value.serverUrl != 'bitwarden.com'">{{
+          <span class="email" aria-hidden="true">{{ a.value.profile.email }}</span>
+          <span class="server" aria-hidden="true" *ngIf="a.value.serverUrl != 'bitwarden.com'">{{
             a.value.serverUrl
           }}</span>
-          <span class="status">{{ a.value.profile.authenticationStatus }}</span>
+          <span class="status" aria-hidden="true">{{ a.value.profile.authenticationStatus }}</span>
         </div>
         <i
           class="bwi bwi-unlock bwi-2x text-muted"
+          aria-hidden="true"
           *ngIf="a.value.profile.authenticationStatus == 'unlocked'"
         ></i>
         <i
           class="bwi bwi-lock bwi-2x text-muted"
+          aria-hidden="true"
           *ngIf="a.value.profile.authenticationStatus == 'locked'"
         ></i>
-      </a>
+      </button>
     </div>
     <ng-container *ngIf="activeAccountEmail != null">
       <div class="border" *ngIf="numberOfAccounts > 0"></div>
       <ng-container *ngIf="numberOfAccounts < 4">
-        <a class="add" routerLink="/login" (click)="addAccount()">
+        <button class="add" routerLink="/login" (click)="addAccount()">
           <i class="bwi bwi-plus" aria-hidden="true"></i> {{ "addAccount" | i18n }}
-        </a>
+        </button>
       </ng-container>
       <ng-container *ngIf="numberOfAccounts == 4">
         <span class="accountLimitReached">{{ "accountSwitcherLimitReached" | i18n }} </span>
diff --git a/src/app/layout/account-switcher.component.ts b/src/app/layout/account-switcher.component.ts
index ed7de861..21685c3b 100644
--- a/src/app/layout/account-switcher.component.ts
+++ b/src/app/layout/account-switcher.component.ts
@@ -107,14 +107,18 @@ export class AccountSwitcherComponent implements OnInit {
     this.isOpen = !this.isOpen;
   }
 
+  close() {
+    this.isOpen = false;
+  }
+
   async switch(userId: string) {
-    this.toggle();
+    this.close();
 
     this.messagingService.send("switchAccount", { userId: userId });
   }
 
   async addAccount() {
-    this.toggle();
+    this.close();
     await this.stateService.setActiveUser(null);
   }
 
diff --git a/src/scss/header.scss b/src/scss/header.scss
index 0c2486f9..0133dc6c 100644
--- a/src/scss/header.scss
+++ b/src/scss/header.scss
@@ -80,6 +80,10 @@
   height: 100%;
   user-select: none;
 
+  border: none;
+  background: transparent;
+  width: auto;
+
   @include themify($themes) {
     color: themed("accountSwitcherTextColor");
   }
@@ -114,9 +118,11 @@
     0 1px 5px 0 rgba(0, 0, 0, 0.2);
   border-radius: $border-radius;
 
-  a {
+  button {
+    border: none;
+    background: transparent;
+    width: 100%;
     padding: 5px 10px;
-    display: block;
 
     @include themify($themes) {
       color: themed("textColor");
@@ -141,6 +147,7 @@
 
       .accountInfo {
         display: grid;
+        text-align: left;
 
         .email {
           font-size: $font-size-base;
@@ -173,6 +180,7 @@
 
   .add {
     margin: 4px 0;
+    text-align: left;
   }
 
   .accountLimitReached {