Merge pull request #30 from vue-a11y/aria-hidden-emojis

Don't warn for accessible-emoji when the emoji are a11y hidden

Author: kddnewton

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) a
 
 ## [Unreleased]
 
+### Changed
+
+- When emojis are hidden from the a11y tree, don't warn with the `accessible-emoji` rule.
+
 ## [0.3.0] - 2020-07-03
 
 ### Changed

src/rules/__tests__/accessible-emoji.test.js

@@ -6,7 +6,9 @@ makeRuleTester("accessible-emoji", rule, {
     "<div />",
     "<span />",
     "<span role='img' aria-label='Panda face'>😰</span>",
-    "<span role='img' aria-label='Snowman'>&#9731;</span>"
+    "<span role='img' aria-label='Snowman'>&#9731;</span>",
+    "<span aria-hidden>😰</span>",
+    "<div aria-hidden><span>😰</span></div>"
   ],
   invalid: [
     "<span>😰</span>",

src/rules/accessible-emoji.js

@@ -4,9 +4,18 @@ const {
   getElementAttributeValue,
   getElementType,
   hasAriaLabel,
+  isHiddenFromScreenReader,
   makeDocsURL
 } = require("../utils");
 
+const isAriaHidden = (node) => {
+  if (!node || node.type !== "VElement") {
+    return false;
+  }
+
+  return isHiddenFromScreenReader(node) || isAriaHidden(node.parent);
+};
+
 module.exports = {
   meta: {
     docs: {
@@ -25,9 +34,10 @@ module.exports = {
           const element = node.parent;
 
           if (
-            !hasAriaLabel(element) ||
-            getElementType(element) !== "span" ||
-            getElementAttributeValue(element, "role") !== "img"
+            !isAriaHidden(element) &&
+            (!hasAriaLabel(element) ||
+              getElementType(element) !== "span" ||
+              getElementAttributeValue(element, "role") !== "img")
           ) {
             context.report({ node, messageId: "default" });
           }