Merge pull request #144 from vue-a11y/fix-84

Fix for #84

Author: kddnewton

CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) a
 ### Changed
 
 - Fix `iframe-has-title` such that if the attribute is ommitted completely that it fires correctly.
+- Fix `form-control-has-label` to ignore form controls nested inside `aria-hidden` elements.
 
 ## [0.6.1] - 2021-01-21
 

src/rules/__tests__/form-control-has-label.test.js

@@ -16,6 +16,11 @@ makeRuleTester("form-control-has-label", rule, {
           <slot />
         </div>
       </label>
+    `,
+    `
+      <div aria-hidden="true">
+        <input value="1" type="text" />
+      </div>
     `
   ],
   invalid: ["<input type='text' />", "<textarea type='text'></textarea>"]

src/rules/accessible-emoji.js

@@ -4,18 +4,10 @@ const {
   getElementAttributeValue,
   getElementType,
   hasAriaLabel,
-  isHiddenFromScreenReader,
+  isAriaHidden,
   makeDocsURL
 } = require("../utils");
 
-const isAriaHidden = (node) => {
-  if (!node || node.type !== "VElement") {
-    return false;
-  }
-
-  return isHiddenFromScreenReader(node) || isAriaHidden(node.parent);
-};
-
 module.exports = {
   meta: {
     docs: {

src/rules/form-control-has-label.js

@@ -3,6 +3,7 @@ const {
   getElementAttributeValue,
   getElementType,
   hasAriaLabel,
+  isAriaHidden,
   makeDocsURL
 } = require("../utils");
 
@@ -47,7 +48,11 @@ module.exports = {
           }
         }
 
-        if (!hasAriaLabel(node) && !hasLabelElement(node)) {
+        if (
+          !isAriaHidden(node) &&
+          !hasAriaLabel(node) &&
+          !hasLabelElement(node)
+        ) {
           context.report({ node, messageId: "default" });
         }
       }

src/utils.js

@@ -11,6 +11,7 @@ module.exports = {
   hasContent: require("./utils/hasContent"),
   hasOnDirective: require("./utils/hasOnDirective"),
   hasOnDirectives: require("./utils/hasOnDirectives"),
+  isAriaHidden: require("./utils/isAriaHidden"),
   isAttribute: require("./utils/isAttribute"),
   isHiddenFromScreenReader: require("./utils/isHiddenFromScreenReader"),
   isInteractiveElement: require("./utils/isInteractiveElement"),

src/utils/isAriaHidden.js

@@ -0,0 +1,11 @@
+const isHiddenFromScreenReader = require("./isHiddenFromScreenReader");
+
+const isAriaHidden = (node) => {
+  if (!node || node.type !== "VElement") {
+    return false;
+  }
+
+  return isHiddenFromScreenReader(node) || isAriaHidden(node.parent);
+};
+
+module.exports = isAriaHidden;