Search code examples
emojicreate-react-app

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

Im getting a jsx-a11y/accessible-emoji warning from Create React App using emojis.

To solve this I tried making a component with the accessibility requirements, however Im still getting the warnings: 

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

<EmojiWrap>🐑</EmojiWrap>

I belive this should work so could this be a bug with eslint / create react app?

Ive also tried using aria-hidden="true"

Solution

  • The best solution I found is Sean McPherson's a11y-react-emoji Component.

    Add a11y-react-emoji to your project:

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

    Import the Emoji component and use it:

    import Emoji from 'a11y-react-emoji';

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

    Full credit to Sean and his article on Medium.