Background

The current way of exposing the emojis in the quicksurvey is an issue for screenreader and assistive technology users.
The answers start with the emoji being read out, making the experience unnecessary long and not tingling emotion like with sighted users.

• VoiceOver: usually says “thumbs up” (and includes skin tone if present)
• NVDA / JAWS: similar, sometimes “thumbs up sign”
• TalkBack: typically “thumbs up”

Design requirements / Developer notes

While we could also put the emojis in a CSS-only way, e.g. with a :;before selector, emoji thumbs are not universal, e.g. parts of Middle East thumbs up “is seen as offensive and equivalent to showing the middle finger in Western cultures”.

So it must remain in the localizable messaging for i18n and we need to rely on translators. Simplest way out is to wrap emojis in <span> elements with an aria-hidden="true".

User story

As screenreader user I'd like to have a pleasant and quick presentation of the survey.

Requirements

Acceptance criteria

• Wrap emojis in <span aria-hidden="true"> elements in messages

BDD

Scenario A user enables VoiceOver tool for Special:ReadingLists page

Given a user is on Special:ReadingLists with the QuickSurvey buttons 
When a user tabs on Special:ReadingLists
Then  a VoiceOver tool won't describe the emojis

Test Steps

• Emojis aren't read out by screenreaders