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

Question

我收到来自使用表情符号创建 React 应用程序的 jsx-a11y/accessible-emoji 警告。

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

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

<EmojiWrap></EmojiWrap>

我相信这应该可行，所以这可能是 eslint / create react app 的错误吗？

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

Answer 1

不理想，但您可以通过将此添加到文件来禁用警告：

/* eslint-disable jsx-a11y/accessible-emoji */

Answer 2

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

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

导入表情符号组件并使用它：

import Emoji from 'a11y-react-emoji';

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

全部归功于 Sean 和 his article on Medium。

Create React App jsx-a11y/accessible-emoji warning won't go away