[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
This commit is contained in:
Patrick H. Lauke 2023-10-31 17:55:43 +00:00 committed by GitHub
parent 43edc1a893
commit 22a138a46f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 19 deletions

View File

@ -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">{{
<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>
}}
<span class="sr-only">)</span>
</span>
</div>
<i
class="bwi bwi-2x text-muted"