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

* 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

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;

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>

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>

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;