From 6801deffb60218f376371befa4e11225a3fe3f7e Mon Sep 17 00:00:00 2001 From: Marco Zehe Date: Thu, 15 Aug 2019 14:29:48 +0000 Subject: [PATCH] Bug 1574082 - Improve the labelling of the table and radio buttons, r=mtigley This adds some polish to the existing markup, making it all a bit more intuitive. 1. Associate the graph legend to the fake table so it becomes kind of the caption for that table for screen reader users. Screen reader users will then hear something like "Table showing a graph of .." plus the table information they already get since bug 1573197 landed. 2. Actually combine the number and tab's title into a spoken label for screen readers on each radio button, and for the description, use the explanatory paragraph's content. That way, screen reader users can just tab and arrow to each item in focus mode and hear all the relevant information at once without having to skip back and forth between the elements. Differential Revision: https://phabricator.services.mozilla.com/D42082 --HG-- extra : moz-landing-system : lando --- .../protections/content/protections.html | 32 +++++------ .../browser/browser_protections_report_ui.js | 55 +++++++++++++++---- 2 files changed, 59 insertions(+), 28 deletions(-) diff --git a/browser/components/protections/content/protections.html b/browser/components/protections/content/protections.html index 8ca1485de150..cb87d3b5edfb 100644 --- a/browser/components/protections/content/protections.html +++ b/browser/components/protections/content/protections.html @@ -36,52 +36,52 @@

-
+
- - + + - - + + - - + + - - + + - - + +

-

+

-

+

-

+

-

+

-

+

diff --git a/browser/components/protections/test/browser/browser_protections_report_ui.js b/browser/components/protections/test/browser/browser_protections_report_ui.js index baa871ff751c..aa3df88292c1 100644 --- a/browser/components/protections/test/browser/browser_protections_report_ui.js +++ b/browser/components/protections/test/browser/browser_protections_report_ui.js @@ -205,6 +205,11 @@ add_task(async function test_graph_display() { DATA_TYPES.length + 2, "Table has the right number of columns" ); + is( + content.document.getElementById("graph").getAttribute("aria-labelledby"), + "graphLegendDescription", + "Table has an accessible label" + ); // today has each type // yesterday will have no tracking cookies @@ -391,43 +396,69 @@ add_task(async function test_graph_display() { "Row has the columns in the right order" ); - // Check that each tab has the correct aria-describedby value. This helps screen readers - // know what type of tracker the reported tab number is referencing. + // Check that each tab has the correct aria-labelledby and aria-describedby + // values. This helps screen readers know what type of tracker the reported + // tab number is referencing. const socialTab = content.document.getElementById("tab-social"); + is( + socialTab.getAttribute("aria-labelledby"), + "socialLabel socialTitle", + "aria-labelledby attribute is socialLabel socialTitle" + ); is( socialTab.getAttribute("aria-describedby"), - "socialTitle", - "aria-describedby attribute is socialTitle" + "socialContent", + "aria-describedby attribute is socialContent" ); const cookieTab = content.document.getElementById("tab-cookie"); + is( + cookieTab.getAttribute("aria-labelledby"), + "cookieLabel cookieTitle", + "aria-labelledby attribute is cookieLabel cookieTitle" + ); is( cookieTab.getAttribute("aria-describedby"), - "cookieTitle", - "aria-describedby attribute is cookieTitle" + "cookieContent", + "aria-describedby attribute is cookieContent" ); const trackerTab = content.document.getElementById("tab-tracker"); + is( + trackerTab.getAttribute("aria-labelledby"), + "trackerLabel trackerTitle", + "aria-labelledby attribute is trackerLabel trackerTitle" + ); is( trackerTab.getAttribute("aria-describedby"), - "trackerTitle", - "aria-describedby attribute is trackerTitle" + "trackerContent", + "aria-describedby attribute is trackerContent" ); const fingerprinterTab = content.document.getElementById( "tab-fingerprinter" ); + is( + fingerprinterTab.getAttribute("aria-labelledby"), + "fingerprinterLabel fingerprinterTitle", + "aria-labelledby attribute is fingerprinterLabel fingerprinterTitle" + ); is( fingerprinterTab.getAttribute("aria-describedby"), - "fingerprinterTitle", - "aria-describedby attribute is fingerprinterTitle" + "fingerprinterContent", + "aria-describedby attribute is fingerprinterContent" ); const cryptominerTab = content.document.getElementById("tab-cryptominer"); + is( + cryptominerTab.getAttribute("aria-labelledby"), + "cryptominerLabel cryptominerTitle", + "aria-labelledby attribute is cryptominerLabel cryptominerTitle" + ); is( cryptominerTab.getAttribute("aria-describedby"), - "cryptominerTitle", - "aria-describedby attribute is cryptominerTitle" + "cryptominerContent", + "aria-describedby attribute is cryptominerContent" ); });