From 457f4c82db9de47ce3b4d6449e6794e6385b1cdc Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 25 May 2020 14:59:03 +0100
Subject: [PATCH] Make some ARIA promises

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/emojipicker/Category.js  |  8 +++++-
 src/components/views/emojipicker/Emoji.js     | 11 +++++---
 src/components/views/emojipicker/Header.js    | 25 +++++++++++++------
 .../views/emojipicker/QuickReactions.js       |  2 +-
 4 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/components/views/emojipicker/Category.js b/src/components/views/emojipicker/Category.js
index 3c4352105e..eb3f83dcdf 100644
--- a/src/components/views/emojipicker/Category.js
+++ b/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>
diff --git a/src/components/views/emojipicker/Emoji.js b/src/components/views/emojipicker/Emoji.js
index 75f23c5761..36aa4ff782 100644
--- a/src/components/views/emojipicker/Emoji.js
+++ b/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>
         );
     }
 }
diff --git a/src/components/views/emojipicker/Header.js b/src/components/views/emojipicker/Header.js
index b98e90e9b1..b3951c9ea5 100644
--- a/src/components/views/emojipicker/Header.js
+++ b/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">
-                {this.props.categories.map(category => (
-                    <button disabled={!category.enabled} key={category.id} ref={category.ref}
-                        className={`mx_EmojiPicker_anchor ${category.visible ? 'mx_EmojiPicker_anchor_visible' : ''}
-                            mx_EmojiPicker_anchor_${category.id}`}
-                        onClick={() => this.props.onAnchorClick(category.id)} title={category.name} />
-                ))}
+            <nav className="mx_EmojiPicker_header" role="tablist">
+                {this.props.categories.map(category => {
+                    const classes = classNames(`mx_EmojiPicker_anchor mx_EmojiPicker_anchor_${category.id}`, {
+                        mx_EmojiPicker_anchor_visible: category.visible,
+                    });
+                    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>
         );
     }
diff --git a/src/components/views/emojipicker/QuickReactions.js b/src/components/views/emojipicker/QuickReactions.js
index 0bc799d356..8a20a4659b 100644
--- a/src/components/views/emojipicker/QuickReactions.js
+++ b/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}