Merge pull request #17018 from mozilla/FXA-9698

feat(a11y): Improve a11y for CAD/pair flow UX updates
mozilla · May 29, 2024 · 5f6ae6e · 5f6ae6e
2 parents f66e8da + ceba6f0
commit 5f6ae6e
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 27 deletions.
diff --git a/packages/functional-tests/pages/connectAnotherDevice.ts b/packages/functional-tests/pages/connectAnotherDevice.ts
@@ -25,7 +25,7 @@ export class ConnectAnotherDevicePage extends BaseLayout {
   }
 
   get connectAnotherDeviceButton() {
-    return this.page.getByRole('link', { name: 'Connect another device' });
+    return this.page.getByRole('button', { name: 'Connect another device' });
   }
 
   get signInButton() {

diff --git a/packages/fxa-content-server/app/images/account-verified-hearts.svg b/packages/fxa-content-server/app/images/account-verified-hearts.svg
diff --git a/packages/fxa-content-server/app/scripts/templates/connect_another_device.mustache b/packages/fxa-content-server/app/scripts/templates/connect_another_device.mustache
@@ -18,7 +18,7 @@
     {{/isSignedIn}}
   {{/showSuccessMessage}}
   <section>
-    <div class="{{graphicId}}" role="img" aria-label="{{#t}}Complete your set-up{{/t}}"></div>
+    <div class="{{graphicId}}" role="img" aria-label="{{#t}}Devices with hearts on their screens{{/t}}"></div>
     {{#showSuccessMessage}}
       {{#isSignedIn}}
         {{#isFirefoxDesktop}}
@@ -57,7 +57,7 @@
               <p class="text-base">{{#t}}Want to get your tabs, bookmarks, and passwords on another device?{{/t}}</p>
             </div>
             <div class="flex">
-              <a id="sync-firefox-devices" href="{{{pairingUrl}}}" class="cta-primary cta-xl" data-flow-event="link.pair">{{#t}}Connect another device{{/t}}</a>
+              <a id="sync-firefox-devices" href="{{{pairingUrl}}}" class="cta-primary cta-xl" data-flow-event="link.pair" role="button">{{#t}}Connect another device{{/t}}</a>
             </div>
             <div class="mt-5 text-center">
               <a id="cad-not-now" class="link-blue" href="/settings">{{#t}}Start browsing{{/t}}</a>

diff --git a/packages/fxa-content-server/app/scripts/templates/pair/index.mustache b/packages/fxa-content-server/app/scripts/templates/pair/index.mustache
@@ -3,20 +3,20 @@
   <header class="relative">
     {{#askMobileStatus}}
       {{#needsMobileConfirmed}}
-        <button id="back-btn" class="me-4 tablet:me-0 tablet:p-4 inline-block tablet:absolute tablet:-start-20 -top-1.5 w-5 h-3.5 p-5 bg-back-arrow bg-auto bg-center bg-no-repeat rtl:transform rtl:-scale-x-100" aria-label="{{#t}}Back{{/t}}" title="{{#t}}Back{{/t}}"></button>
+        <button id="back-btn" class="me-4 tablet:me-0 tablet:p-4 inline-block tablet:absolute tablet:-start-20 -top-1.5 w-5 h-3.5 p-5 bg-back-arrow bg-auto bg-center bg-no-repeat rtl:transform rtl:-scale-x-100 rounded hover:bg-grey-50 active:bg-grey-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500" aria-label="{{#t}}Back{{/t}}" title="{{#t}}Back{{/t}}"></button>
       {{/needsMobileConfirmed}}
       <h1 class="mb-5 text-grey-400 text-base{{#needsMobileConfirmed}} inline-block align-top mt-2 tablet:mt-0{{/needsMobileConfirmed}}" id="cad-header">Connect another device</h1>
 
       {{^needsMobileConfirmed}}
-        <h2 id="pair-header" class="card-header">{{#t}}Sync your Firefox experience{{/t}}</h2>
+        <h2 id="pair-header" class="card-header focus:outline-none" tabindex="-1">{{#t}}Sync your Firefox experience{{/t}}</h2>
       {{/needsMobileConfirmed}}
       {{#needsMobileConfirmed}}
-        <h2 id="pair-header-mobile" class="card-header">{{#t}}Download Firefox for mobile{{/t}}</h2>
+        <h2 id="pair-header-mobile" class="card-header focus:outline-none" tabindex="-1">{{#t}}Download Firefox for mobile{{/t}}</h2>
       {{/needsMobileConfirmed}}
 
     {{/askMobileStatus}}
     {{^askMobileStatus}}
-      <h2 id="pair-header" class="card-header">{{#t}}Sync Firefox on your phone or tablet{{/t}}</h2>
+      <h2 id="pair-header" class="card-header" tabindex="-1">{{#t}}Sync Firefox on your phone or tablet{{/t}}</h2>
     {{/askMobileStatus}}
   </header>
 
@@ -77,7 +77,7 @@
     {{/askMobileStatus}}
 
     {{^askMobileStatus}}
-      <div class="{{graphicId}} mt-5" role="img" aria-label="{{#t}}Complete your set-up{{/t}}"></div>
+      <div class="{{graphicId}} mt-5" role="img" aria-label="{{#t}}Devices with hearts on their screens{{/t}}"></div>
       <p class="mt-5 mb-5 px-16">{{#t}}Take your tabs, bookmarks, and passwords anywhere you use Firefox.{{/t}}</p>
       <form novalidate>
         <div class="flex">

diff --git a/packages/fxa-content-server/app/scripts/views/mixins/pairing-graphics-mixin.js b/packages/fxa-content-server/app/scripts/views/mixins/pairing-graphics-mixin.js
@@ -16,14 +16,6 @@ import UrlMixin from '../../lib/url-mixin';
 export default {
   dependsOn: [UserAgentMixin, UrlMixin],
 
-  /**
-   * Returns graphicId 'bg-image-cad-hearts' if the
-   * browser supports SVG Transform Origin, and 'bg-image-cad'
-   * if it does not.
-   *
-   * @returns {String}
-   */
-
   getGraphicsId() {
     const uap = this.getUserAgent();
     if (uap.supportsSvgTransformOrigin()) {

diff --git a/packages/fxa-content-server/app/scripts/views/pair/index.js b/packages/fxa-content-server/app/scripts/views/pair/index.js
@@ -81,7 +81,7 @@ class PairIndexView extends FormView {
     });
   }
 
-  setNeedsMobile() {
+  async setNeedsMobile() {
     const needsMobileConfirmed =
       this.getElementValue('input[id="needs-mobile"]:checked') === 'on';
     this.model.set('needsMobileConfirmed', needsMobileConfirmed);
@@ -93,19 +93,24 @@ class PairIndexView extends FormView {
     });
 
     if (needsMobileConfirmed) {
-      this.render();
+      await this.render();
+      // For screen readers/keyboard users, to avoid rereading the Moz logo and CAD header
+      this.$('#pair-header-mobile').focus();
     } else {
       GleanMetrics.cadFirefox.syncDeviceSubmit();
       this.submit();
     }
   }
 
-  handleBackButton() {
+  async handleBackButton() {
     this.model.set('needsMobileConfirmed', false);
-    this.render();
+    await this.render();
+    // For screen readers/keyboard users, to avoid needing to re-enter web content and
+    // avoid rereading the Moz logo and CAD header
+    this.$('#pair-header').focus();
   }
 
-  handleRadioEngage(e) {
+  handleRadioEngage() {
     this.$('#set-needs-mobile').removeAttr('disabled');
     const reason =
       this.getElementValue('input[id="needs-mobile"]:checked') === 'on'

diff --git a/packages/fxa-content-server/app/styles/tailwind/images.css b/packages/fxa-content-server/app/styles/tailwind/images.css
@@ -17,11 +17,6 @@
   background-image: inline('../images/graphic_mail.svg');
 }
 
-.bg-image-cad-hearts {
-  @apply mb-8 bg-center bg-no-repeat bg-contain h-40;
-  background-image: inline('../images/account-verified-hearts.svg');
-}
-
 .bg-image-triple-device-hearts {
   @apply mb-5 bg-center bg-no-repeat bg-contain h-48;
   background-image: inline('../images/graphic-triple-device-hearts.svg');