From b68a79261e139385cdaf3d0321f25428aa90b242 Mon Sep 17 00:00:00 2001
From: "Blake V." <87083504+bvandercar-vt@users.noreply.github.com>
Date: Fri, 18 Apr 2025 00:31:24 -0600
Subject: [PATCH] feat(a11y): add `aria-keyshortcuts` to search button (#2365)

---
 packages/docsearch-react/src/DocSearchButton.tsx    | 9 ++++++---
 packages/docsearch-react/src/__tests__/api.test.tsx | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/docsearch-react/src/DocSearchButton.tsx b/packages/docsearch-react/src/DocSearchButton.tsx
index d222678f..7e7e101d 100644
--- a/packages/docsearch-react/src/DocSearchButton.tsx
+++ b/packages/docsearch-react/src/DocSearchButton.tsx
@@ -34,14 +34,17 @@ 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);
+          ([ACTION_KEY_DEFAULT, 'Control', <ControlKeyIcon />] as const)
+        : (['Meta', 'Meta', key] as const);
+
+    const shortcut = `${actionKeyAltText}+k`;
 
     return (
       <button
         type="button"
         className="DocSearch DocSearch-Button"
-        aria-label={`${buttonAriaLabel} (${actionKeyAltText}+K)`}
+        aria-label={`${buttonAriaLabel} (${shortcut})`}
+        aria-keyshortcuts={shortcut}
         {...props}
         ref={ref}
       >
diff --git a/packages/docsearch-react/src/__tests__/api.test.tsx b/packages/docsearch-react/src/__tests__/api.test.tsx
index a2ea317b..84439590 100644
--- 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 (Ctrl+K)');
+      expect(document.querySelector('.DocSearch-Button')?.getAttribute('aria-label')).toBe('Recherche (Control+k)');
     });
 
     it('overrides the default DocSearchModal startScreen text', async () => {