Improve Accessibility of the new Emoji picker

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

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%;

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("")}
+                {rightButton}
-                    className={`mx_EmojiPicker_search_icon ${this.props.query ? "mx_EmojiPicker_search_clear" : ""}`}
-                    title={this.props.query ? _t("Cancel search") : _t("Search")} />
             </div>
         );
     }