Commit 053f4819 authored by Drew Willcoxon's avatar Drew Willcoxon
Browse files

Bug 1750205 - Properly handle a11y when the Firefox Suggest online opt-in... 

Bug 1750205 - Properly handle a11y when the Firefox Suggest online opt-in modal changes panes/sections. r=daisuke, a=RyanVM

Updating `aria-labelledby` and `aria-describedby` seems to work. We aren't using
`aria-live` correctly I think, which is my fault since I suggested it. AFAICT
that should be used on an element whose subtree changes. That's not the case for
these `h1` elements. It is the case for the `body` element, and I tried setting
`aria-live=polite` on it, but it ended up causing everything in the main section
to be read multiple times.

Differential Revision: https://phabricator.services.mozilla.com/D136055
parent f5b29c56

browser/components/urlbar/content/quicksuggestOnboarding.html

+2 −3
Original line number Diff line number Diff line
@@ -30,7 +30,6 @@ 
      <span class="logo" role="presentation"></span>

      <h1 id="introduction-title"

          class="title"

          aria-live="polite"

          data-l10n-id="firefox-suggest-onboarding-introduction-title-1"></h1>

      <div class="buttonBox">

        <button id="onboardingNext"
@@ -48,14 +47,14 @@ 
      <span class="logo" role="presentation"></span>

      <h1 id="main-title"

          class="title"

          aria-live="polite"

          data-l10n-id="firefox-suggest-onboarding-main-title-1"></h1>

      <div class="description-section">

        <h2 id="main-description"

            class="description"

            tabindex="-1"

            data-l10n-id="firefox-suggest-onboarding-main-description-1"></h2>

        <h3 class="privacy-first"

        <h3 id="main-privacy-first"

            class="privacy-first"

            tabindex="-1"

            data-l10n-id="firefox-suggest-onboarding-main-privacy-first"></h2>

      </div>

browser/components/urlbar/content/quicksuggestOnboarding.js

+7 −1
Original line number Diff line number Diff line
@@ -145,9 +145,15 @@ document.addEventListener("DOMContentLoaded", async () => { 
    window.close();

  });

  addSubmitListener(document.getElementById("onboardingNext"), () => {

    window.arguments[0].visitedMain = true;

    document.getElementById("introduction-section").classList.add("inactive");

    document.getElementById("main-section").classList.add("active");

    window.arguments[0].visitedMain = true;

    document.body.setAttribute("aria-labelledby", "main-title");

    let ariaDescribedBy = "main-description";

    if (variation?.mainPrivacyFirst) {

      ariaDescribedBy += " main-privacy-first";

    }

    document.body.setAttribute("aria-describedby", ariaDescribedBy);

  });

  addSubmitListener(document.getElementById("onboardingLearnMore"), () => {

    window.arguments[0].choice = ONBOARDING_CHOICE.LEARN_MORE_2;