add lint/accessibleEmoji for jsx-a11y

[VictorHom]

This pr adds a rule that checks an emoji is wrapped in a span that has role='img' and an aria-label/aria-labelledby

Rule

from the list in here

I could use some advice on what I should implement for the emoji check. There's different online articles about the check itself, but if you have suggestions, happy to update.

[luke-john]

I've been keeping an eye on this repo, as I'm keen to give it a go.

I reported this rule last year as leading to a degraded experience for users of accessibility technologies in the eslint-plugin-jsx-a11y. The issues still open there https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/627, not sure how active that project is.

The report is as follows.

From some testing on os x with VoiceOver, it seems the guidance provided in the rule jsx-a11y/accessible-emoji leads to a degraded experience with the label not being announced to the user.

I've setup a codepen which demonstrates this at the following link.

https://codepen.io/anon/pen/ymoBgb

The rule seemed to have been created based on the advice in a blog post from a few years ago now, so perhaps browsers and assistive technologies have advanced since then.

#136

[sebmck]

I'm not an expert in a11y by any means so I'm hesitant to add in rules that are potentially sketchy. If the advice is indeed outdated then I don't think we'd want this rule.

[sebmck]

@VictorHom What do you think?

[ematipico]

Good spot @luke-john !
I gave a spin to the codepen using the VoiceOver of the macOS and you're right!

The labels that wrap the emoji with a span creates an awful user experience: the phrase is cut off and you need to you use keyboard to navigate the whole paragraph.

On the other hand, the ones without the accessibility suggestion are spot one and the VoiceOver is able to pronounce the label associated to the emoji together with the phrase.

I'd say we can remove the suggestion.

P.S.: as far as I know, accessibility tests are done most of the time using the VoiceOver of macOS.

[sebmck]

Sweet! I'm going to close this out then.