feat(storybook): add a11y support

libs/react-components/.storybook/main.ts

@@ -3,7 +3,11 @@ import { resolve } from 'path';
 
 const config: StorybookConfig = {
   stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+  ],
   framework: {
     name: '@storybook/react-vite',
     options: {

libs/react-components/src/lib/components/Chip/index.tsx

@@ -35,6 +35,10 @@ const Chip: React.FC<ChipProps> = ({
     }
   };
 
+  const handleKeyUp = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') handleClick();
+  };
+
   useEffect(() => {
     if (selectable) setIsSelected(selected);
   }, [selectable, selected]);
@@ -45,6 +49,8 @@ const Chip: React.FC<ChipProps> = ({
         selectable ? styles.selectable : ''
       }`}
       onClick={handleClick}
+      onKeyUp={handleKeyUp}
+      tabIndex={0}
     >
       {label}
     </div>

libs/react-components/src/lib/components/Header/index.tsx

@@ -132,7 +132,10 @@ const Header: React.FC<HeaderProps> = ({
 
   return (
     <>
-      <nav className={`${styles.headerNavWrapper} navbar`}>
+      <nav
+        className={`${styles.headerNavWrapper} navbar`}
+        aria-label="Primary navigation"
+      >
         {/* Header utility bar with the language switcher begins */}
         <section className={styles.headerUtility}>
           <div className={styles.containerWide}>

libs/react-components/src/lib/components/LanguageDropdown/index.tsx

@@ -68,8 +68,7 @@ const LanguageDropdown: React.FC<LanguageDropdownProps> = ({
       }`}
     >
       <button
-        aria-label="Select language"
-        aria-controls="languages"
+        aria-label="Click or press enter to open menu"
         tabIndex={0}
         aria-haspopup="true"
         className={`${styles.languageSelectorToggle} ${styles.selected}`}
@@ -81,14 +80,15 @@ const LanguageDropdown: React.FC<LanguageDropdownProps> = ({
         className={`${styles.languageSelector} ${
           menuPosition === 'top' ? styles.top : ''
         }`}
-        id="languages"
+        role="menu"
       >
         {languages.map((lang, index) => (
           <li
             className={`${styles.languageOption} ${
               lang.value === activeLang?.value ? styles.active : ''
             }`}
             onClick={() => handleLangOptionClick(lang)}
+            tabIndex={0}
             key={index}
           >
             {lang.label}

package.json

@@ -33,9 +33,11 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
+    "@storybook/addon-a11y": "^7.5.3",
     "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-interactions": "^7.5.3",
     "@storybook/core-server": "^7.5.3",
+    "@storybook/icons": "^1.2.9",
     "@storybook/jest": "^0.2.3",
     "@storybook/react-vite": "^7.5.3",
     "@storybook/test-runner": "^0.13.0",