From 40d29a7791393e8f44bceb32e6c25c3f3efd3a46 Mon Sep 17 00:00:00 2001
From: bsahitya <sahitya.buddharaju@gmail.com>
Date: Tue, 11 Jun 2024 12:34:26 -0500
Subject: [PATCH] feat(storybook): add a11y support

---
 libs/react-components/.storybook/main.ts      |  6 +++-
 .../src/lib/components/Chip/index.tsx         |  6 ++++
 .../src/lib/components/Header/index.tsx       |  5 +++-
 .../lib/components/LanguageDropdown/index.tsx |  6 ++--
 package-lock.json                             | 29 +++++++++++++++++++
 package.json                                  |  2 ++
 6 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/libs/react-components/.storybook/main.ts b/libs/react-components/.storybook/main.ts
index 3df5292..90fadda 100644
--- a/libs/react-components/.storybook/main.ts
+++ b/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: {
diff --git a/libs/react-components/src/lib/components/Chip/index.tsx b/libs/react-components/src/lib/components/Chip/index.tsx
index e543c9a..6790ca8 100644
--- a/libs/react-components/src/lib/components/Chip/index.tsx
+++ b/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>
diff --git a/libs/react-components/src/lib/components/Header/index.tsx b/libs/react-components/src/lib/components/Header/index.tsx
index de8dbfb..3c9fd1e 100644
--- a/libs/react-components/src/lib/components/Header/index.tsx
+++ b/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}>
diff --git a/libs/react-components/src/lib/components/LanguageDropdown/index.tsx b/libs/react-components/src/lib/components/LanguageDropdown/index.tsx
index 05eabff..3be39dc 100644
--- a/libs/react-components/src/lib/components/LanguageDropdown/index.tsx
+++ b/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,7 +80,7 @@ const LanguageDropdown: React.FC<LanguageDropdownProps> = ({
         className={`${styles.languageSelector} ${
           menuPosition === 'top' ? styles.top : ''
         }`}
-        id="languages"
+        role="menu"
       >
         {languages.map((lang, index) => (
           <li
@@ -89,6 +88,7 @@ const LanguageDropdown: React.FC<LanguageDropdownProps> = ({
               lang.value === activeLang?.value ? styles.active : ''
             }`}
             onClick={() => handleLangOptionClick(lang)}
+            tabIndex={0}
             key={index}
           >
             {lang.label}
diff --git a/package-lock.json b/package-lock.json
index 9e040bd..3675f5f 100644
--- a/package-lock.json
+++ b/package-lock.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",
@@ -7028,6 +7030,20 @@
         "@sinonjs/commons": "^3.0.0"
       }
     },
+    "node_modules/@storybook/addon-a11y": {
+      "version": "7.6.19",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-7.6.19.tgz",
+      "integrity": "sha512-92SOapbXukkO0RlrA0+8qa61NlCGSUFM7n5DfAA6tobIfhBAhfsEi7I9Q/0F95SCAgJoVVQdeIGKdvHjxO8DAg==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/addon-highlight": "7.6.19",
+        "axe-core": "^4.2.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
     "node_modules/@storybook/addon-actions": {
       "version": "7.6.19",
       "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.6.19.tgz",
@@ -8732,6 +8748,19 @@
       "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==",
       "dev": true
     },
+    "node_modules/@storybook/icons": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.2.9.tgz",
+      "integrity": "sha512-cOmylsz25SYXaJL/gvTk/dl3pyk7yBFRfeXTsHvTA3dfhoU/LWSq0NKL9nM7WBasJyn6XPSGnLS4RtKXLw5EUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@storybook/jest": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/@storybook/jest/-/jest-0.2.3.tgz",
diff --git a/package.json b/package.json
index a1452bb..3c716b2 100644
--- a/package.json
+++ b/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",