More labels, and live regions

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",

web/src/components/DialogFooter.js

@@ -12,11 +12,15 @@ const DialogFooter = (props) => {
             paddingLeft: '24px',
             paddingBottom: '8px',
         }}>
-            <DialogContentText component="div" sx={{
+            <DialogContentText
+                component="div"
+                aria-live="polite"
+                sx={{
                     margin: '0px',
                     paddingTop: '12px',
                     paddingBottom: '4px'
-            }}>
+                }}
+            >
                 {props.status}
             </DialogContentText>
             <DialogActions sx={{paddingRight: 2}}>

web/src/components/Navigation.js

@@ -163,6 +163,7 @@ const SubscriptionList = (props) => {
 }
 
 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 (
-        <ListItemButton onClick={handleClick} selected={props.selected}>
+        <ListItemButton onClick={handleClick} selected={props.selected} aria-label={ariaLabel} aria-live="polite">
             <ListItemIcon>{icon}</ListItemIcon>
             <ListItemText primary={label}/>
             {subscription.mutedUntil > 0 &&
-                <ListItemIcon edge="end"><NotificationsOffOutlined /></ListItemIcon>}
+                <ListItemIcon edge="end" aria-label={t("nav_button_muted")}><NotificationsOffOutlined /></ListItemIcon>}
         </ListItemButton>
     );
 };