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

--HG--
extra : moz-landing-system : lando

browser/components/protections/content/protections.js

@@ -141,6 +141,7 @@ document.addEventListener("DOMContentLoaded", e => {
             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(

browser/components/protections/test/browser/browser_protections_report_ui.js

@@ -239,6 +239,11 @@ add_task(async function test_graph_display() {
       "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%)",
@@ -256,6 +261,11 @@ add_task(async function test_graph_display() {
       "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%)",
@@ -273,6 +283,11 @@ add_task(async function test_graph_display() {
       "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%)",
@@ -288,6 +303,11 @@ add_task(async function test_graph_display() {
       "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%)",
@@ -303,6 +323,11 @@ add_task(async function test_graph_display() {
       "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%)",