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

Question

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"

Answer 1

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.

Answer 2

Not ideal but you can disable the warnings by adding this to the file:

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