Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-10-02 04:48:57 +02:00
Code Issues Projects Releases Wiki Activity

[PS-1198] Desktop / Browser: Accessibility - make TOTP countdown announce for assistive technology users (#2660)

Browse Source 
* Make totp countdown `aria-hidden`, add copy of countdown as `sr-only` inside totp button, only make it conditionally "exist" on parent focus

* Make exact same changes to desktop totp

* Tweak copy button accessible name approach

instead of `aria-label`, which overrides the content of the button and, because JAWS has trouble announcing the live region in the desktop app, results in JAWS not announcing ANY countdown at all, this at least announces the current countdown number when the button receives focus in JAWS

* Add `aria-atomic="true"`

avoid JAWS/Firefox only announcing the specific digit that updates, rather than the number as a whole

* Update, run prettier, lint

* Remove orphaned jslibs

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
This commit is contained in:
Patrick H. Lauke 2022-10-03 15:53:44 +01:00 committed by GitHub
parent 39399b5cf8
commit cb7b8313a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/browser/src/popup/scss/misc.scss
View File

@ -146,6 +146,10 @@ p.lead {
border: 0 !important;
}
:not(:focus) > .exists-only-on-parent-focus {
display: none;
}
.password-wrapper {
overflow-wrap: break-word;
white-space: pre-wrap;

11
apps/browser/src/popup/vault/view.component.html
View File

@ -156,7 +156,7 @@
>
<span class="totp-code">{{ totpCodeFormatted }}</span>
</div>
<span class="totp-countdown">
<span class="totp-countdown" aria-hidden="true">
<span class="totp-sec">{{ totpSec }}</span>
<svg>
<g>
@ -176,10 +176,17 @@
type="button"
class="row-btn"
appStopClick
appA11yTitle="{{ 'copyVerificationCode' | i18n }}"
title="{{ 'copyVerificationCode' | i18n }}"
(click)="copy(totpCode, 'verificationCodeTotp', 'TOTP')"
>
<i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
<span class="sr-only">{{ "copyValue" | i18n }}</span>
<span
class="sr-only exists-only-on-parent-focus"
aria-live="polite"
aria-atomic="true"
>{{ totpSec }}</span
>
</button>
</div>
</div>

11
apps/desktop/src/app/vault/view.component.html
View File

@ -116,7 +116,7 @@
>
<span class="totp-code">{{ totpCodeFormatted }}</span>
</div>
<span class="totp-countdown">
<span class="totp-countdown" aria-hidden="true">
<span class="totp-sec">{{ totpSec }}</span>
<svg>
<g>
@ -136,10 +136,17 @@
type="button"
class="row-btn"
appStopClick
appA11yTitle="{{ 'copyValue' | i18n }}"
title="{{ 'copyValue' | i18n }}"
(click)="copy(totpCode, 'verificationCodeTotp', 'TOTP')"
>
<i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
<span class="sr-only">{{ "copyValue" | i18n }}</span>
<span
class="sr-only exists-only-on-parent-focus"
aria-live="polite"
aria-atomic="true"
>{{ totpSec }}</span
>
</button>
</div>
</div>

4
apps/desktop/src/scss/misc.scss
View File

@ -112,6 +112,10 @@ p.lead {
border: 0 !important;
}
:not(:focus) > .exists-only-on-parent-focus {
display: none;
}
.totp {
.totp-code {
font-family: $font-family-monospace;