Bug 1574389 - Give each div containing a bar a role of "img" for accessibility, r=mtigley
authorMarco Zehe <mzehe@mozilla.com>
Fri, 16 Aug 2019 15:20:30 +0000
changeset 488549 4fd97109ddb2ad88a89b6702861391404c4a03d2
parent 488548 95dbe756b881d55bc1bf5cbe09a07253e3191cdc
child 488550 5b4030fa4ee52674a47fd06a55b85b1fa8d3bbb2
push id36446
push usermalexandru@mozilla.com
push dateFri, 16 Aug 2019 21:53:14 +0000
treeherdermozilla-central@1d4db40e38dd [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmtigley
bugs1574389
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1574389 - Give each div containing a bar a role of "img" for accessibility, r=mtigley While NVDA works fine with the current implementation, JAWS needs the divs themselves to have an explicit role to pick them up properly and read them to the user. Since the divs essentially contain a graphical representation, the "img" role is appropriate to use in this context. This makes JAWS pick up the information for each bar. Differential Revision: https://phabricator.services.mozilla.com/D42266
browser/components/protections/content/protections.js
browser/components/protections/test/browser/browser_protections_report_ui.js
--- a/browser/components/protections/content/protections.js
+++ b/browser/components/protections/content/protections.js
@@ -136,16 +136,17 @@ document.addEventListener("DOMContentLoa
           if (content[type]) {
             let dataHeight = (content[type] / content.total) * 100;
             // Since we are dealing with non-visual content, screen readers need a parent container to get the text
             let cellSpan = document.createElement("span");
             cellSpan.id = type + i;
             cellSpan.setAttribute("role", "cell");
             let div = document.createElement("div");
             div.className = `${type}-bar inner-bar`;
+            div.setAttribute("role", "img");
             div.setAttribute("data-type", type);
             div.style.height = `${dataHeight}%`;
             div.setAttribute(
               "data-l10n-args",
               JSON.stringify({ count: content[type], percentage: dataHeight })
             );
             div.setAttribute("data-l10n-id", `bar-tooltip-${type}`);
             weekTypeCounts[type] += content[type];
--- a/browser/components/protections/test/browser/browser_protections_report_ui.js
+++ b/browser/components/protections/test/browser/browser_protections_report_ui.js
@@ -235,16 +235,21 @@ add_task(async function test_graph_displ
       "trackers take 10%"
     );
     is(
       allBars[6].querySelector(".tracker-bar").parentNode.getAttribute("role"),
       "cell",
       "Trackers have the correct role"
     );
     is(
+      allBars[6].querySelector(".tracker-bar").getAttribute("role"),
+      "img",
+      "Tracker bar has the correct image role"
+    );
+    is(
       allBars[6].querySelector(".tracker-bar").getAttribute("aria-label"),
       "1 tracking content (10%)",
       "Trackers have the correct accessible text"
     );
     is(
       allBars[6].querySelector(".cryptominer-bar").style.height,
       "20%",
       "cryptominers take 20%"
@@ -252,16 +257,21 @@ add_task(async function test_graph_displ
     is(
       allBars[6]
         .querySelector(".cryptominer-bar")
         .parentNode.getAttribute("role"),
       "cell",
       "Cryptominers have the correct role"
     );
     is(
+      allBars[6].querySelector(".cryptominer-bar").getAttribute("role"),
+      "img",
+      "Cryptominer bar has the correct image role"
+    );
+    is(
       allBars[6].querySelector(".cryptominer-bar").getAttribute("aria-label"),
       "2 cryptominers (20%)",
       "Cryptominers have the correct accessible label"
     );
     is(
       allBars[6].querySelector(".fingerprinter-bar").style.height,
       "20%",
       "fingerprinters take 20%"
@@ -269,46 +279,61 @@ add_task(async function test_graph_displ
     is(
       allBars[6]
         .querySelector(".fingerprinter-bar")
         .parentNode.getAttribute("role"),
       "cell",
       "Fingerprinters have the correct role"
     );
     is(
+      allBars[6].querySelector(".fingerprinter-bar").getAttribute("role"),
+      "img",
+      "Fingerprinter bar has the correct image role"
+    );
+    is(
       allBars[6].querySelector(".fingerprinter-bar").getAttribute("aria-label"),
       "2 fingerprinters (20%)",
       "Fingerprinters have the correct accessible label"
     );
     is(
       allBars[6].querySelector(".cookie-bar").style.height,
       "40%",
       "cross site tracking cookies take 40%"
     );
     is(
       allBars[6].querySelector(".cookie-bar").parentNode.getAttribute("role"),
       "cell",
       "cross site tracking cookies have the correct role"
     );
     is(
+      allBars[6].querySelector(".cookie-bar").getAttribute("role"),
+      "img",
+      "Cross site tracking cookies bar has the correct image role"
+    );
+    is(
       allBars[6].querySelector(".cookie-bar").getAttribute("aria-label"),
       "4 cross-site tracking cookies (40%)",
       "cross site tracking cookies have the correct accessible label"
     );
     is(
       allBars[6].querySelector(".social-bar").style.height,
       "10%",
       "social trackers take 10%"
     );
     is(
       allBars[6].querySelector(".social-bar").parentNode.getAttribute("role"),
       "cell",
       "social trackers have the correct role"
     );
     is(
+      allBars[6].querySelector(".social-bar").getAttribute("role"),
+      "img",
+      "social tracker bar has the correct image role"
+    );
+    is(
       allBars[6].querySelector(".social-bar").getAttribute("aria-label"),
       "1 social media tracker (10%)",
       "social trackers have the correct accessible text"
     );
 
     is(
       allBars[5].querySelectorAll(".inner-bar").length,
       DATA_TYPES.length - 1,