From bb5e0e3fedb8d604b0836ffc1a2247054f2aaa10 Mon Sep 17 00:00:00 2001 From: Philipp Heckel Date: Mon, 2 May 2022 19:30:29 -0400 Subject: [PATCH] WIP: Accessibility of web app --- web/public/static/langs/en.json | 23 +++++++ web/src/components/ActionBar.js | 20 ++++-- web/src/components/AttachmentIcon.js | 11 +++- web/src/components/EmojiPicker.js | 10 ++- web/src/components/Messaging.js | 6 +- web/src/components/Navigation.js | 8 ++- web/src/components/Notifications.js | 33 ++++++---- web/src/components/Preferences.js | 97 ++++++++++++++++------------ web/src/components/PublishDialog.js | 39 +++++++---- 9 files changed, 170 insertions(+), 77 deletions(-) diff --git a/web/public/static/langs/en.json b/web/public/static/langs/en.json index ad05f57b..c97859cc 100644 --- a/web/public/static/langs/en.json +++ b/web/public/static/langs/en.json @@ -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", diff --git a/web/src/components/ActionBar.js b/web/src/components/ActionBar.js index 95e14440..30ab271e 100644 --- a/web/src/components/ActionBar.js +++ b/web/src/components/ActionBar.js @@ -44,16 +44,22 @@ const ActionBar = (props) => { - + {title} @@ -173,10 +179,10 @@ const SettingsIcons = (props) => { return ( <> - + {subscription.mutedUntil ? : } - + { + 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 ( { 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: - + + + }} /> @@ -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 ( {props.emoji.emoji} diff --git a/web/src/components/Messaging.js b/web/src/components/Messaging.js index b4418459..4ba1203f 100644 --- a/web/src/components/Messaging.js +++ b/web/src/components/Messaging.js @@ -75,13 +75,15 @@ const MessageBar = (props) => { backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900] }} > - + { } }} /> - + diff --git a/web/src/components/Navigation.js b/web/src/components/Navigation.js index 513930b7..b5a9fb19 100644 --- a/web/src/components/Navigation.js +++ b/web/src/components/Navigation.js @@ -31,10 +31,15 @@ const navWidth = 280; const Navigation = (props) => { const navigationList = ; return ( - + {/* Mobile drawer; only shown if menu icon clicked (mobile open) and display is small */} { { > { const hasUserActions = notification.actions && notification.actions.length > 0; const showActions = hasAttachmentActions || hasClickAction || hasUserActions; return ( - + - + @@ -153,15 +155,15 @@ const NotificationItem = (props) => { {[1,2,4,5].includes(notification.priority) && {`Priority} {notification.new === 1 && - + } - {notification.title && {formatTitle(notification)}} + {notification.title && {formatTitle(notification)}} {autolink(maybeAppendActionErrors(formatMessage(notification), notification))} @@ -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) => { { if (action.action === "broadcast") { return ( - + ); } else if (action.action === "view") { return ( - + ); } else if (action.action === "http") { @@ -361,7 +369,10 @@ const UserAction = (props) => { const label = action.label + (ACTION_LABEL_SUFFIX[action.progress ?? 0] ?? ""); return ( - + ); } @@ -416,7 +427,7 @@ const NoNotifications = (props) => { return ( -
+ {t("action_bar_logo_alt")}/
{t("notifications_none_for_topic_title")} @@ -442,7 +453,7 @@ const NoNotificationsWithoutSubscription = (props) => { return ( -
+ {t("action_bar_logo_alt")}/
{t("notifications_none_for_any_title")} @@ -466,7 +477,7 @@ const NoSubscriptions = () => { return ( -
+ {t("action_bar_logo_alt")}/
{t("notifications_no_subscriptions_title")} diff --git a/web/src/components/Preferences.js b/web/src/components/Preferences.js index 117f11d1..7d320e39 100644 --- a/web/src/components/Preferences.js +++ b/web/src/components/Preferences.js @@ -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 ( - + {t("prefs_notifications_title")} @@ -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 ( - +
- {t("prefs_notifications_sound_no_sound")} {Object.entries(sounds).map(s => {s[1].label})} - playSound(sound)} disabled={sound === "none"}> + playSound(sound)} disabled={sound === "none"} aria-label={t("prefs_notifications_sound_play")}>
@@ -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 ( - + - {t("prefs_notifications_min_priority_any")} {t("prefs_notifications_min_priority_low_and_higher")} {t("prefs_notifications_min_priority_default_and_higher")} @@ -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 ( - + - {t("prefs_notifications_delete_after_never")} {t("prefs_notifications_delete_after_three_hours")} {t("prefs_notifications_delete_after_one_day")} @@ -177,7 +175,7 @@ const DeleteAfter = () => { const PrefGroup = (props) => { return ( -
+
{props.children}
) @@ -185,28 +183,39 @@ const PrefGroup = (props) => { const Pref = (props) => { return ( -
-
+
+
{props.title}
{props.description &&
{props.description}
}
-
+
{props.children}
@@ -235,7 +244,7 @@ const Users = () => { } }; return ( - + {t("prefs_users_title")} @@ -291,7 +300,7 @@ const UserTable = (props) => { } }; return ( - +
{t("prefs_users_table_user_header")} @@ -305,13 +314,13 @@ const UserTable = (props) => { key={user.baseUrl} sx={{ '&:last-child td, &:last-child th': { border: 0 } }} > - {user.username} - {user.baseUrl} + {user.username} + {user.baseUrl} - handleEditClick(user)}> + handleEditClick(user)} aria-label={t("prefs_users_edit_button")}> - handleDeleteClick(user)}> + handleDeleteClick(user)} aria-label={t("prefs_users_delete_button")}> @@ -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 ( - + {t("prefs_appearance_title")} @@ -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 ( - + - i18n.changeLanguage(ev.target.value)} aria-labelledby={labelId}> English ะ‘ัŠะปะณะฐั€ัะบะธ ฤŒeลกtina diff --git a/web/src/components/PublishDialog.js b/web/src/components/PublishDialog.js index 00ba3d14..d78e67b8 100644 --- a/web/src/components/PublishDialog.js +++ b/web/src/components/PublishDialog.js @@ -240,6 +240,7 @@ const PublishDialog = (props) => { setBaseUrl(ev.target.value)} @@ -251,6 +252,7 @@ const PublishDialog = (props) => { setTopic(ev.target.value)} @@ -265,6 +267,7 @@ const PublishDialog = (props) => { setTitle(ev.target.value)} @@ -276,6 +279,7 @@ const PublishDialog = (props) => { setMessage(ev.target.value)} @@ -293,12 +297,13 @@ const PublishDialog = (props) => { onEmojiPick={handleEmojiPick} onClose={handleEmojiClose} /> - + setTags(ev.target.value)} @@ -315,15 +320,16 @@ const PublishDialog = (props) => {