More labels, and live regions

This commit is contained in:
Philipp Heckel 2022-05-03 15:09:20 -04:00
parent 8a7bc38861
commit 15a45d9eb7
3 changed files with 22 additions and 12 deletions

View file

@ -5,8 +5,8 @@
"action_bar_send_test_notification": "Send test notification", "action_bar_send_test_notification": "Send test notification",
"action_bar_clear_notifications": "Clear all notifications", "action_bar_clear_notifications": "Clear all notifications",
"action_bar_unsubscribe": "Unsubscribe", "action_bar_unsubscribe": "Unsubscribe",
"action_bar_toggle_mute": "Toggle mute notifications", "action_bar_toggle_mute": "Mute/unmute notifications",
"action_bar_toggle_action_menu": "Toggle action menu", "action_bar_toggle_action_menu": "Open/close action menu",
"message_bar_type_message": "Type a message here", "message_bar_type_message": "Type a message here",
"message_bar_error_publishing": "Error publishing notification", "message_bar_error_publishing": "Error publishing notification",
"message_bar_show_dialog": "Show publish dialog", "message_bar_show_dialog": "Show publish dialog",
@ -17,6 +17,8 @@
"nav_button_documentation": "Documentation", "nav_button_documentation": "Documentation",
"nav_button_publish_message": "Publish notification", "nav_button_publish_message": "Publish notification",
"nav_button_subscribe": "Subscribe to topic", "nav_button_subscribe": "Subscribe to topic",
"nav_button_muted": "Notifications muted",
"nav_button_connecting": "connecting",
"alert_grant_title": "Notifications are disabled", "alert_grant_title": "Notifications are disabled",
"alert_grant_description": "Grant your browser permission to display desktop notifications.", "alert_grant_description": "Grant your browser permission to display desktop notifications.",
"alert_grant_button": "Grant now", "alert_grant_button": "Grant now",

View file

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

View file

@ -163,6 +163,7 @@ const SubscriptionList = (props) => {
} }
const SubscriptionItem = (props) => { const SubscriptionItem = (props) => {
const { t } = useTranslation();
const navigate = useNavigate(); const navigate = useNavigate();
const subscription = props.subscription; const subscription = props.subscription;
const iconBadge = (subscription.new <= 99) ? subscription.new : "99+"; const iconBadge = (subscription.new <= 99) ? subscription.new : "99+";
@ -172,16 +173,19 @@ const SubscriptionItem = (props) => {
const label = (subscription.baseUrl === window.location.origin) const label = (subscription.baseUrl === window.location.origin)
? subscription.topic ? subscription.topic
: topicShortUrl(subscription.baseUrl, subscription.topic); : topicShortUrl(subscription.baseUrl, subscription.topic);
const ariaLabel = (subscription.state === ConnectionState.Connecting)
? `${label} (${t("nav_button_connecting")})`
: label;
const handleClick = async () => { const handleClick = async () => {
navigate(routes.forSubscription(subscription)); navigate(routes.forSubscription(subscription));
await subscriptionManager.markNotificationsRead(subscription.id); await subscriptionManager.markNotificationsRead(subscription.id);
}; };
return ( return (
<ListItemButton onClick={handleClick} selected={props.selected}> <ListItemButton onClick={handleClick} selected={props.selected} aria-label={ariaLabel} aria-live="polite">
<ListItemIcon>{icon}</ListItemIcon> <ListItemIcon>{icon}</ListItemIcon>
<ListItemText primary={label}/> <ListItemText primary={label}/>
{subscription.mutedUntil > 0 && {subscription.mutedUntil > 0 &&
<ListItemIcon edge="end"><NotificationsOffOutlined /></ListItemIcon>} <ListItemIcon edge="end" aria-label={t("nav_button_muted")}><NotificationsOffOutlined /></ListItemIcon>}
</ListItemButton> </ListItemButton>
); );
}; };