Bug 1562194 - update <optgroup> text label audit rules and only keep the text label for optgroup from label rule. r=nchevobbe,fluent-reviewers,flod
authorYura Zenevich <yura.zenevich@gmail.com>
Thu, 04 Jul 2019 15:16:57 +0000
changeset 544140 234bd7dea9b0c4b4eb0ba76473e69713bf141388
parent 544139 35d33e763422611b7b63530cde0df8c266e6677e
child 544141 f208e9b31132d7593c9737d6ae4e22915aa822c1
push id2131
push userffxbld-merge
push dateMon, 26 Aug 2019 18:30:20 +0000
treeherdermozilla-release@b19ffb3ca153 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe, fluent-reviewers, flod
bugs1562194
milestone69.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 1562194 - update <optgroup> text label audit rules and only keep the text label for optgroup from label rule. r=nchevobbe,fluent-reviewers,flod Differential Revision: https://phabricator.services.mozilla.com/D36760
devtools/client/accessibility/components/TextLabelCheck.js
devtools/client/accessibility/constants.js
devtools/client/locales/en-US/accessibility.ftl
devtools/server/actors/accessibility/audit/text-label.js
devtools/server/actors/highlighters/utils/accessibility.js
devtools/server/tests/browser/browser_accessibility_text_label_audit.js
devtools/shared/constants.js
devtools/shared/locales/en-US/accessibility.properties
--- a/devtools/client/accessibility/components/TextLabelCheck.js
+++ b/devtools/client/accessibility/components/TextLabelCheck.js
@@ -24,17 +24,16 @@ const {
         DIALOG_NO_NAME,
         DOCUMENT_NO_TITLE,
         EMBED_NO_NAME,
         FIGURE_NO_NAME,
         FORM_FIELDSET_NO_NAME,
         FORM_FIELDSET_NO_NAME_FROM_LEGEND,
         FORM_NO_NAME,
         FORM_NO_VISIBLE_NAME,
-        FORM_OPTGROUP_NO_NAME,
         FORM_OPTGROUP_NO_NAME_FROM_LABEL,
         FRAME_NO_NAME,
         HEADING_NO_CONTENT,
         HEADING_NO_NAME,
         IFRAME_NO_NAME_FROM_TITLE,
         IMAGE_NO_NAME,
         INTERACTIVE_NO_NAME,
         MATHML_GLYPH_NO_NAME,
@@ -118,25 +117,16 @@ const ISSUE_TO_ANNOTATION_MAP = {
   [FORM_NO_NAME]: {
     href: A11Y_TEXT_LABEL_LINKS.FORM_NO_NAME,
     l10nId: "accessibility-text-label-issue-form",
   },
   [FORM_NO_VISIBLE_NAME]: {
     href: A11Y_TEXT_LABEL_LINKS.FORM_NO_VISIBLE_NAME,
     l10nId: "accessibility-text-label-issue-form-visible",
   },
-  [FORM_OPTGROUP_NO_NAME]: {
-    href: A11Y_TEXT_LABEL_LINKS.FORM_OPTGROUP_NO_NAME,
-    l10nId: "accessibility-text-label-issue-optgroup",
-    args: {
-      get code() {
-        return ReactDOM.code({}, "optgroup");
-      },
-    },
-  },
   [FORM_OPTGROUP_NO_NAME_FROM_LABEL]: {
     href: A11Y_TEXT_LABEL_LINKS.FORM_OPTGROUP_NO_NAME_FROM_LABEL,
     l10nId: "accessibility-text-label-issue-optgroup-label",
     args: {
       get code() {
         return ReactDOM.code({}, "label");
       },
       // Note: there is no way right now to use custom elements in privileged
--- a/devtools/client/accessibility/constants.js
+++ b/devtools/client/accessibility/constants.js
@@ -12,17 +12,16 @@ const {
         DIALOG_NO_NAME,
         DOCUMENT_NO_TITLE,
         EMBED_NO_NAME,
         FIGURE_NO_NAME,
         FORM_FIELDSET_NO_NAME,
         FORM_FIELDSET_NO_NAME_FROM_LEGEND,
         FORM_NO_NAME,
         FORM_NO_VISIBLE_NAME,
-        FORM_OPTGROUP_NO_NAME,
         FORM_OPTGROUP_NO_NAME_FROM_LABEL,
         FRAME_NO_NAME,
         HEADING_NO_CONTENT,
         HEADING_NO_NAME,
         IFRAME_NO_NAME_FROM_TITLE,
         IMAGE_NO_NAME,
         INTERACTIVE_NO_NAME,
         MATHML_GLYPH_NO_NAME,
@@ -123,17 +122,16 @@ const A11Y_TEXT_LABEL_LINK_IDS = {
   [DOCUMENT_NO_TITLE]: "Documents_must_have_a_title",
   [EMBED_NO_NAME]: "Embedded_content_must_have_a_name",
   [FIGURE_NO_NAME]: "Figures_with_optional_captions_should_have_a_name",
   [FORM_FIELDSET_NO_NAME]: "Form_element_groups_must_have_a_name",
   [FORM_FIELDSET_NO_NAME_FROM_LEGEND]:
     "Use_legend_element_to_provide_a_name_for_form_element_groups",
   [FORM_NO_NAME]: "Form_elements_must_have_a_name",
   [FORM_NO_VISIBLE_NAME]: "Form_elements_should_have_a_visible_text_label",
-  [FORM_OPTGROUP_NO_NAME]: "Groupings_of_options_must_have_a_name",
   [FORM_OPTGROUP_NO_NAME_FROM_LABEL]:
     "Use_label_attribute_to_provide_a_name_for_groupings_of_options",
   [FRAME_NO_NAME]: "Frames_must_have_a_name",
   [HEADING_NO_NAME]: "Headings_must_have_a_name",
   [HEADING_NO_CONTENT]: "Headings_must_have_visible_text_content",
   [IFRAME_NO_NAME_FROM_TITLE]: "Use_title_attribute_to_describe_iframe_content",
   [IMAGE_NO_NAME]: "Content_with_images_must_have_a_name",
   [INTERACTIVE_NO_NAME]: "Interactive_elements_must_have_a_name",
--- a/devtools/client/locales/en-US/accessibility.ftl
+++ b/devtools/client/locales/en-US/accessibility.ftl
@@ -50,13 +50,11 @@ accessibility-text-label-issue-heading =
 accessibility-text-label-issue-heading-content = Headings should have visible text content. <a>Learn more</a>
 
 accessibility-text-label-issue-iframe = Use <code>title</code> attribute to describe <span>iframe</span> content. <a>Learn more</a>
 
 accessibility-text-label-issue-image = Content with images must be labeled. <a>Learn more</a>
 
 accessibility-text-label-issue-interactive = Interactive elements must be labeled. <a>Learn more</a>
 
-accessibility-text-label-issue-optgroup = <code>optgroup</code> elements must be labeled. <a>Learn more</a>
-
 accessibility-text-label-issue-optgroup-label = Use <code>label</code> attribute to label <span>optgroup</span> elements. <a>Learn more</a>
 
 accessibility-text-label-issue-toolbar = Toolbars must be labeled when there is more than one toolbar. <a>Learn more</a>
--- a/devtools/server/actors/accessibility/audit/text-label.js
+++ b/devtools/server/actors/accessibility/audit/text-label.js
@@ -16,17 +16,16 @@ const {
   DIALOG_NO_NAME,
   DOCUMENT_NO_TITLE,
   EMBED_NO_NAME,
   FIGURE_NO_NAME,
   FORM_FIELDSET_NO_NAME,
   FORM_FIELDSET_NO_NAME_FROM_LEGEND,
   FORM_NO_NAME,
   FORM_NO_VISIBLE_NAME,
-  FORM_OPTGROUP_NO_NAME,
   FORM_OPTGROUP_NO_NAME_FROM_LABEL,
   FRAME_NO_NAME,
   HEADING_NO_CONTENT,
   HEADING_NO_NAME,
   IFRAME_NO_NAME_FROM_TITLE,
   IMAGE_NO_NAME,
   INTERACTIVE_NO_NAME,
   MATHML_GLYPH_NO_NAME,
@@ -170,21 +169,17 @@ const formRule = function(accessible) {
  *          otherwise.
  */
 const formGroupingRule = function(accessible) {
   const name = getAccessibleName(accessible);
   const { DOMNode } = accessible;
 
   switch (DOMNode.nodeName) {
     case "OPTGROUP":
-      if (!name) {
-        return { score: FAIL, issue: FORM_OPTGROUP_NO_NAME };
-      }
-
-      return DOMNode.label && DOMNode.label.trim() === name ? null : {
+      return name && DOMNode.label && DOMNode.label.trim() === name ? null : {
         score: FAIL,
         issue: FORM_OPTGROUP_NO_NAME_FROM_LABEL,
       };
     case "FIELDSET":
       if (!name) {
         return { score: FAIL, issue: FORM_FIELDSET_NO_NAME };
       }
 
--- a/devtools/server/actors/highlighters/utils/accessibility.js
+++ b/devtools/server/actors/highlighters/utils/accessibility.js
@@ -22,17 +22,16 @@ const {
         DIALOG_NO_NAME,
         DOCUMENT_NO_TITLE,
         EMBED_NO_NAME,
         FIGURE_NO_NAME,
         FORM_FIELDSET_NO_NAME,
         FORM_FIELDSET_NO_NAME_FROM_LEGEND,
         FORM_NO_NAME,
         FORM_NO_VISIBLE_NAME,
-        FORM_OPTGROUP_NO_NAME,
         FORM_OPTGROUP_NO_NAME_FROM_LABEL,
         FRAME_NO_NAME,
         HEADING_NO_CONTENT,
         HEADING_NO_NAME,
         IFRAME_NO_NAME_FROM_TITLE,
         IMAGE_NO_NAME,
         INTERACTIVE_NO_NAME,
         MATHML_GLYPH_NO_NAME,
@@ -639,17 +638,16 @@ class TextLabel extends AuditReport {
       [DOCUMENT_NO_TITLE]: "accessibility.text.label.issue.document.title",
       [EMBED_NO_NAME]: "accessibility.text.label.issue.embed",
       [FIGURE_NO_NAME]: "accessibility.text.label.issue.figure",
       [FORM_FIELDSET_NO_NAME]: "accessibility.text.label.issue.fieldset",
       [FORM_FIELDSET_NO_NAME_FROM_LEGEND]:
         "accessibility.text.label.issue.fieldset.legend",
       [FORM_NO_NAME]: "accessibility.text.label.issue.form",
       [FORM_NO_VISIBLE_NAME]: "accessibility.text.label.issue.form.visible",
-      [FORM_OPTGROUP_NO_NAME]: "accessibility.text.label.issue.optgroup",
       [FORM_OPTGROUP_NO_NAME_FROM_LABEL]: "accessibility.text.label.issue.optgroup.label",
       [FRAME_NO_NAME]: "accessibility.text.label.issue.frame",
       [HEADING_NO_CONTENT]: "accessibility.text.label.issue.heading.content",
       [HEADING_NO_NAME]: "accessibility.text.label.issue.heading",
       [IFRAME_NO_NAME_FROM_TITLE]: "accessibility.text.label.issue.iframe",
       [IMAGE_NO_NAME]: "accessibility.text.label.issue.image",
       [INTERACTIVE_NO_NAME]: "accessibility.text.label.issue.interactive",
       [MATHML_GLYPH_NO_NAME]: "accessibility.text.label.issue.glyph",
--- a/devtools/server/tests/browser/browser_accessibility_text_label_audit.js
+++ b/devtools/server/tests/browser/browser_accessibility_text_label_audit.js
@@ -17,17 +17,16 @@ const {
         DIALOG_NO_NAME,
         DOCUMENT_NO_TITLE,
         EMBED_NO_NAME,
         FIGURE_NO_NAME,
         FORM_FIELDSET_NO_NAME,
         FORM_FIELDSET_NO_NAME_FROM_LEGEND,
         FORM_NO_NAME,
         FORM_NO_VISIBLE_NAME,
-        FORM_OPTGROUP_NO_NAME,
         FORM_OPTGROUP_NO_NAME_FROM_LABEL,
         HEADING_NO_CONTENT,
         HEADING_NO_NAME,
         IFRAME_NO_NAME_FROM_TITLE,
         IMAGE_NO_NAME,
         INTERACTIVE_NO_NAME,
         MATHML_GLYPH_NO_NAME,
         TOOLBAR_NO_NAME,
@@ -176,19 +175,19 @@ add_task(async function() {
     ["Aria image with aria-label", "#img-8", null],
     ["Aria image with aria-labelledby", "#img-9", null],
     ["Aria image with empty aria-label", "#img-10",
       { score: FAIL, issue: IMAGE_NO_NAME }],
     ["Aria image with aria-labelledby an element with empty content", "#img-11",
       { score: FAIL, issue: IMAGE_NO_NAME }],
     ["<optgroup> with label", "#optgroup-1", null],
     ["<optgroup> with empty label", "#optgroup-2",
-      { score: FAIL, issue: FORM_OPTGROUP_NO_NAME }],
+      { score: FAIL, issue: FORM_OPTGROUP_NO_NAME_FROM_LABEL }],
     ["<optgroup> with no label", "#optgroup-3",
-      { score: FAIL, issue: FORM_OPTGROUP_NO_NAME }],
+      { score: FAIL, issue: FORM_OPTGROUP_NO_NAME_FROM_LABEL }],
     ["<optgroup> with aria-label", "#optgroup-4",
       { score: FAIL, issue: FORM_OPTGROUP_NO_NAME_FROM_LABEL }],
     ["<optgroup> with aria-labelledby", "#optgroup-5",
       { score: FAIL, issue: FORM_OPTGROUP_NO_NAME_FROM_LABEL }],
     ["<fieldset> with <legend>", "#fieldset-1", null],
     ["<fieldset> with empty <legend>", "#fieldset-2",
       { score: FAIL, issue: FORM_FIELDSET_NO_NAME }],
     ["<fieldset> with no <legend>", "#fieldset-3",
--- a/devtools/shared/constants.js
+++ b/devtools/shared/constants.js
@@ -32,18 +32,16 @@ const ISSUE_TYPE = {
     // <FIELDSET> name is not provided.
     FORM_FIELDSET_NO_NAME: "FORM_FIELDSET_NO_NAME",
     // <FIELDSET> name is not provided via <LEGEND> element.
     FORM_FIELDSET_NO_NAME_FROM_LEGEND: "FORM_FIELDSET_NO_NAME_FROM_LEGEND",
     // Form element's name is not provided.
     FORM_NO_NAME: "FORM_NO_NAME",
     // Form element's name is not visible.
     FORM_NO_VISIBLE_NAME: "FORM_NO_VISIBLE_NAME",
-    // <OPTGROUP> name is not provided.
-    FORM_OPTGROUP_NO_NAME: "FORM_OPTGROUP_NO_NAME",
     // <OPTGROUP> name is not provided via "label" attribute.
     FORM_OPTGROUP_NO_NAME_FROM_LABEL: "FORM_OPTGROUP_NO_NAME_FROM_LABEL",
     // <FRAME> name is not provided.
     FRAME_NO_NAME: "FRAME_NO_NAME",
     // <H{1, 2, ...}> has no content.
     HEADING_NO_CONTENT: "HEADING_NO_CONTENT",
     // <H{1, 2, ...}> name is not provided.
     HEADING_NO_NAME: "HEADING_NO_NAME",
--- a/devtools/shared/locales/en-US/accessibility.properties
+++ b/devtools/shared/locales/en-US/accessibility.properties
@@ -95,21 +95,16 @@ accessibility.text.label.issue.iframe = Use “title” attribute to describe “iframe” content.
 # name provided.
 accessibility.text.label.issue.image = Content with images must be labeled.
 
 # LOCALIZATION NOTE (accessibility.text.label.issue.interactive): A title text that
 # describes that currently selected accessible object for interactive element must have a
 # name provided.
 accessibility.text.label.issue.interactive = Interactive elements must be labeled.
 
-# LOCALIZATION NOTE (accessibility.text.label.issue.optgroup): A title text that
-# describes that currently selected accessible object for an <optgroup> must have a
-# name provided.
-accessibility.text.label.issue.optgroup = “optgroup” elements must be labeled.
-
 # LOCALIZATION NOTE (accessibility.text.label.issue.optgroup.label): A title text that
 # describes that currently selected accessible object for an <optgroup> must have a
 # name provided via label attribute.
 accessibility.text.label.issue.optgroup.label = Use “label” attribute to label “optgroup” elements.
 
 # LOCALIZATION NOTE (accessibility.text.label.issue.toolbar): A title text that
 # describes that currently selected accessible object for a toolbar must have a
 # name provided when there is more than one toolbar in the document.