iterate on the notification icon button aria-label

danilo-leal · Oct 30, 2023 · 3b4b31d · 3b4b31d
1 parent 8cdc5fc
commit 3b4b31d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/docs/src/modules/components/Notifications.js b/docs/src/modules/components/Notifications.js
@@ -156,24 +156,33 @@ export default function Notifications() {
     <React.Fragment>
       <Tooltip
         open={tooltipOpen}
+        title={t('toggleNotifications')}
+        enterDelay={300}
         onOpen={() => {
           setTooltipOpen(!open);
         }}
         onClose={() => {
           setTooltipOpen(false);
         }}
-        title={t('toggleNotifications')}
-        enterDelay={300}
       >
         <IconButton
           color="primary"
           ref={anchorRef}
           aria-controls={open ? 'notifications-popup' : undefined}
           aria-haspopup="true"
-          aria-label={t('toggleNotifications')}
-          onClick={handleToggle}
+          aria-label={
+            (messageList
+              ? messageList.reduce(
+                  (count, message) => (message.id > lastSeen ? count + 1 : count),
+                  0,
+                )
+              : 0) +
+            ' ' +
+            t('unreadNotifications')
+          }
           data-ga-event-category="AppBar"
           data-ga-event-action="toggleNotifications"
+          onClick={handleToggle}
         >
           <Badge
             color="error"

diff --git a/docs/translations/translations.json b/docs/translations/translations.json
@@ -192,6 +192,7 @@
   "v5IsOut": "🎉 v5 release candidate is out! Head to the",
   "v5docsLink": "v5 documentation",
   "v5startAdoption": "to get started.",
+  "unreadNotifications": "unread notifications",
   "usage": "Usage",
   "usageButton": "Explore the docs",
   "usageDescr": "MUI components work without any additional setup, and don't pollute the global scope.",