chore(web): improve navigation accessibility

Author: boojack

web/src/components/Navigation.tsx

@@ -69,34 +69,36 @@ const Navigation = (props: Props) => {
     icon: <UserCircleIcon className="w-6 h-auto shrink-0" />,
   };
 
-  const navLinks: NavLinkItem[] = currentUser
+  const primaryNavLinks: NavLinkItem[] = currentUser
     ? [homeNavLink, exploreNavLink, attachmentsNavLink, inboxNavLink]
     : [exploreNavLink, signInNavLink];
+  const inboxAriaLabel = unreadCount > 0 ? `${t("common.inbox")}, ${unreadCount} unread` : t("common.inbox");
 
   return (
     <header className={cn("w-full h-full overflow-auto flex flex-col justify-between items-start gap-4", className)}>
       <div className="w-full px-1 py-1 flex flex-col justify-start items-start space-y-2 overflow-auto overflow-x-hidden shrink">
         <NavLink className="mb-3 cursor-default" to={currentUser ? Routes.ROOT : Routes.EXPLORE}>
           <MemosLogo collapsed={collapsed} />
         </NavLink>
-        {navLinks.map((navLink) => (
-          <NavLink
-            className={({ isActive }) =>
-              cn(
-                "px-2 py-2 rounded-2xl border flex flex-row items-center text-lg text-sidebar-foreground transition-colors",
-                collapsed ? "" : "w-full px-4",
-                isActive
-                  ? "bg-sidebar-accent text-sidebar-accent-foreground border-sidebar-accent-border drop-shadow"
-                  : "border-transparent hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:border-sidebar-accent-border opacity-80",
-              )
-            }
-            key={navLink.id}
-            to={navLink.path}
-            id={navLink.id}
-            viewTransition
-          >
-            {props.collapsed ? (
-              <TooltipProvider>
+        <TooltipProvider>
+          {primaryNavLinks.map((navLink) => (
+            <NavLink
+              className={({ isActive }) =>
+                cn(
+                  "px-2 py-2 rounded-2xl border flex flex-row items-center text-lg text-sidebar-foreground transition-colors",
+                  collapsed ? "" : "w-full px-4",
+                  isActive
+                    ? "bg-sidebar-accent text-sidebar-accent-foreground border-sidebar-accent-border drop-shadow"
+                    : "border-transparent hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:border-sidebar-accent-border opacity-80",
+                )
+              }
+              key={navLink.id}
+              to={navLink.path}
+              id={navLink.id}
+              aria-label={navLink.id === "header-inbox" ? inboxAriaLabel : undefined}
+              viewTransition
+            >
+              {props.collapsed ? (
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <div>{navLink.icon}</div>
@@ -105,13 +107,13 @@ const Navigation = (props: Props) => {
                     <p>{navLink.title}</p>
                   </TooltipContent>
                 </Tooltip>
-              </TooltipProvider>
-            ) : (
-              navLink.icon
-            )}
-            {!props.collapsed && <span className="ml-3 truncate">{navLink.title}</span>}
-          </NavLink>
-        ))}
+              ) : (
+                navLink.icon
+              )}
+              {!props.collapsed && <span className="ml-3 truncate">{navLink.title}</span>}
+            </NavLink>
+          ))}
+        </TooltipProvider>
       </div>
       {currentUser && (
         <div className={cn("w-full flex flex-col justify-end", props.collapsed ? "items-center" : "items-start pl-3")}>