Make some ARIA promises

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/emojipicker/Category.js

@@ -67,7 +67,13 @@ class Category extends React.PureComponent {
         const localScrollTop = Math.max(0, scrollTop - listTop);
 
         return (
-            <section className="mx_EmojiPicker_category" data-category-id={this.props.id}>
+            <section
+                id={`mx_EmojiPicker_category_${this.props.id}`}
+                className="mx_EmojiPicker_category"
+                data-category-id={this.props.id}
+                role="tabpanel"
+                aria-label={name}
+            >
                 <h2 className="mx_EmojiPicker_category_label">
                     {name}
                 </h2>

src/components/views/emojipicker/Emoji.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import {MenuItem} from "../../structures/ContextMenu";
 
 class Emoji extends React.PureComponent {
     static propTypes = {
@@ -30,14 +31,18 @@ class Emoji extends React.PureComponent {
         const { onClick, onMouseEnter, onMouseLeave, emoji, selectedEmojis } = this.props;
         const isSelected = selectedEmojis && selectedEmojis.has(emoji.unicode);
         return (
-            <li onClick={() => onClick(emoji)}
+            <MenuItem
+                element="li"
+                onClick={() => onClick(emoji)}
                 onMouseEnter={() => onMouseEnter(emoji)}
                 onMouseLeave={() => onMouseLeave(emoji)}
-                className="mx_EmojiPicker_item_wrapper">
+                className="mx_EmojiPicker_item_wrapper"
+                label={emoji.unicode}
+            >
                 <div className={`mx_EmojiPicker_item ${isSelected ? 'mx_EmojiPicker_item_selected' : ''}`}>
                     {emoji.unicode}
                 </div>
-            </li>
+            </MenuItem>
         );
     }
 }

src/components/views/emojipicker/Header.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from "classnames";
 
 class Header extends React.PureComponent {
     static propTypes = {
@@ -26,13 +27,23 @@ class Header extends React.PureComponent {
 
     render() {
         return (
-            <nav className="mx_EmojiPicker_header">
+            <nav className="mx_EmojiPicker_header" role="tablist">
-                {this.props.categories.map(category => (
+                {this.props.categories.map(category => {
-                    <button disabled={!category.enabled} key={category.id} ref={category.ref}
+                    const classes = classNames(`mx_EmojiPicker_anchor mx_EmojiPicker_anchor_${category.id}`, {
-                        className={`mx_EmojiPicker_anchor ${category.visible ? 'mx_EmojiPicker_anchor_visible' : ''}
+                        mx_EmojiPicker_anchor_visible: category.visible,
-                            mx_EmojiPicker_anchor_${category.id}`}
+                    });
-                        onClick={() => this.props.onAnchorClick(category.id)} title={category.name} />
+                    return <button
-                ))}
+                        disabled={!category.enabled}
+                        key={category.id}
+                        ref={category.ref}
+                        className={classes}
+                        onClick={() => this.props.onAnchorClick(category.id)}
+                        title={category.name}
+                        role="tab"
+                        aria-selected={category.visible}
+                        aria-controls={`mx_EmojiPicker_category_${category.id}`}
+                    />;
+                })}
             </nav>
         );
     }

src/components/views/emojipicker/QuickReactions.js

@@ -72,7 +72,7 @@ class QuickReactions extends React.Component {
                         </React.Fragment>
                     }
                 </h2>
-                <ul className="mx_EmojiPicker_list">
+                <ul className="mx_EmojiPicker_list" aria-label={_t("Quick Reactions")}>
                     {QUICK_REACTIONS.map(emoji => <Emoji
                         key={emoji.hexcode} emoji={emoji} onClick={this.props.onClick}
                         onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}