From 22a138a46f9a8f1802c9ba4cc889e55dfd08d432 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Tue, 31 Oct 2023 17:55:43 +0000
Subject: [PATCH] [PM-2432] Desktop: Modify switch account dropdown/dialog for
 accessibility (#5529)

* Tweak account switcher button

- if it opens a dialog, it should advertise this with `aria-haspopup="dialog"`, not `aria-haspopup="menu"`
- if it opens a dialog, the `aria-expanded` is pointless (as the user will never get back out into the underlying page to check if it's expanded or collapsed, since it's for a dialog not a disclosure widget or menu)

* Make two variants for button to sort out `aria-label` on logged-in case

* Remove `aria-controls` for button

as it's a dialog that opens, not a disclosure, this is irrelevant

* Fix `overlayPostition` typo

* Simplify approach

just use existing single button, but add visually hidden extra "Switch account" to accName

* Tweak account switch buttons in dialog/dropdown

* Take out the confusing "Logged in as..." a11y text
* Use visible button text (with a few extra `sr-only` parts, for readability) as the button's accName
* Add the "Switch account" context to each of the buttons to make clear what they do
---
 .../layout/account-switcher.component.html    | 39 ++++++++++---------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/apps/desktop/src/app/layout/account-switcher.component.html b/apps/desktop/src/app/layout/account-switcher.component.html
index d6fd137bff..5110969b0c 100644
--- a/apps/desktop/src/app/layout/account-switcher.component.html
+++ b/apps/desktop/src/app/layout/account-switcher.component.html
@@ -6,9 +6,7 @@
   cdkOverlayOrigin
   #trigger="cdkOverlayOrigin"
   [hidden]="!showSwitcher"
-  aria-haspopup="menu"
-  aria-controls="cdk-overlay-container"
-  [attr.aria-expanded]="isOpen"
+  aria-haspopup="dialog"
 >
   <ng-container *ngIf="activeAccount?.email != null; else noActiveAccount">
     <app-avatar
@@ -22,7 +20,10 @@
       *ngIf="activeAccount.email != null"
       aria-hidden="true"
     ></app-avatar>
-    <span>{{ activeAccount.email }}</span>
+    <span
+      >{{ activeAccount.email
+      }}<span class="sr-only">&nbsp;({{ "switchAccount" | i18n }})</span></span
+    >
   </ng-container>
   <ng-template #noActiveAccount>
     <span>{{ "switchAccount" | i18n }}</span>
@@ -54,13 +55,7 @@
     aria-modal="true"
   >
     <div class="accounts" *ngIf="numberOfAccounts > 0">
-      <button
-        *ngFor="let a of accounts | keyvalue"
-        class="account"
-        (click)="switch(a.key)"
-        appA11yTitle="{{ 'loggedInAsOn' | i18n : a.value.profile.email : a.value.serverUrl }}"
-        attr.aria-label="{{ 'switchAccount' | i18n }}"
-      >
+      <button *ngFor="let a of accounts | keyvalue" class="account" (click)="switch(a.key)">
         <app-avatar
           [text]="a.value.profile.name ?? a.value.profile.email"
           [id]="a.value.profile.userId"
@@ -73,14 +68,20 @@
           aria-hidden="true"
         ></app-avatar>
         <div class="accountInfo">
-          <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" aria-hidden="true">{{
-            (a.value.profile.authenticationStatus === authStatus.Unlocked ? "unlocked" : "locked")
-              | i18n
-          }}</span>
+          <span class="sr-only">{{ "switchAccount" | i18n }}:&nbsp;</span>
+          <span class="email">{{ a.value.profile.email }}</span>
+          <span class="server" *ngIf="a.value.serverUrl != 'bitwarden.com'">
+            <span class="sr-only"> / </span>
+            {{ a.value.serverUrl }}
+          </span>
+          <span class="status">
+            <span class="sr-only">&nbsp;(</span>
+            {{
+              (a.value.profile.authenticationStatus === authStatus.Unlocked ? "unlocked" : "locked")
+                | i18n
+            }}
+            <span class="sr-only">)</span>
+          </span>
         </div>
         <i
           class="bwi bwi-2x text-muted"