Repository: vue-a11y/eslint-plugin-vuejs-accessibility (ts)

Issue:
Skip aria-hidden emojis
```html
<template #label>
  <span aria-hidden>🔽</span>
  Title
</template>
<template #label="{ isOpen }">
  <span aria-hidden>{{ isOpen ? "🔼" : "🔽" }}</span>
  Title
</template>
```
The above results in this message:

> Emojis should be wrapped in <span>, have role="img", and have an accessible description with aria-label or aria-labelledby

If it has an `aria-hidden` it should skip that message. `aria-hidden` completely removes the entire element from the accessibility API. So the role and label will not be seen.

Pull request:
Don't warn for accessible-emoji when the emoji are a11y hidden
Fixes #29 

Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index ea3043f..82cf2a8 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/rules/accessible-emoji.js b/src/rules/accessible-emoji.js
index e0b7cc8..bcae48a 100644
--- a/src/rules/accessible-emoji.js
+++ b/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" });
           }


Test patch:
diff --git a/src/rules/__tests__/accessible-emoji.test.js b/src/rules/__tests__/accessible-emoji.test.js
index e3e563f..09f1755 100644
--- a/src/rules/__tests__/accessible-emoji.test.js
+++ b/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>",