[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>

apps/browser/src/popup/scss/misc.scss

@@ -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;

apps/browser/src/popup/vault/view.component.html

@@ -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>

apps/desktop/src/app/vault/view.component.html

@@ -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>

apps/desktop/src/scss/misc.scss

@@ -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;