[tbb-commits] [tor-browser] 29/311: Bug 1750205 - Properly handle a11y when the Firefox Suggest online opt-in modal changes panes/sections. r=daisuke, a=RyanVM, a=dsmith

[gitolite role]

This is an automated email from the git hooks/post-receive script.

pierov pushed a commit to branch geckoview-99.0.1-11.0-1
in repository tor-browser.

commit 354b475d2845b2a0acf55ac6b19e5e9974bca5a4
Author: Drew Willcoxon <adw at mozilla.com>
AuthorDate: Sun Jan 16 00:36:04 2022 +0000

    Bug 1750205 - Properly handle a11y when the Firefox Suggest online opt-in modal changes panes/sections. r=daisuke, a=RyanVM, a=dsmith
    
    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
---
 browser/components/urlbar/content/quicksuggestOnboarding.html | 5 ++---
 browser/components/urlbar/content/quicksuggestOnboarding.js   | 8 +++++++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/browser/components/urlbar/content/quicksuggestOnboarding.html b/browser/components/urlbar/content/quicksuggestOnboarding.html
index cdcdf2debcc6d..72d82bd3a7074 100644
--- a/browser/components/urlbar/content/quicksuggestOnboarding.html
+++ b/browser/components/urlbar/content/quicksuggestOnboarding.html
@@ -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>
diff --git a/browser/components/urlbar/content/quicksuggestOnboarding.js b/browser/components/urlbar/content/quicksuggestOnboarding.js
index 53829192e1f4f..252164224233b 100644
--- a/browser/components/urlbar/content/quicksuggestOnboarding.js
+++ b/browser/components/urlbar/content/quicksuggestOnboarding.js
@@ -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;

-- 
To stop receiving notification emails like this one, please contact
the administrator of this repository.