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={{
-                margin: '0px',
-                paddingTop: '12px',
-                paddingBottom: '4px'
-            }}>
+            <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

@@ -33,13 +33,13 @@ const Navigation = (props) => {
     return (
         <Box
             component="nav"
-            role="navigation" 
+            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" 
+                role="menubar"
                 open={props.mobileDrawerOpen}
                 onClose={props.onMobileDrawerToggle}
                 ModalProps={{ keepMounted: true }} // Better open performance on mobile.
@@ -54,7 +54,7 @@ const Navigation = (props) => {
             <Drawer
                 open
                 variant="permanent"
-                role="menubar" 
+                role="menubar"
                 sx={{
                     display: { xs: 'none', sm: 'block' },
                     '& .MuiDrawer-paper': { boxSizing: 'border-box', width: navWidth },
@@ -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>
     );
 };