astra/ntfy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

WIP: Accessibility of web app

Browse source
This commit is contained in:
Philipp Heckel 2022-05-02 19:30:29 -04:00
parent 4a8678bf39
commit bb5e0e3fed
9 changed files with 170 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

10
web/src/components/EmojiPicker.js
View file

@ -73,6 +73,8 @@ const EmojiPicker = (props) => {
inputRef={searchRef}
margin="dense"
size="small"
role="searchbox"
aria-label={t("emoji_picker_search_placeholder")}
placeholder={t("emoji_picker_search_placeholder")}
value={search}
onChange={ev => setSearch(ev.target.value)}
@ -83,7 +85,9 @@ const EmojiPicker = (props) => {
InputProps={{
endAdornment:
<InputAdornment position="end" sx={{ display: (search) ? '' : 'none' }}>
<IconButton size="small" onClick={handleSearchClear} edge="end"><Close/></IconButton>
<IconButton size="small" onClick={handleSearchClear} edge="end" aria-label={t("emoji_picker_search_clear")}>
<Close/>
</IconButton>
</InputAdornment>
}}
/>
@ -130,10 +134,12 @@ const Category = (props) => {
const Emoji = (props) => {
const emoji = props.emoji;
const matches = emojiMatches(emoji, props.search);
const title = `${emoji.description} (${emoji.aliases[0]})`;
return (
<EmojiDiv
onClick={props.onClick}
title={`${emoji.description} (${emoji.aliases[0]})`}
title={title}
aria-label={title}
style={{ display: (matches) ? '' : 'none' }}
>
{props.emoji.emoji}