diff --git a/web/public/static/langs/en.json b/web/public/static/langs/en.json index d85695a2..ee6197c5 100644 --- a/web/public/static/langs/en.json +++ b/web/public/static/langs/en.json @@ -5,8 +5,8 @@ "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", + "action_bar_toggle_mute": "Mute/unmute notifications", + "action_bar_toggle_action_menu": "Open/close action menu", "message_bar_type_message": "Type a message here", "message_bar_error_publishing": "Error publishing notification", "message_bar_show_dialog": "Show publish dialog", @@ -17,6 +17,8 @@ "nav_button_documentation": "Documentation", "nav_button_publish_message": "Publish notification", "nav_button_subscribe": "Subscribe to topic", + "nav_button_muted": "Notifications muted", + "nav_button_connecting": "connecting", "alert_grant_title": "Notifications are disabled", "alert_grant_description": "Grant your browser permission to display desktop notifications.", "alert_grant_button": "Grant now", diff --git a/web/src/components/DialogFooter.js b/web/src/components/DialogFooter.js index 3f00f87d..68d17c73 100644 --- a/web/src/components/DialogFooter.js +++ b/web/src/components/DialogFooter.js @@ -12,11 +12,15 @@ const DialogFooter = (props) => { paddingLeft: '24px', paddingBottom: '8px', }}> - + {props.status} diff --git a/web/src/components/Navigation.js b/web/src/components/Navigation.js index b5a9fb19..cafad049 100644 --- a/web/src/components/Navigation.js +++ b/web/src/components/Navigation.js @@ -33,13 +33,13 @@ const Navigation = (props) => { return ( {/* Mobile drawer; only shown if menu icon clicked (mobile open) and display is small */} { { } const SubscriptionItem = (props) => { + const { t } = useTranslation(); const navigate = useNavigate(); const subscription = props.subscription; const iconBadge = (subscription.new <= 99) ? subscription.new : "99+"; @@ -172,16 +173,19 @@ const SubscriptionItem = (props) => { const label = (subscription.baseUrl === window.location.origin) ? subscription.topic : topicShortUrl(subscription.baseUrl, subscription.topic); + const ariaLabel = (subscription.state === ConnectionState.Connecting) + ? `${label} (${t("nav_button_connecting")})` + : label; const handleClick = async () => { navigate(routes.forSubscription(subscription)); await subscriptionManager.markNotificationsRead(subscription.id); }; return ( - + {icon} {subscription.mutedUntil > 0 && - } + } ); };