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" }); }