fix: improve a11y of emoji list

[nolanlawson]

fixes #218

This isn't my ideal implementation, but it broadly fixes the issues in #218. It's a good start. 🙂

1. Convert each clickable <span> into a <button> so that it's keyboard-accessible
2. Wrap each category list into a <section> with an aria-label corresponding to that section (should probably be a <ul>, but we can do that later)
3. Wrap the entire list of categories in a <section> with its own aria-label, currently defaulting to "List of emoji". This can be tweaked using the i18n object.

Potentially we could also include the shortcodes in the aria-label for each button; for now it's just the emoji itself.

[nolanlawson]

OK, I've added an aria-label containing the emoji itself plus all shortcodes, separated by commas. I did this because I realized that custom emoji had no accessible text (!) plus even native emoji were sometimes unclear with only one shortcode (e.g. 👍 reads as "+1", which is more clear if you add "thumbsup").

[hartmut-co-uk]

@nolanlawson when I visit https://missive.github.io/emoji-mart/
should I now be able to type, then navigate results via arrow keys?
A first try in Chrome doesn't seem to work - or is this a misunderstanding on my side what's been implemented with this PR?

[nolanlawson]

Yes, in terms of improving the accessibility of emoji-mart, I didn't make it a full autocomplete pattern where you can press the arrow keys to navigate between results. You have to just use the regions to move around after typing into the search bar.

Certainly not a perfect design a11y-wise, but it's at least usable with a keyboard, whereas before it wasn't. Should we open up a separate issue to improve the a11y further?