search

ealush / emoji-picker-react

The most popular React Emoji Picker
https://ealush.com/emoji-picker-react/
MIT License
991 stars 166 forks source link

Accessible names of icons #381

Closed Dominiczeq7 closed 4 months ago

Dominiczeq7 commented 7 months ago

There is need to have better aria-labels for some icons like flags. For example aria-label="flag-pl" is not very accessible.

ealush commented 7 months ago

Hm. Not sure how to handle this. Emoji names are provided by the js-emoji library. An option would be to just use all names in the label, but that might be a little bit excessive.

DGG-IVY commented 6 months ago

@ealush I have idea how to handle this. Let's look at ClickableEmojiButton.tsx. We have:

      aria-label={emojiNames[0]}
      data-full-name={emojiNames}

We can change to this:

      aria-label={emojiNames[0].match('flag-') ? emojiNames[1] : emojiNames[0]}
      data-full-name={emojiNames}

Because in data-full-name there is list of two values and we can catch case when flag name is used and use the second one. image

Can I make PR to push this change?

Dominiczeq7 commented 4 months ago

@ealush Can you merge this please? https://github.com/ealush/emoji-picker-react/pull/393

BTW. @DGG-IVY is my second account - I forgot to relogin