创建React App jsx-a11y / accessible-emoji警告不会消失

Question

我jsx-a11y/accessible-emoji从使用表情符号的Create React App 获得警告。

为了解决这个问题，我尝试制作具有可访问性要求的组件，但是我仍然收到警告：

const EmojiWrap = props => {
  return (
    <span role="img" aria-label="sheep">
      {props.children}
    </span>
  );
};

<EmojiWrap></EmojiWrap>

我相信这应该工作，所以这可能是eslint的错误/创建react应用程序的错误吗？

我也尝试过使用 aria-hidden="true"

Answer 1

我发现的最佳解决方案是Sean McPherson 的 a11y-react-emoji Component。

添加a11y-react-emoji到您的项目：

npm install a11y-react-emoji
# or
yarn add a11y-react-emoji

导入 Emoji 组件并使用它：

import Emoji from 'a11y-react-emoji';

function EmojiExample() {
    return (
        <Emoji symbol="" label="sheep" />
    )
}

完全归功于 Sean 和他在 Medium 上的文章。