chore(web): improve navigation accessibility

web/src/components/Navigation.tsx

@@ -69,9 +69,10 @@ 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)}>
@@ -79,7 +80,8 @@ const Navigation = (props: Props) => {
         <NavLink className="mb-3 cursor-default" to={currentUser ? Routes.ROOT : Routes.EXPLORE}>
           <MemosLogo collapsed={collapsed} />
         </NavLink>
-        {navLinks.map((navLink) => (
+        <TooltipProvider>
+          {primaryNavLinks.map((navLink) => (
             <NavLink
               className={({ isActive }) =>
                 cn(
@@ -93,10 +95,10 @@ const Navigation = (props: Props) => {
               key={navLink.id}
               to={navLink.path}
               id={navLink.id}
+              aria-label={navLink.id === "header-inbox" ? inboxAriaLabel : undefined}
               viewTransition
             >
               {props.collapsed ? (
-              <TooltipProvider>
                 <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>
           ))}
+        </TooltipProvider>
       </div>
       {currentUser && (
         <div className={cn("w-full flex flex-col justify-end", props.collapsed ? "items-center" : "items-start pl-3")}>