Fix / CLOUD-25858 / header menu button aria-label (#14)

* update ui-theme to v0.4.2

* fix: aria-label for HeaderMenuButton

.storybook/chakraTheme.ts

@@ -1,11 +1,6 @@
 // Theming with Chakra UI is based on the Styled System Theme Specification
 // Extend the theme to include custom colors, fonts, etc
-import { extendTheme } from "@chakra-ui/react";
-import { colors, components, fonts, styles } from "@hivemq/ui-theme";
+import { extendTheme } from "@chakra-ui/react"
+import theme from "@hivemq/ui-theme"
 
-export const chakraTheme = extendTheme({
-  styles,
-  fonts,
-  colors,
-  components,
-});
+export const chakraTheme = extendTheme(theme)

package.json

@@ -49,7 +49,7 @@
     "@emotion/styled": "^11.12.0",
     "@fontsource/raleway": "^5.0.19",
     "@fontsource/roboto": "^5.0.13",
-    "@hivemq/ui-theme": "^0.2.1",
+    "@hivemq/ui-theme": "^0.4.2",
     "@radix-ui/react-slot": "^1.1.0",
     "@storybook/addon-a11y": "^8.2.6",
     "@storybook/addon-essentials": "^8.2.4",
@@ -87,7 +87,7 @@
     "@chakra-ui/styled-system": "^2.9.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@hivemq/ui-theme": "^0.5.0",
+    "@hivemq/ui-theme": "^0.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

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} ariaLabel="Profile" />
+            <Header.MenuButton icon={UserIcon} aria-label="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} ariaLabel="Support" />
+            <Header.MenuButton icon={InfoIcon} aria-label="Support" />
             <Header.MenuContent>
               <Header.MenuContentDetails>Hi, How can we help you? 💁‍♀️</Header.MenuContentDetails>
               <Header.MenuContentItem>Test</Header.MenuContentItem>

src/modules/Header/Header.stories.tsx

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

src/modules/Header/HeaderMenuButton.tsx

@@ -19,15 +19,15 @@ import { type LucideIcon, XIcon } from 'lucide-react'
 export type HeaderMenuButtonProps = {
   icon: LucideIcon
   closeIcon?: LucideIcon
-  ariaLabel: string
+  'aria-label': 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 { ariaLabel, as, icon, closeIcon = XIcon } = props
+  const { 'aria-label': _ariaLabel, as, icon, closeIcon = XIcon } = props
   const { isOpen } = useMenuContext()
 
   const containerSize = isOpen
@@ -36,7 +36,6 @@ export const HeaderMenuButton = forwardRef<HeaderMenuButtonProps, 'button'>((pro
 
   return (
     <MenuButton
-      aria-label={ariaLabel}
       _hover={{
         backgroundColor: 'surface.800',
       }}