Allow unmatched elements for 4.1.2 which are role='button' to use ari…

…a labels to pass as valid names for an accessibility API. This will trigger on any element using that role. This resolves squizlabs#160.
silktide · Mar 25, 2018 · 5b115e6 · 5b115e6
1 parent 68e2a2b
commit 5b115e6
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/Standards/WCAG2AAA/Sniffs/Principle4/Guideline4_1/4_1_2.js b/Standards/WCAG2AAA/Sniffs/Principle4/Guideline4_1/4_1_2.js
@@ -205,9 +205,9 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle4_Guideline4_1_4_1_2 = {
             var matchingRequiredNames  = requiredNames[nodeName];
             var requiredValue = requiredValues[nodeName];
 
-            // Any element that doesn't have specific handling must have content.
+            // Any element that doesn't have specific handling must have content or aria labels.
             if (!matchingRequiredNames && nodeName !== 'input_hidden') {
-                matchingRequiredNames = ['_content'];
+                matchingRequiredNames = ['_content', '@aria-label', '@aria-labelledby'];
             }
 
             // Check all possible combinations of names to ensure that one exists.
@@ -230,7 +230,6 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle4_Guideline4_1_4_1_2 = {
                     } else if (requiredName.charAt(0) === '@') {
                         // Attribute.
                         requiredName = requiredName.substr(1, requiredName.length);
-
                         if ((requiredName === 'aria-label' || requiredName === 'aria-labelledby') && HTMLCS.util.hasValidAriaLabel(element)) {
                             break;
                         }

diff --git a/Tests/WCAG2/4_1_2_Aria_Labels.html b/Tests/WCAG2/4_1_2_Aria_Labels.html
@@ -13,6 +13,8 @@
 Assert: No Error *.H53.ARIA6 on #objectLabelledBy
 Assert: No Error *.H53.ARIA6 on #objectLabel
 Assert: No Error *.H91.A.NoContent on #hyperlinkLabel
+Assert: Error *.H91.* on #buttonRoleFail
+Assert: No Error *.H91.Name on #buttonRoleSuccess
 -->
 </head>
 <body>
@@ -45,6 +47,9 @@
 
 <a id="hyperlinkLabel" href="http://www.squiz.net" aria-label="Label as valid content"></a>
 
+<div role="button" id="buttonRoleFail"></div>
+<div role="button" id="buttonRoleSuccess" title="Toggle time list" aria-label="Toggle Time List" aria-controls="myid"></div>
+
 </form>
 </body>
 </html>