WIP: Accessibility of web app
This commit is contained in:
Philipp Heckel
parent
4a8678bf39
commit
bb5e0e3fed
9 changed files with 170 additions and 77 deletions
|
|
@ -1,10 +1,16 @@
|
|||
{
|
||||
"action_bar_show_menu": "Show menu",
|
||||
"action_bar_logo_alt": "ntfy logo",
|
||||
"action_bar_settings": "Settings",
|
||||
"action_bar_send_test_notification": "Send test notification",
|
||||
"action_bar_clear_notifications": "Clear all notifications",
|
||||
"action_bar_unsubscribe": "Unsubscribe",
|
||||
"action_bar_toggle_mute": "Toggle mute notifications",
|
||||
"action_bar_toggle_action_menu": "Toggle action menu",
|
||||
"message_bar_type_message": "Type a message here",
|
||||
"message_bar_error_publishing": "Error publishing notification",
|
||||
"message_bar_show_dialog": "Show publish dialog",
|
||||
"message_bar_publish": "Publish message",
|
||||
"nav_topics_title": "Subscribed topics",
|
||||
"nav_button_all_notifications": "All notifications",
|
||||
"nav_button_settings": "Settings",
|
||||
|
|
@ -16,14 +22,25 @@
|
|||
"alert_grant_button": "Grant now",
|
||||
"alert_not_supported_title": "Notifications not supported",
|
||||
"alert_not_supported_description": "Notifications are not supported in your browser.",
|
||||
"notifications_list": "Notifications list",
|
||||
"notifications_list_item": "Notification",
|
||||
"notifications_delete": "Delete notification",
|
||||
"notifications_copied_to_clipboard": "Copied to clipboard",
|
||||
"notifications_tags": "Tags",
|
||||
"notifications_priority_x": "Priority {{priority}}",
|
||||
"notifications_new_indicator": "New notification",
|
||||
"notifications_attachment_image": "Attachment image",
|
||||
"notifications_attachment_copy_url_title": "Copy attachment URL to clipboard",
|
||||
"notifications_attachment_copy_url_button": "Copy URL",
|
||||
"notifications_attachment_open_title": "Go to {{url}}",
|
||||
"notifications_attachment_open_button": "Open attachment",
|
||||
"notifications_attachment_link_expires": "link expires {{date}}",
|
||||
"notifications_attachment_link_expired": "download link expired",
|
||||
"notifications_attachment_file_image": "image file",
|
||||
"notifications_attachment_file_video": "video file",
|
||||
"notifications_attachment_file_audio": "audio file",
|
||||
"notifications_attachment_file_app": "Android app file",
|
||||
"notifications_attachment_file_document": "other document",
|
||||
"notifications_click_copy_url_title": "Copy link URL to clipboard",
|
||||
"notifications_click_copy_url_button": "Copy link",
|
||||
"notifications_click_open_button": "Open link",
|
||||
|
|
@ -47,6 +64,7 @@
|
|||
"publish_dialog_attachment_limits_file_and_quota_reached": "exceeds {{fileSizeLimit}} file limit and quota, {{remainingBytes}} remaining",
|
||||
"publish_dialog_attachment_limits_file_reached": "exceeds {{fileSizeLimit}} file limit",
|
||||
"publish_dialog_attachment_limits_quota_reached": "exceeds quota, {{remainingBytes}} remaining",
|
||||
"publish_dialog_emoji_picker_show": "Pick emoji",
|
||||
"publish_dialog_priority_min": "Min. priority",
|
||||
"publish_dialog_priority_low": "Low priority",
|
||||
"publish_dialog_priority_default": "Default priority",
|
||||
|
|
@ -89,6 +107,7 @@
|
|||
"publish_dialog_attached_file_filename_placeholder": "Attachment filename",
|
||||
"publish_dialog_drop_file_here": "Drop file here",
|
||||
"emoji_picker_search_placeholder": "Search emoji",
|
||||
"emoji_picker_search_clear": "Clear search",
|
||||
"subscribe_dialog_subscribe_title": "Subscribe to topic",
|
||||
"subscribe_dialog_subscribe_description": "Topics may not be password-protected, so choose a name that's not easy to guess. Once subscribed, you can PUT/POST notifications.",
|
||||
"subscribe_dialog_subscribe_topic_placeholder": "Topic name, e.g. phil_alerts",
|
||||
|
|
@ -108,6 +127,7 @@
|
|||
"prefs_notifications_sound_description_none": "Notifications do not play any sound when they arrive",
|
||||
"prefs_notifications_sound_description_some": "Notifications play the {{sound}} sound when they arrive",
|
||||
"prefs_notifications_sound_no_sound": "No sound",
|
||||
"prefs_notifications_sound_play": "Play selected sound",
|
||||
"prefs_notifications_min_priority_title": "Minimum priority",
|
||||
"prefs_notifications_min_priority_description_any": "Showing all notifications, regardless of priority",
|
||||
"prefs_notifications_min_priority_description_x_or_higher": "Show notifications if priority is {{number}} ({{name}}) or above",
|
||||
|
|
@ -130,7 +150,10 @@
|
|||
"prefs_notifications_delete_after_one_month_description": "Notifications are auto-deleted after one month",
|
||||
"prefs_users_title": "Manage users",
|
||||
"prefs_users_description": "Add/remove users for your protected topics here. Please note that username and password are stored in the browser's local storage.",
|
||||
"prefs_users_table": "Users table",
|
||||
"prefs_users_add_button": "Add user",
|
||||
"prefs_users_edit_button": "Edit user",
|
||||
"prefs_users_delete_button": "Delete user",
|
||||
"prefs_users_table_user_header": "User",
|
||||
"prefs_users_table_base_url_header": "Service URL",
|
||||
"prefs_users_dialog_title_add": "Add user",
|
||||
|
|
|
|||
|
|
@ -44,16 +44,22 @@ const ActionBar = (props) => {
|
|||
<IconButton
|
||||
color="inherit"
|
||||
edge="start"
|
||||
aria-label={t("action_bar_show_menu")}
|
||||
onClick={props.onMobileDrawerToggle}
|
||||
sx={{ mr: 2, display: { sm: 'none' } }}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Box component="img" src={logo} sx={{
|
||||
<Box
|
||||
component="img"
|
||||
src={logo}
|
||||
alt={t("action_bar_logo_alt")}
|
||||
sx={{
|
||||
display: { xs: 'none', sm: 'block' },
|
||||
marginRight: '10px',
|
||||
height: '28px'
|
||||
}}/>
|
||||
}}
|
||||
/>
|
||||
<Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
|
||||
{title}
|
||||
</Typography>
|
||||
|
|
@ -173,10 +179,10 @@ const SettingsIcons = (props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<IconButton color="inherit" size="large" edge="end" onClick={handleToggleMute} sx={{marginRight: 0}}>
|
||||
<IconButton color="inherit" size="large" edge="end" onClick={handleToggleMute} sx={{marginRight: 0}} aria-label={t("action_bar_toggle_mute")}>
|
||||
{subscription.mutedUntil ? <NotificationsOffIcon/> : <NotificationsIcon/>}
|
||||
</IconButton>
|
||||
<IconButton color="inherit" size="large" edge="end" ref={anchorRef} onClick={handleToggleOpen}>
|
||||
<IconButton color="inherit" size="large" edge="end" ref={anchorRef} onClick={handleToggleOpen} aria-label={t("action_bar_toggle_action_menu")}>
|
||||
<MoreVertIcon/>
|
||||
</IconButton>
|
||||
<Popper
|
||||
|
|
|
|||
|
|
@ -5,27 +5,36 @@ import fileImage from "../img/file-image.svg";
|
|||
import fileVideo from "../img/file-video.svg";
|
||||
import fileAudio from "../img/file-audio.svg";
|
||||
import fileApp from "../img/file-app.svg";
|
||||
import {useTranslation} from "react-i18next";
|
||||
|
||||
const AttachmentIcon = (props) => {
|
||||
const { t } = useTranslation();
|
||||
const type = props.type;
|
||||
let imageFile;
|
||||
let imageFile, imageLabel;
|
||||
if (!type) {
|
||||
imageFile = fileDocument;
|
||||
imageLabel = t("notifications_attachment_file_image");
|
||||
} else if (type.startsWith('image/')) {
|
||||
imageFile = fileImage;
|
||||
imageLabel = t("notifications_attachment_file_video");
|
||||
} else if (type.startsWith('video/')) {
|
||||
imageFile = fileVideo;
|
||||
imageLabel = t("notifications_attachment_file_video");
|
||||
} else if (type.startsWith('audio/')) {
|
||||
imageFile = fileAudio;
|
||||
imageLabel = t("notifications_attachment_file_audio");
|
||||
} else if (type === "application/vnd.android.package-archive") {
|
||||
imageFile = fileApp;
|
||||
imageLabel = t("notifications_attachment_file_app");
|
||||
} else {
|
||||
imageFile = fileDocument;
|
||||
imageLabel = t("notifications_attachment_file_document");
|
||||
}
|
||||
return (
|
||||
<Box
|
||||
component="img"
|
||||
src={imageFile}
|
||||
alt={imageLabel}
|
||||
loading="lazy"
|
||||
sx={{
|
||||
width: '28px',
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -75,13 +75,15 @@ const MessageBar = (props) => {
|
|||
backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]
|
||||
}}
|
||||
>
|
||||
<IconButton color="inherit" size="large" edge="start" onClick={props.onOpenDialogClick}>
|
||||
<IconButton color="inherit" size="large" edge="start" onClick={props.onOpenDialogClick} aria-label={t("message_bar_show_dialog")}>
|
||||
<KeyboardArrowUpIcon/>
|
||||
</IconButton>
|
||||
<TextField
|
||||
autoFocus
|
||||
margin="dense"
|
||||
placeholder={t("message_bar_type_message")}
|
||||
aria-label={t("message_bar_type_message")}
|
||||
role="textbox"
|
||||
type="text"
|
||||
fullWidth
|
||||
variant="standard"
|
||||
|
|
@ -94,7 +96,7 @@ const MessageBar = (props) => {
|
|||
}
|
||||
}}
|
||||
/>
|
||||
<IconButton color="inherit" size="large" edge="end" onClick={handleSendClick}>
|
||||
<IconButton color="inherit" size="large" edge="end" onClick={handleSendClick} aria-label={t("message_bar_publish")}>
|
||||
<SendIcon/>
|
||||
</IconButton>
|
||||
<Portal>
|
||||
|
|
|
|||
|
|
@ -31,10 +31,15 @@ const navWidth = 280;
|
|||
const Navigation = (props) => {
|
||||
const navigationList = <NavList {...props}/>;
|
||||
return (
|
||||
<Box component="nav" sx={{width: {sm: Navigation.width}, flexShrink: {sm: 0}}}>
|
||||
<Box
|
||||
component="nav"
|
||||
role="navigation"
|
||||
sx={{width: {sm: Navigation.width}, flexShrink: {sm: 0}}}
|
||||
>
|
||||
{/* Mobile drawer; only shown if menu icon clicked (mobile open) and display is small */}
|
||||
<Drawer
|
||||
variant="temporary"
|
||||
role="menubar"
|
||||
open={props.mobileDrawerOpen}
|
||||
onClose={props.onMobileDrawerToggle}
|
||||
ModalProps={{ keepMounted: true }} // Better open performance on mobile.
|
||||
|
|
@ -49,6 +54,7 @@ const Navigation = (props) => {
|
|||
<Drawer
|
||||
open
|
||||
variant="permanent"
|
||||
role="menubar"
|
||||
sx={{
|
||||
display: { xs: 'none', sm: 'block' },
|
||||
'& .MuiDrawer-paper': { boxSizing: 'border-box', width: navWidth },
|
||||
|
|
|
|||
|
|
@ -98,6 +98,8 @@ const NotificationList = (props) => {
|
|||
>
|
||||
<Container
|
||||
maxWidth="md"
|
||||
role="list"
|
||||
aria-label={t("notifications_list")}
|
||||
sx={{
|
||||
marginTop: 3,
|
||||
marginBottom: (props.messageBar) ? "100px" : 3 // Hack to avoid hiding notifications behind the message bar
|
||||
|
|
@ -143,9 +145,9 @@ const NotificationItem = (props) => {
|
|||
const hasUserActions = notification.actions && notification.actions.length > 0;
|
||||
const showActions = hasAttachmentActions || hasClickAction || hasUserActions;
|
||||
return (
|
||||
<Card sx={{ minWidth: 275, padding: 1 }}>
|
||||
<Card sx={{ minWidth: 275, padding: 1 }} role="listitem" aria-label={t("notifications_list_item")}>
|
||||
<CardContent>
|
||||
<IconButton onClick={handleDelete} sx={{ float: 'right', marginRight: -1, marginTop: -1 }}>
|
||||
<IconButton onClick={handleDelete} sx={{ float: 'right', marginRight: -1, marginTop: -1 }} aria-label={t("notifications_delete")}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<Typography sx={{ fontSize: 14 }} color="text.secondary">
|
||||
|
|
@ -153,15 +155,15 @@ const NotificationItem = (props) => {
|
|||
{[1,2,4,5].includes(notification.priority) &&
|
||||
<img
|
||||
src={priorityFiles[notification.priority]}
|
||||
alt={`Priority ${notification.priority}`}
|
||||
alt={t("notifications_priority_x", { priority: notification.priority})}
|
||||
style={{ verticalAlign: 'bottom' }}
|
||||
/>}
|
||||
{notification.new === 1 &&
|
||||
<svg style={{ width: '8px', height: '8px', marginLeft: '4px' }} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg style={{ width: '8px', height: '8px', marginLeft: '4px' }} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-label={t("notifications_new_indicator")}>
|
||||
<circle cx="50" cy="50" r="50" fill="#338574"/>
|
||||
</svg>}
|
||||
</Typography>
|
||||
{notification.title && <Typography variant="h5" component="div">{formatTitle(notification)}</Typography>}
|
||||
{notification.title && <Typography variant="h5" component="div" role="rowheader">{formatTitle(notification)}</Typography>}
|
||||
<Typography variant="body1" sx={{ whiteSpace: 'pre-line' }}>
|
||||
{autolink(maybeAppendActionErrors(formatMessage(notification), notification))}
|
||||
</Typography>
|
||||
|
|
@ -289,6 +291,7 @@ const Attachment = (props) => {
|
|||
};
|
||||
|
||||
const Image = (props) => {
|
||||
const { t } = useTranslation();
|
||||
const [open, setOpen] = useState(false);
|
||||
return (
|
||||
<>
|
||||
|
|
@ -296,6 +299,7 @@ const Image = (props) => {
|
|||
component="img"
|
||||
src={props.attachment.url}
|
||||
loading="lazy"
|
||||
alt={t("notifications_attachment_image")}
|
||||
onClick={() => setOpen(true)}
|
||||
sx={{
|
||||
marginTop: 2,
|
||||
|
|
@ -316,6 +320,7 @@ const Image = (props) => {
|
|||
<Box
|
||||
component="img"
|
||||
src={props.attachment.url}
|
||||
alt={t("notifications_attachment_image")}
|
||||
loading="lazy"
|
||||
sx={{
|
||||
maxWidth: 1,
|
||||
|
|
@ -347,13 +352,16 @@ const UserAction = (props) => {
|
|||
if (action.action === "broadcast") {
|
||||
return (
|
||||
<Tooltip title={t("notifications_actions_not_supported")}>
|
||||
<span><Button disabled>{action.label}</Button></span>
|
||||
<span><Button disabled aria-label={t("notifications_actions_not_supported")}>{action.label}</Button></span>
|
||||
</Tooltip>
|
||||
);
|
||||
} else if (action.action === "view") {
|
||||
return (
|
||||
<Tooltip title={t("notifications_actions_open_url_title", { url: action.url })}>
|
||||
<Button onClick={() => openUrl(action.url)}>{action.label}</Button>
|
||||
<Button
|
||||
onClick={() => openUrl(action.url)}
|
||||
aria-label={t("notifications_actions_open_url_title", { url: action.url })}
|
||||
>{action.label}</Button>
|
||||
</Tooltip>
|
||||
);
|
||||
} else if (action.action === "http") {
|
||||
|
|
@ -361,7 +369,10 @@ const UserAction = (props) => {
|
|||
const label = action.label + (ACTION_LABEL_SUFFIX[action.progress ?? 0] ?? "");
|
||||
return (
|
||||
<Tooltip title={t("notifications_actions_http_request_title", { method: method, url: action.url })}>
|
||||
<Button onClick={() => performHttpAction(notification, action)}>{label}</Button>
|
||||
<Button
|
||||
onClick={() => performHttpAction(notification, action)}
|
||||
aria-label={t("notifications_actions_http_request_title", { method: method, url: action.url })}
|
||||
>{label}</Button>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
|
@ -416,7 +427,7 @@ const NoNotifications = (props) => {
|
|||
return (
|
||||
<VerticallyCenteredContainer maxWidth="xs">
|
||||
<Typography variant="h5" align="center" sx={{ paddingBottom: 1 }}>
|
||||
<img src={logoOutline} height="64" width="64"/><br />
|
||||
<img src={logoOutline} height="64" width="64" alt={t("action_bar_logo_alt")}/><br />
|
||||
{t("notifications_none_for_topic_title")}
|
||||
</Typography>
|
||||
<Paragraph>
|
||||
|
|
@ -442,7 +453,7 @@ const NoNotificationsWithoutSubscription = (props) => {
|
|||
return (
|
||||
<VerticallyCenteredContainer maxWidth="xs">
|
||||
<Typography variant="h5" align="center" sx={{ paddingBottom: 1 }}>
|
||||
<img src={logoOutline} height="64" width="64"/><br />
|
||||
<img src={logoOutline} height="64" width="64" alt={t("action_bar_logo_alt")}/><br />
|
||||
{t("notifications_none_for_any_title")}
|
||||
</Typography>
|
||||
<Paragraph>
|
||||
|
|
@ -466,7 +477,7 @@ const NoSubscriptions = () => {
|
|||
return (
|
||||
<VerticallyCenteredContainer maxWidth="xs">
|
||||
<Typography variant="h5" align="center" sx={{ paddingBottom: 1 }}>
|
||||
<img src={logoOutline} height="64" width="64"/><br />
|
||||
<img src={logoOutline} height="64" width="64" alt={t("action_bar_logo_alt")}/><br />
|
||||
{t("notifications_no_subscriptions_title")}
|
||||
</Typography>
|
||||
<Paragraph>
|
||||
|
|
|
|||
|
|
@ -34,11 +34,6 @@ import DialogActions from "@mui/material/DialogActions";
|
|||
import userManager from "../app/UserManager";
|
||||
import {playSound, shuffle, sounds, validUrl} from "../app/utils";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import priority1 from "../img/priority-1.svg";
|
||||
import priority2 from "../img/priority-2.svg";
|
||||
import priority3 from "../img/priority-3.svg";
|
||||
import priority4 from "../img/priority-4.svg";
|
||||
import priority5 from "../img/priority-5.svg";
|
||||
|
||||
const Preferences = () => {
|
||||
return (
|
||||
|
|
@ -55,7 +50,7 @@ const Preferences = () => {
|
|||
const Notifications = () => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Card sx={{p: 3}}>
|
||||
<Card sx={{p: 3}} aria-label={t("prefs_notifications_title")}>
|
||||
<Typography variant="h5" sx={{marginBottom: 2}}>
|
||||
{t("prefs_notifications_title")}
|
||||
</Typography>
|
||||
|
|
@ -70,6 +65,7 @@ const Notifications = () => {
|
|||
|
||||
const Sound = () => {
|
||||
const { t } = useTranslation();
|
||||
const labelId = "prefSound";
|
||||
const sound = useLiveQuery(async () => prefs.sound());
|
||||
const handleChange = async (ev) => {
|
||||
await prefs.setSound(ev.target.value);
|
||||
|
|
@ -84,15 +80,15 @@ const Sound = () => {
|
|||
description = t("prefs_notifications_sound_description_some", { sound: sounds[sound].label });
|
||||
}
|
||||
return (
|
||||
<Pref title={t("prefs_notifications_sound_title")} description={description}>
|
||||
<Pref labelId={labelId} title={t("prefs_notifications_sound_title")} description={description}>
|
||||
<div style={{ display: 'flex', width: '100%' }}>
|
||||
<FormControl fullWidth variant="standard" sx={{ margin: 1 }}>
|
||||
<Select value={sound} onChange={handleChange}>
|
||||
<Select value={sound} onChange={handleChange} aria-labelledby={labelId}>
|
||||
<MenuItem value={"none"}>{t("prefs_notifications_sound_no_sound")}</MenuItem>
|
||||
{Object.entries(sounds).map(s => <MenuItem key={s[0]} value={s[0]}>{s[1].label}</MenuItem>)}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<IconButton onClick={() => playSound(sound)} disabled={sound === "none"}>
|
||||
<IconButton onClick={() => playSound(sound)} disabled={sound === "none"} aria-label={t("prefs_notifications_sound_play")}>
|
||||
<PlayArrowIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
|
|
@ -102,6 +98,7 @@ const Sound = () => {
|
|||
|
||||
const MinPriority = () => {
|
||||
const { t } = useTranslation();
|
||||
const labelId = "prefMinPriority";
|
||||
const minPriority = useLiveQuery(async () => prefs.minPriority());
|
||||
const handleChange = async (ev) => {
|
||||
await prefs.setMinPriority(ev.target.value);
|
||||
|
|
@ -128,9 +125,9 @@ const MinPriority = () => {
|
|||
});
|
||||
}
|
||||
return (
|
||||
<Pref title={t("prefs_notifications_min_priority_title")} description={description}>
|
||||
<Pref labelId={labelId} title={t("prefs_notifications_min_priority_title")} description={description}>
|
||||
<FormControl fullWidth variant="standard" sx={{ m: 1 }}>
|
||||
<Select value={minPriority} onChange={handleChange}>
|
||||
<Select value={minPriority} onChange={handleChange} aria-labelledby={labelId}>
|
||||
<MenuItem value={1}>{t("prefs_notifications_min_priority_any")}</MenuItem>
|
||||
<MenuItem value={2}>{t("prefs_notifications_min_priority_low_and_higher")}</MenuItem>
|
||||
<MenuItem value={3}>{t("prefs_notifications_min_priority_default_and_higher")}</MenuItem>
|
||||
|
|
@ -144,6 +141,7 @@ const MinPriority = () => {
|
|||
|
||||
const DeleteAfter = () => {
|
||||
const { t } = useTranslation();
|
||||
const labelId = "prefDeleteAfter";
|
||||
const deleteAfter = useLiveQuery(async () => prefs.deleteAfter());
|
||||
const handleChange = async (ev) => {
|
||||
await prefs.setDeleteAfter(ev.target.value);
|
||||
|
|
@ -161,9 +159,9 @@ const DeleteAfter = () => {
|
|||
}
|
||||
})();
|
||||
return (
|
||||
<Pref title={t("prefs_notifications_delete_after_title")} description={description}>
|
||||
<Pref labelId={labelId} title={t("prefs_notifications_delete_after_title")} description={description}>
|
||||
<FormControl fullWidth variant="standard" sx={{ m: 1 }}>
|
||||
<Select value={deleteAfter} onChange={handleChange}>
|
||||
<Select value={deleteAfter} onChange={handleChange} aria-labelledby={labelId}>
|
||||
<MenuItem value={0}>{t("prefs_notifications_delete_after_never")}</MenuItem>
|
||||
<MenuItem value={10800}>{t("prefs_notifications_delete_after_three_hours")}</MenuItem>
|
||||
<MenuItem value={86400}>{t("prefs_notifications_delete_after_one_day")}</MenuItem>
|
||||
|
|
@ -177,7 +175,7 @@ const DeleteAfter = () => {
|
|||
|
||||
const PrefGroup = (props) => {
|
||||
return (
|
||||
<div>
|
||||
<div role="table">
|
||||
{props.children}
|
||||
</div>
|
||||
)
|
||||
|
|
@ -185,28 +183,39 @@ const PrefGroup = (props) => {
|
|||
|
||||
const Pref = (props) => {
|
||||
return (
|
||||
<div style={{
|
||||
<div
|
||||
role="row"
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
marginTop: "10px",
|
||||
marginBottom: "20px",
|
||||
}}>
|
||||
<div style={{
|
||||
}}
|
||||
>
|
||||
<div
|
||||
role="cell"
|
||||
id={props.labelId}
|
||||
aria-label={props.title}
|
||||
style={{
|
||||
flex: '1 0 40%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
paddingRight: '30px'
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<div><b>{props.title}</b></div>
|
||||
{props.description && <div><em>{props.description}</em></div>}
|
||||
</div>
|
||||
<div style={{
|
||||
<div
|
||||
role="cell"
|
||||
style={{
|
||||
flex: '1 0 calc(60% - 50px)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -235,7 +244,7 @@ const Users = () => {
|
|||
}
|
||||
};
|
||||
return (
|
||||
<Card sx={{ padding: 1 }}>
|
||||
<Card sx={{ padding: 1 }} aria-label={t("prefs_users_title")}>
|
||||
<CardContent sx={{ paddingBottom: 1 }}>
|
||||
<Typography variant="h5" sx={{marginBottom: 2}}>
|
||||
{t("prefs_users_title")}
|
||||
|
|
@ -291,7 +300,7 @@ const UserTable = (props) => {
|
|||
}
|
||||
};
|
||||
return (
|
||||
<Table size="small">
|
||||
<Table size="small" aria-label={t("prefs_users_table")}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell sx={{paddingLeft: 0}}>{t("prefs_users_table_user_header")}</TableCell>
|
||||
|
|
@ -305,13 +314,13 @@ const UserTable = (props) => {
|
|||
key={user.baseUrl}
|
||||
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
||||
>
|
||||
<TableCell component="th" scope="row" sx={{paddingLeft: 0}}>{user.username}</TableCell>
|
||||
<TableCell>{user.baseUrl}</TableCell>
|
||||
<TableCell component="th" scope="row" sx={{paddingLeft: 0}} aria-label={t("prefs_users_table_user_header")}>{user.username}</TableCell>
|
||||
<TableCell aria-label={t("prefs_users_table_base_url_header")}>{user.baseUrl}</TableCell>
|
||||
<TableCell align="right">
|
||||
<IconButton onClick={() => handleEditClick(user)}>
|
||||
<IconButton onClick={() => handleEditClick(user)} aria-label={t("prefs_users_edit_button")}>
|
||||
<EditIcon/>
|
||||
</IconButton>
|
||||
<IconButton onClick={() => handleDeleteClick(user)}>
|
||||
<IconButton onClick={() => handleDeleteClick(user)} aria-label={t("prefs_users_delete_button")}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
|
|
@ -371,6 +380,7 @@ const UserDialog = (props) => {
|
|||
margin="dense"
|
||||
id="baseUrl"
|
||||
label={t("prefs_users_dialog_base_url_label")}
|
||||
aria-label={t("prefs_users_dialog_base_url_label")}
|
||||
value={baseUrl}
|
||||
onChange={ev => setBaseUrl(ev.target.value)}
|
||||
type="url"
|
||||
|
|
@ -382,6 +392,7 @@ const UserDialog = (props) => {
|
|||
margin="dense"
|
||||
id="username"
|
||||
label={t("prefs_users_dialog_username_label")}
|
||||
aria-label={t("prefs_users_dialog_username_label")}
|
||||
value={username}
|
||||
onChange={ev => setUsername(ev.target.value)}
|
||||
type="text"
|
||||
|
|
@ -392,6 +403,7 @@ const UserDialog = (props) => {
|
|||
margin="dense"
|
||||
id="password"
|
||||
label={t("prefs_users_dialog_password_label")}
|
||||
aria-label={t("prefs_users_dialog_password_label")}
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={ev => setPassword(ev.target.value)}
|
||||
|
|
@ -410,7 +422,7 @@ const UserDialog = (props) => {
|
|||
const Appearance = () => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Card sx={{p: 3}}>
|
||||
<Card sx={{p: 3}} aria-label={t("prefs_appearance_title")}>
|
||||
<Typography variant="h5" sx={{marginBottom: 2}}>
|
||||
{t("prefs_appearance_title")}
|
||||
</Typography>
|
||||
|
|
@ -423,6 +435,7 @@ const Appearance = () => {
|
|||
|
||||
const Language = () => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const labelId = "prefLanguage";
|
||||
const randomFlags = shuffle(["🇬🇧", "🇺🇸", "🇪🇸", "🇫🇷", "🇧🇬", "🇨🇿", "🇩🇪", "🇮🇩", "🇯🇵", "🇷🇺", "🇹🇷"]).slice(0, 3);
|
||||
const title = t("prefs_appearance_language_title") + " " + randomFlags.join(" ");
|
||||
const lang = i18n.language ?? "en";
|
||||
|
|
@ -432,9 +445,9 @@ const Language = () => {
|
|||
// Better: Sidebar in Wikipedia: https://en.wikipedia.org/wiki/Bokm%C3%A5l
|
||||
|
||||
return (
|
||||
<Pref title={title}>
|
||||
<Pref labelId={labelId} title={title}>
|
||||
<FormControl fullWidth variant="standard" sx={{ m: 1 }}>
|
||||
<Select value={lang} onChange={(ev) => i18n.changeLanguage(ev.target.value)}>
|
||||
<Select value={lang} onChange={(ev) => i18n.changeLanguage(ev.target.value)} aria-labelledby={labelId}>
|
||||
<MenuItem value="en">English</MenuItem>
|
||||
<MenuItem value="bg">Български</MenuItem>
|
||||
<MenuItem value="cs">Čeština</MenuItem>
|
||||
|
|
|
|||
|
|
@ -240,6 +240,7 @@ const PublishDialog = (props) => {
|
|||
<TextField
|
||||
margin="dense"
|
||||
label={t("publish_dialog_base_url_label")}
|
||||
aria-label={t("publish_dialog_base_url_label")}
|
||||
placeholder={t("publish_dialog_base_url_placeholder")}
|
||||
value={baseUrl}
|
||||
onChange={ev => setBaseUrl(ev.target.value)}
|
||||
|
|
@ -251,6 +252,7 @@ const PublishDialog = (props) => {
|
|||
<TextField
|
||||
margin="dense"
|
||||
label={t("publish_dialog_topic_label")}
|
||||
aria-label={t("publish_dialog_topic_label")}
|
||||
placeholder={t("publish_dialog_topic_placeholder")}
|
||||
value={topic}
|
||||
onChange={ev => setTopic(ev.target.value)}
|
||||
|
|
@ -265,6 +267,7 @@ const PublishDialog = (props) => {
|
|||
<TextField
|
||||
margin="dense"
|
||||
label={t("publish_dialog_title_label")}
|
||||
aria-label={t("publish_dialog_title_label")}
|
||||
placeholder={t("publish_dialog_title_placeholder")}
|
||||
value={title}
|
||||
onChange={ev => setTitle(ev.target.value)}
|
||||
|
|
@ -276,6 +279,7 @@ const PublishDialog = (props) => {
|
|||
<TextField
|
||||
margin="dense"
|
||||
label={t("publish_dialog_message_label")}
|
||||
aria-label={t("publish_dialog_message_label")}
|
||||
placeholder={t("publish_dialog_message_placeholder")}
|
||||
value={message}
|
||||
onChange={ev => setMessage(ev.target.value)}
|
||||
|
|
@ -293,12 +297,13 @@ const PublishDialog = (props) => {
|
|||
onEmojiPick={handleEmojiPick}
|
||||
onClose={handleEmojiClose}
|
||||
/>
|
||||
<DialogIconButton disabled={disabled} onClick={handleEmojiClick}>
|
||||
<DialogIconButton disabled={disabled} onClick={handleEmojiClick} aria-label={t("publish_dialog_emoji_picker_show")}>
|
||||
<InsertEmoticonIcon/>
|
||||
</DialogIconButton>
|
||||
<TextField
|
||||
margin="dense"
|
||||
label={t("publish_dialog_tags_label")}
|
||||
aria-label={t("publish_dialog_tags_label")}
|
||||
placeholder={t("publish_dialog_tags_placeholder")}
|
||||
value={tags}
|
||||
onChange={ev => setTags(ev.target.value)}
|
||||
|
|
@ -315,15 +320,16 @@ const PublishDialog = (props) => {
|
|||
<InputLabel/>
|
||||
<Select
|
||||
label={t("publish_dialog_priority_label")}
|
||||
aria-label={t("publish_dialog_priority_label")}
|
||||
margin="dense"
|
||||
value={priority}
|
||||
onChange={(ev) => setPriority(ev.target.value)}
|
||||
disabled={disabled}
|
||||
>
|
||||
{[5,4,3,2,1].map(priority =>
|
||||
<MenuItem key={`priorityMenuItem${priority}`} value={priority}>
|
||||
<MenuItem key={`priorityMenuItem${priority}`} value={priority} aria-label={t("notifications_priority_x", { priority: priority })}>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<img src={priorities[priority].file} style={{marginRight: "8px"}}/>
|
||||
<img src={priorities[priority].file} style={{marginRight: "8px"}} alt={t("notifications_priority_x", { priority: priority })}/>
|
||||
<div>{priorities[priority].label}</div>
|
||||
</div>
|
||||
</MenuItem>
|
||||
|
|
@ -339,6 +345,7 @@ const PublishDialog = (props) => {
|
|||
<TextField
|
||||
margin="dense"
|
||||
label={t("publish_dialog_click_label")}
|
||||
aria-label={t("publish_dialog_click_label")}
|
||||
placeholder={t("publish_dialog_click_placeholder")}
|
||||
value={clickUrl}
|
||||
onChange={ev => setClickUrl(ev.target.value)}
|
||||
|
|
@ -357,6 +364,7 @@ const PublishDialog = (props) => {
|
|||
<TextField
|
||||
margin="dense"
|
||||
label={t("publish_dialog_email_label")}
|
||||
aria-label={t("publish_dialog_email_label")}
|
||||
placeholder={t("publish_dialog_email_placeholder")}
|
||||
value={email}
|
||||
onChange={ev => setEmail(ev.target.value)}
|
||||
|
|
@ -377,6 +385,7 @@ const PublishDialog = (props) => {
|
|||
<TextField
|
||||
margin="dense"
|
||||
label={t("publish_dialog_attach_label")}
|
||||
aria-label={t("publish_dialog_attach_label")}
|
||||
placeholder={t("publish_dialog_attach_placeholder")}
|
||||
value={attachUrl}
|
||||
onChange={ev => {
|
||||
|
|
@ -402,6 +411,7 @@ const PublishDialog = (props) => {
|
|||
<TextField
|
||||
margin="dense"
|
||||
label={t("publish_dialog_filename_label")}
|
||||
aria-label={t("publish_dialog_filename_label")}
|
||||
placeholder={t("publish_dialog_filename_placeholder")}
|
||||
value={filename}
|
||||
onChange={ev => {
|
||||
|
|
@ -441,6 +451,7 @@ const PublishDialog = (props) => {
|
|||
<TextField
|
||||
margin="dense"
|
||||
label={t("publish_dialog_delay_label")}
|
||||
aria-label={t("publish_dialog_delay_label")}
|
||||
placeholder={t("publish_dialog_delay_placeholder", {
|
||||
unixTimestamp: "1649029748",
|
||||
relativeTime: "30m",
|
||||
|
|
@ -459,12 +470,12 @@ const PublishDialog = (props) => {
|
|||
{t("publish_dialog_other_features")}
|
||||
</Typography>
|
||||
<div>
|
||||
{!showClickUrl && <Chip clickable disabled={disabled} label={t("publish_dialog_chip_click_label")} onClick={() => setShowClickUrl(true)} sx={{marginRight: 1, marginBottom: 1}}/>}
|
||||
{!showEmail && <Chip clickable disabled={disabled} label={t("publish_dialog_chip_email_label")} onClick={() => setShowEmail(true)} sx={{marginRight: 1, marginBottom: 1}}/>}
|
||||
{!showAttachUrl && !showAttachFile && <Chip clickable disabled={disabled} label={t("publish_dialog_chip_attach_url_label")} onClick={() => setShowAttachUrl(true)} sx={{marginRight: 1, marginBottom: 1}}/>}
|
||||
{!showAttachFile && !showAttachUrl && <Chip clickable disabled={disabled} label={t("publish_dialog_chip_attach_file_label")} onClick={() => handleAttachFileClick()} sx={{marginRight: 1, marginBottom: 1}}/>}
|
||||
{!showDelay && <Chip clickable disabled={disabled} label={t("publish_dialog_chip_delay_label")} onClick={() => setShowDelay(true)} sx={{marginRight: 1, marginBottom: 1}}/>}
|
||||
{!showTopicUrl && <Chip clickable disabled={disabled} label={t("publish_dialog_chip_topic_label")} onClick={() => setShowTopicUrl(true)} sx={{marginRight: 1, marginBottom: 1}}/>}
|
||||
{!showClickUrl && <Chip clickable disabled={disabled} label={t("publish_dialog_chip_click_label")} aria-label={t("publish_dialog_chip_click_label")} onClick={() => setShowClickUrl(true)} sx={{marginRight: 1, marginBottom: 1}}/>}
|
||||
{!showEmail && <Chip clickable disabled={disabled} label={t("publish_dialog_chip_email_label")} aria-label={t("publish_dialog_chip_email_label")} onClick={() => setShowEmail(true)} sx={{marginRight: 1, marginBottom: 1}}/>}
|
||||
{!showAttachUrl && !showAttachFile && <Chip clickable disabled={disabled} label={t("publish_dialog_chip_attach_url_label")} aria-label={t("publish_dialog_chip_attach_url_label")} onClick={() => setShowAttachUrl(true)} sx={{marginRight: 1, marginBottom: 1}}/>}
|
||||
{!showAttachFile && !showAttachUrl && <Chip clickable disabled={disabled} label={t("publish_dialog_chip_attach_file_label")} aria-label={t("publish_dialog_chip_attach_file_label")} onClick={() => handleAttachFileClick()} sx={{marginRight: 1, marginBottom: 1}}/>}
|
||||
{!showDelay && <Chip clickable disabled={disabled} label={t("publish_dialog_chip_delay_label")} aria-label={t("publish_dialog_chip_delay_label")} onClick={() => setShowDelay(true)} sx={{marginRight: 1, marginBottom: 1}}/>}
|
||||
{!showTopicUrl && <Chip clickable disabled={disabled} label={t("publish_dialog_chip_topic_label")} aria-label={t("publish_dialog_chip_topic_label")} onClick={() => setShowTopicUrl(true)} sx={{marginRight: 1, marginBottom: 1}}/>}
|
||||
</div>
|
||||
<Typography variant="body1" sx={{marginTop: 1, marginBottom: 1}}>
|
||||
<Trans
|
||||
|
|
@ -483,7 +494,13 @@ const PublishDialog = (props) => {
|
|||
label={t("publish_dialog_checkbox_publish_another")}
|
||||
sx={{marginRight: 2}}
|
||||
control={
|
||||
<Checkbox size="small" checked={publishAnother} onChange={(ev) => setPublishAnother(ev.target.checked)} />
|
||||
<Checkbox
|
||||
size="small"
|
||||
checked={publishAnother}
|
||||
onChange={(ev) => setPublishAnother(ev.target.checked)}
|
||||
inputProps={{
|
||||
"aria-label": t("publish_dialog_checkbox_publish_another")
|
||||
}} />
|
||||
} />
|
||||
<Button onClick={props.onClose}>{t("publish_dialog_button_cancel")}</Button>
|
||||
<Button onClick={handleSubmit} disabled={!sendButtonEnabled}>{t("publish_dialog_button_send")}</Button>
|
||||
|
|
@ -497,7 +514,7 @@ const PublishDialog = (props) => {
|
|||
|
||||
const Row = (props) => {
|
||||
return (
|
||||
<div style={{display: 'flex'}}>
|
||||
<div style={{display: 'flex'}} role="row">
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue