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>
);
}