Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 13:14:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve Accessibility of the new Emoji picker

Browse Source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2019-10-23 18:39:39 +01:00
parent 3ee43dc2eb
commit 2e6899be93
2 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
res/css/views/emojipicker/_EmojiPicker.scss
View File

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

15
src/components/views/emojipicker/Search.js
View File

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