Eslint-plugin-jsx-a11y: accessible-emoji and react native

[Zidail]

When viewing some React Native code (specifically initial installs of Storybook), I came across an example with:

<Text>😀 😎 👍 💯</Text>

It displays perfectly fine, but I get the error [jsx-a11y/accessible-emoji].
This required them to be wrapped in a span with a role.

Is there anyway to rectify this without disabling the rule?

[ljharb]

The rule is written for a11y on the web; I’m not sure it’s helpful in a native context.

[Zidail]

Hm, would the equivalent of this rule be something like adding the accessibilityLabel to the text component?

[ljharb]

I’m not familiar enough with accessibility on native to answer that.

[mrlubos]

Same warning in React for web. Wrapped emoji with <Emoji /> wrapper satisfying the a11y conditions, but the warning still displays. Is there an easy way to fix this? I can live with the warnings if not.

[ljharb]

@lmenus for that, the rule would need a custom option where you could list the name of a component that satisfies these conditions for you.

[mrlubos]

Thank you for the prompt reply @ljharb! So the answer is no. Would you suggest to keep using the wrapper or type out the longer <span role="img" aria-label="emoji">😭</span> every time?

[ljharb]

@lmenus at the moment, I'd type out the long version so as to ensure you get the benefit of this rule - however, you could also make a PR that adds the option, and then you'd get both :-D

[djErock]

How does one go about disabling this rule for one line that has an emoji wrapped in a component?

[djErock]

NvMind, I just added
"jsx-a11y/accessible-emoji": "off",
to the rules node of the .eslintrc file... durr... Is it Friday yet?

[mrlubos]

@djErock For a single line you do not need to turn off the rule completely. You can just append // eslint-disable-line jsx-a11y/accessible-emoji to the offending line.

[djErock]

@lmenus If the line is inside:

return(
    <Text>&#128275;</Text>
); 

It will not let you add that syntactically and error out.

Besides, this rule is essentially irrelevant for most react native projects anyways so there is no harm in just removing it altogether.

[evcohen]

@djErock you can do something like:

/* eslint-disable jsx-a11y/accessible-emoji */
return(
    <Text>&#128275;</Text>
); 
/* eslint-enable jsx-a11y/accessible-emoji */