From 1fb80ac7511de4913a3342e64907f675e90f95b8 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Sun, 28 May 2023 19:58:02 +0100
Subject: [PATCH] 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
---
 .../vault/vault-select.component.ts           |  4 +--
 .../layout/account-switcher.component.html    | 33 ++++++++++---------
 .../app/layout/account-switcher.component.ts  |  2 +-
 .../environment-selector.component.html       |  2 +-
 .../environment-selector.component.ts         |  2 +-
 5 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/apps/browser/src/vault/popup/components/vault/vault-select.component.ts b/apps/browser/src/vault/popup/components/vault/vault-select.component.ts
index 07ba3fdfa37..aea920ad2a1 100644
--- a/apps/browser/src/vault/popup/components/vault/vault-select.component.ts
+++ b/apps/browser/src/vault/popup/components/vault/vault-select.component.ts
@@ -62,7 +62,7 @@ export class VaultSelectComponent implements OnInit, OnDestroy {
   selectedVault$: Observable<string | null> = this._selectedVault.asObservable();
 
   enforcePersonalOwnership = false;
-  overlayPosition: ConnectedPosition[] = [
+  overlayPostition: ConnectedPosition[] = [
     {
       originX: "start",
       originY: "bottom",
@@ -149,7 +149,7 @@ export class VaultSelectComponent implements OnInit, OnDestroy {
       .withPush(true)
       .withViewportMargin(10)
       .withGrowAfterOpen(true)
-      .withPositions(this.overlayPosition);
+      .withPositions(this.overlayPostition);
 
     this.overlayRef = this.overlay.create({
       hasBackdrop: true,
diff --git a/apps/desktop/src/app/layout/account-switcher.component.html b/apps/desktop/src/app/layout/account-switcher.component.html
index 5d58dfc44a1..c9bf8043f37 100644
--- a/apps/desktop/src/app/layout/account-switcher.component.html
+++ b/apps/desktop/src/app/layout/account-switcher.component.html
@@ -21,7 +21,8 @@
       aria-hidden="true"
     ></app-avatar>
     <span
-      >{{ activeAccount.email }}<span class="sr-only"> ({{ "switchAccount" | i18n }})</span></span
+      >{{ activeAccount.email
+      }}<span class="sr-only">&nbsp;({{ "switchAccount" | i18n }})</span></span
     >
   </ng-container>
   <ng-template #noActiveAccount>
@@ -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"
diff --git a/apps/desktop/src/app/layout/account-switcher.component.ts b/apps/desktop/src/app/layout/account-switcher.component.ts
index 2536eae8b9e..08995aa109d 100644
--- a/apps/desktop/src/app/layout/account-switcher.component.ts
+++ b/apps/desktop/src/app/layout/account-switcher.component.ts
@@ -68,7 +68,7 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy {
   activeAccount?: ActiveAccount;
   serverUrl: string;
   authStatus = AuthenticationStatus;
-  overlayPosition: ConnectedPosition[] = [
+  overlayPostition: ConnectedPosition[] = [
     {
       originX: "end",
       originY: "bottom",
diff --git a/libs/angular/src/auth/components/environment-selector.component.html b/libs/angular/src/auth/components/environment-selector.component.html
index 5b86b236afa..e64d09da066 100644
--- a/libs/angular/src/auth/components/environment-selector.component.html
+++ b/libs/angular/src/auth/components/environment-selector.component.html
@@ -23,7 +23,7 @@
   (backdropClick)="close()"
   (detach)="close()"
   [cdkConnectedOverlayOpen]="isOpen"
-  [cdkConnectedOverlayPositions]="overlayPosition"
+  [cdkConnectedOverlayPositions]="overlayPostition"
 >
   <div class="box-content">
     <div class="environment-selector-dialog" [@transformPanel]="'open'" role="dialog">
diff --git a/libs/angular/src/auth/components/environment-selector.component.ts b/libs/angular/src/auth/components/environment-selector.component.ts
index 85332e84eca..d35347c1479 100644
--- a/libs/angular/src/auth/components/environment-selector.component.ts
+++ b/libs/angular/src/auth/components/environment-selector.component.ts
@@ -39,7 +39,7 @@ export class EnvironmentSelectorComponent implements OnInit, OnDestroy {
   showingModal = false;
   selectedEnvironment: ServerEnvironment;
   ServerEnvironmentType = ServerEnvironment;
-  overlayPosition: ConnectedPosition[] = [
+  overlayPostition: ConnectedPosition[] = [
     {
       originX: "start",
       originY: "bottom",