diff --git a/CHANGELOG.md b/CHANGELOG.md
index ea3043f7..82cf2a8e 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/__tests__/accessible-emoji.test.js b/src/rules/__tests__/accessible-emoji.test.js
index e3e563fe..09f1755d 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, {
"
",
"",
"😰",
- "☃"
+ "☃",
+ "😰",
+ "😰
"
],
invalid: [
"😰",
diff --git a/src/rules/accessible-emoji.js b/src/rules/accessible-emoji.js
index e0b7cc8a..bcae48a7 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" });
}