fix(footer): make SVG accessible (#1306)

bundlesize.config.json

@@ -10,7 +10,7 @@
     },
     {
       "path": "packages/docsearch-js/dist/umd/index.js",
-      "maxSize": "28 kB"
+      "maxSize": "28.25 kB"
     }
   ]
 }

packages/docsearch-react/src/Footer.tsx

@@ -4,8 +4,12 @@ import { AlgoliaLogo } from './AlgoliaLogo';
 
 export type FooterTranslations = Partial<{
   selectText: string;
+  selectKeyAriaLabel: string;
   navigateText: string;
+  navigateUpKeyAriaLabel: string;
+  navigateDownKeyAriaLabel: string;
   closeText: string;
+  closeKeyAriaLabel: string;
   searchByText: string;
 }>;
 
@@ -15,11 +19,12 @@ type FooterProps = Partial<{
 
 interface CommandIconProps {
   children: React.ReactNode;
+  ariaLabel: string;
 }
 
 function CommandIcon(props: CommandIconProps) {
   return (
-    <svg width="15" height="15">
+    <svg width="15" height="15" aria-label={props.ariaLabel} role="img">
       <g
         fill="none"
         stroke="currentColor"
@@ -36,8 +41,12 @@ function CommandIcon(props: CommandIconProps) {
 export function Footer({ translations = {} }: FooterProps) {
   const {
     selectText = 'to select',
+    selectKeyAriaLabel = 'Enter key',
     navigateText = 'to navigate',
+    navigateUpKeyAriaLabel = 'Arrow up',
+    navigateDownKeyAriaLabel = 'Arrow down',
     closeText = 'to close',
+    closeKeyAriaLabel = 'Escape key',
     searchByText = 'Search by',
   } = translations;
 
@@ -49,7 +58,7 @@ export function Footer({ translations = {} }: FooterProps) {
       <ul className="DocSearch-Commands">
         <li>
           <span className="DocSearch-Commands-Key">
-            <CommandIcon>
+            <CommandIcon ariaLabel={selectKeyAriaLabel}>
               <path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3" />
             </CommandIcon>
           </span>
@@ -57,12 +66,12 @@ export function Footer({ translations = {} }: FooterProps) {
         </li>
         <li>
           <span className="DocSearch-Commands-Key">
-            <CommandIcon>
+            <CommandIcon ariaLabel={navigateDownKeyAriaLabel}>
               <path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3" />
             </CommandIcon>
           </span>
           <span className="DocSearch-Commands-Key">
-            <CommandIcon>
+            <CommandIcon ariaLabel={navigateUpKeyAriaLabel}>
               <path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3" />
             </CommandIcon>
           </span>
@@ -70,7 +79,7 @@ export function Footer({ translations = {} }: FooterProps) {
         </li>
         <li>
           <span className="DocSearch-Commands-Key">
-            <CommandIcon>
+            <CommandIcon ariaLabel={closeKeyAriaLabel}>
               <path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956" />
             </CommandIcon>
           </span>

packages/docsearch-react/src/__tests__/api.test.tsx

@@ -176,10 +176,14 @@ describe('api', () => {
           translations={{
             modal: {
               footer: {
-                closeText: 'Fermer',
-                navigateText: 'Naviguer',
+                closeText: 'Pour fermer',
+                closeKeyAriaLabel: "Touche d'échappement",
+                navigateText: 'Pour naviguer',
+                navigateUpKeyAriaLabel: 'Flèche vers le haut',
+                navigateDownKeyAriaLabel: 'Flèche le bas',
                 searchByText: 'Recherche par',
-                selectText: 'Selectionner',
+                selectText: 'Pour selectionner',
+                selectKeyAriaLabel: "Touche d'entrée",
               },
             },
           }}
@@ -191,9 +195,29 @@ describe('api', () => {
       });
 
       expect(screen.getByText('Recherche par')).toBeInTheDocument();
-      expect(screen.getByText('Fermer')).toBeInTheDocument();
-      expect(screen.getByText('Naviguer')).toBeInTheDocument();
-      expect(screen.getByText('Selectionner')).toBeInTheDocument();
+      expect(screen.getByText('Pour fermer')).toBeInTheDocument();
+      expect(screen.getByText('Pour naviguer')).toBeInTheDocument();
+      expect(screen.getByText('Pour selectionner')).toBeInTheDocument();
+      expect(
+        document.querySelector(
+          '.DocSearch-Commands-Key > svg[aria-label="Touche d\'échappement"]'
+        )
+      ).toBeInTheDocument();
+      expect(
+        document.querySelector(
+          '.DocSearch-Commands-Key > svg[aria-label="Flèche vers le haut"]'
+        )
+      ).toBeInTheDocument();
+      expect(
+        document.querySelector(
+          '.DocSearch-Commands-Key > svg[aria-label="Flèche le bas"]'
+        )
+      ).toBeInTheDocument();
+      expect(
+        document.querySelector(
+          '.DocSearch-Commands-Key > svg[aria-label="Touche d\'entrée"]'
+        )
+      ).toBeInTheDocument();
     });
   });
 

packages/website/docs/api.mdx

@@ -122,7 +122,7 @@ Learn more on the [Navigator API][11] documentation.
 
 > `type: Partial<DocSearchTranslations>` | `default: docSearchTranslations` | **optional**
 
-Allow translations of any raw text present in the DocSearch button or modal components.
+Allow translations of any raw text and aria-labels present in the DocSearch button or modal components.
 
 <details><summary>docSearchTranslations</summary>
 <div>
@@ -154,8 +154,12 @@ const translations: DocSearchTranslations = {
     },
     footer: {
       selectText: 'to select',
+      selectKeyAriaLabel: 'Enter key',
       navigateText: 'to navigate',
+      navigateUpKeyAriaLabel: 'Arrow up',
+      navigateDownKeyAriaLabel: 'Arrow down',
       closeText: 'to close',
+      closeKeyAriaLabel: 'Escape key',
       searchByText: 'Search by',
     },
     noResultsScreen: {
@@ -278,7 +282,7 @@ Learn more on the [Navigator API][11] documentation.
 
 > `type: Partial<DocSearchTranslations>` | `default: docSearchTranslations` | **optional**
 
-Allow translations of any raw text present in the DocSearch button or modal components.
+Allow translations of any raw text and aria-labels present in the DocSearch button or modal components.
 
 <details><summary>docSearchTranslations</summary>
 <div>
@@ -310,8 +314,12 @@ const translations: DocSearchTranslations = {
     },
     footer: {
       selectText: 'to select',
+      selectKeyAriaLabel: 'Enter key',
       navigateText: 'to navigate',
+      navigateUpKeyAriaLabel: 'Arrow up',
+      navigateDownKeyAriaLabel: 'Arrow down',
       closeText: 'to close',
+      closeKeyAriaLabel: 'Escape key',
       searchByText: 'Search by',
     },
     noResultsScreen: {