feat(a11y): add hotkeys to search input aria-label (#2337)

algolia · Nov 12, 2024 · 44aa7dc · 44aa7dc
1 parent 32ec976
commit 44aa7dc
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/bundlesize.config.json b/bundlesize.config.json
@@ -10,7 +10,7 @@
     },
     {
       "path": "packages/docsearch-js/dist/umd/index.js",
-      "maxSize": "35.05 kB"
+      "maxSize": "35.08 kB"
     }
   ]
 }
diff --git a/packages/docsearch-react/src/DocSearchButton.tsx b/packages/docsearch-react/src/DocSearchButton.tsx
@@ -31,8 +31,20 @@ export const DocSearchButton = React.forwardRef<HTMLButtonElement, DocSearchButt
       }
     }, []);
 
+    const [actionKeyReactsTo, actionKeyAltText, actionKeyChild] =
+      key === ACTION_KEY_DEFAULT
+        ? // eslint-disable-next-line react/jsx-key -- false flag
+          ([ACTION_KEY_DEFAULT, 'Ctrl', <ControlKeyIcon />] as const)
+        : (['Meta', 'Command', key] as const);
+
     return (
-      <button type="button" className="DocSearch DocSearch-Button" aria-label={buttonAriaLabel} {...props} ref={ref}>
+      <button
+        type="button"
+        className="DocSearch DocSearch-Button"
+        aria-label={`${buttonAriaLabel} (${actionKeyAltText}+K)`}
+        {...props}
+        ref={ref}
+      >
         <span className="DocSearch-Button-Container">
           <SearchIcon />
           <span className="DocSearch-Button-Placeholder">{buttonText}</span>
@@ -41,9 +53,7 @@ export const DocSearchButton = React.forwardRef<HTMLButtonElement, DocSearchButt
         <span className="DocSearch-Button-Keys">
           {key !== null && (
             <>
-              <DocSearchButtonKey reactsToKey={key === ACTION_KEY_DEFAULT ? ACTION_KEY_DEFAULT : 'Meta'}>
-                {key === ACTION_KEY_DEFAULT ? <ControlKeyIcon /> : key}
-              </DocSearchButtonKey>
+              <DocSearchButtonKey reactsToKey={actionKeyReactsTo}>{actionKeyChild}</DocSearchButtonKey>
               <DocSearchButtonKey reactsToKey="k">K</DocSearchButtonKey>
             </>
           )}

diff --git a/packages/docsearch-react/src/__tests__/api.test.tsx b/packages/docsearch-react/src/__tests__/api.test.tsx
@@ -59,7 +59,7 @@ describe('api', () => {
       );
       expect(document.querySelector(docSearchSelector)).toBeInTheDocument();
       expect(document.querySelector('.DocSearch-Button-Placeholder')?.innerHTML).toBe('Recherche');
-      expect(document.querySelector('.DocSearch-Button')?.getAttribute('aria-label')).toBe('Recherche');
+      expect(document.querySelector('.DocSearch-Button')?.getAttribute('aria-label')).toBe('Recherche (Ctrl+K)');
     });
 
     it('overrides the default DocSearchModal startScreen text', async () => {