fix: Improve Accessibility in Endpoints Menu/Navigation (#5123)

* fix: prevent mobile nav toggle from being focusable when not in mobile view, add types to <NavToggle/>

* fix: appropriate endpoint menu item role, add up/down focus mgmt, ensure set api key is focusable and accessible

* fix: localize link titles and update text color for improved accessibility in Nav component
This commit is contained in:
Danny Avila 2024-12-28 12:58:12 -05:00 committed by GitHub
parent d6f1ecf75c
commit a423eb8c7b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 137 additions and 32 deletions

View file

@ -48,10 +48,10 @@ export default function Nav({ links, isCollapsed, resize, defaultActive }: NavPr
}}
>
<link.icon className="h-4 w-4 text-text-secondary" />
<span className="sr-only">{link.title}</span>
<span className="sr-only">{localize(link.title)}</span>
</Button>
}
></TooltipAnchor>
/>
) : (
<Accordion
key={index}
@ -80,7 +80,7 @@ export default function Nav({ links, isCollapsed, resize, defaultActive }: NavPr
<span
className={cn(
'ml-auto opacity-100 transition-all duration-300 ease-in-out',
variant === 'default' ? 'text-background dark:text-white' : '',
variant === 'default' ? 'text-text-primary' : '',
)}
>
{link.label}
@ -90,7 +90,7 @@ export default function Nav({ links, isCollapsed, resize, defaultActive }: NavPr
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
<AccordionContent className="w-full dark:text-white">
<AccordionContent className="w-full text-text-primary">
{link.Component && <link.Component />}
</AccordionContent>
</AccordionItem>