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
bitwarden · May 28, 2023 · 1fb80ac · 1fb80ac
1 parent 7ffa133
commit 1fb80ac
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -39,7 +39,7 @@ export class EnvironmentSelectorComponent implements OnInit, OnDestroy {
   showingModal = false;
   selectedEnvironment: ServerEnvironment;
   ServerEnvironmentType = ServerEnvironment;
-  overlayPosition: ConnectedPosition[] = [
+  overlayPostition: ConnectedPosition[] = [
     {
       originX: "start",
       originY: "bottom",