Merge pull request #8 from hivemq/fix/header-accessibility-violations

Fix / accessibility violations in app shell header

Author: oli-hivemq

src/docs/cookbook/FullDemo.tsx

@@ -122,7 +122,7 @@ export function FullDemo() {
         ))}
         <Box flexGrow="2" textAlign="right">
           <Header.Menu overlayId="profile">
-            <Header.MenuButton icon={UserIcon} />
+            <Header.MenuButton icon={UserIcon} ariaLabel='Profile' />
             <Header.MenuContent>
               <Header.MenuContentDetails textAlign="center">
                 <b>Hello Batman 👋</b>
@@ -135,7 +135,7 @@ export function FullDemo() {
             </Header.MenuContent>
           </Header.Menu>
           <Header.Menu overlayId="support">
-            <Header.MenuButton icon={InfoIcon} />
+            <Header.MenuButton icon={InfoIcon} ariaLabel='Support' />
             <Header.MenuContent>
               <Header.MenuContentDetails>Hi, How can we help you? 💁‍♀️</Header.MenuContentDetails>
               <Header.MenuContentItem>Test</Header.MenuContentItem>

src/modules/Header/Header.stories.tsx

@@ -36,7 +36,7 @@ export const WithSidebarNavigationToggle: Story = {
           <Header.Divider />
           <Box alignSelf="end">
             <Header.Menu overlayId="test">
-              <Header.MenuButton icon={UserIcon} />
+              <Header.MenuButton icon={UserIcon} ariaLabel='Profile' />
               <Header.MenuContent>
                 <Header.MenuContentDetails textAlign="center">
                   <b>Hello Batman 👋</b>
@@ -49,7 +49,7 @@ export const WithSidebarNavigationToggle: Story = {
               </Header.MenuContent>
             </Header.Menu>
             <Header.Menu overlayId="other">
-              <Header.MenuButton icon={InfoIcon} />
+              <Header.MenuButton icon={InfoIcon} ariaLabel='Support' />
               <Header.MenuContent>
                 <Header.MenuContentDetails>Hi, How can we help you? 💁‍♀️</Header.MenuContentDetails>
                 <Header.MenuContentItem>Test</Header.MenuContentItem>

src/modules/Header/HeaderMenuButton.tsx

@@ -4,14 +4,15 @@ import { type LucideIcon, XIcon } from 'lucide-react'
 export type HeaderMenuButtonProps = {
   icon: LucideIcon
   closeIcon?: LucideIcon
+  ariaLabel: string
 }
 
 const OPEN_MARGIN_IN_PIXEL = 4
 const BORDER_WIDTH_IN_PIXEL = 2
 const MAX_CONTAINER_SIZE_IN_PIXEL = 56
 
 export const HeaderMenuButton = forwardRef<HeaderMenuButtonProps, 'button'>((props, ref) => {
-  const { as, icon, closeIcon = XIcon } = props
+  const { ariaLabel, as, icon, closeIcon = XIcon } = props
   const { isOpen } = useMenuContext()
 
   const containerSize = isOpen
@@ -20,6 +21,7 @@ export const HeaderMenuButton = forwardRef<HeaderMenuButtonProps, 'button'>((pro
 
   return (
     <MenuButton
+      aria-label={ariaLabel}
       _hover={{
         backgroundColor: 'surface.800',
       }}

src/modules/Header/HeaderSidebarToggle.tsx

@@ -31,6 +31,7 @@ export function HeaderSidebarToggle({ onClick, ...props }: HeaderSidebarTogglePr
         context.setSidebarOpen(!context.isSidebarOpen)
         onClick?.(event)
       }}
+      aria-label={'Menu Toggle'}
     >
       <Icon
         w={6}