From 2e6899be933f89fec9965b80341a55d9f4f68fa2 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 23 Oct 2019 18:39:39 +0100
Subject: [PATCH] Improve Accessibility of the new Emoji picker

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/emojipicker/_EmojiPicker.scss |  9 +++++++++
 src/components/views/emojipicker/Search.js  | 15 ++++++++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/res/css/views/emojipicker/_EmojiPicker.scss b/res/css/views/emojipicker/_EmojiPicker.scss
index 8f57d97833..3bf6845c85 100644
--- a/res/css/views/emojipicker/_EmojiPicker.scss
+++ b/res/css/views/emojipicker/_EmojiPicker.scss
@@ -114,6 +114,15 @@ limitations under the License.
     cursor: pointer;
 }
 
+.mx_EmojiPicker_search_icon {
+    width: 16px;
+    margin: 8px;
+}
+
+.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear) {
+    pointer-events: none;
+}
+
 .mx_EmojiPicker_search_icon::after {
     mask: url('$(res)/img/emojipicker/search.svg') no-repeat;
     mask-size: 100%;
diff --git a/src/components/views/emojipicker/Search.js b/src/components/views/emojipicker/Search.js
index 8646559fed..3432dadea8 100644
--- a/src/components/views/emojipicker/Search.js
+++ b/src/components/views/emojipicker/Search.js
@@ -35,13 +35,22 @@ class Search extends React.PureComponent {
     }
 
     render() {
+        let rightButton;
+        if (this.props.query) {
+            rightButton = (
+                <button onClick={() => this.props.onChange("")}
+                        className="mx_EmojiPicker_search_icon mx_EmojiPicker_search_clear"
+                        title={_t("Cancel search")} />
+            );
+        } else {
+            rightButton = <span className="mx_EmojiPicker_search_icon" />;
+        }
+
         return (
             <div className="mx_EmojiPicker_search">
                 <input autoFocus type="text" placeholder="Search" value={this.props.query}
                     onChange={ev => this.props.onChange(ev.target.value)} ref={this.inputRef} />
-                <button onClick={() => this.props.onChange("")}
-                    className={`mx_EmojiPicker_search_icon ${this.props.query ? "mx_EmojiPicker_search_clear" : ""}`}
-                    title={this.props.query ? _t("Cancel search") : _t("Search")} />
+                {rightButton}
             </div>
         );
     }