diff --git a/bundlesize.config.json b/bundlesize.config.json index 46f6a1d14..ea601e1d2 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -10,7 +10,7 @@ }, { "path": "packages/docsearch-js/dist/umd/index.js", - "maxSize": "28 kB" + "maxSize": "28.25 kB" } ] } diff --git a/packages/docsearch-react/src/AlgoliaLogo.tsx b/packages/docsearch-react/src/AlgoliaLogo.tsx index 578d5c4a4..92fdeba12 100644 --- a/packages/docsearch-react/src/AlgoliaLogo.tsx +++ b/packages/docsearch-react/src/AlgoliaLogo.tsx @@ -18,7 +18,7 @@ export function AlgoliaLogo({ translations = {} }: AlgoliaLogoProps) { rel="noopener noreferrer" > {searchByText} - + ; @@ -15,11 +19,12 @@ type FooterProps = Partial<{ interface CommandIconProps { children: React.ReactNode; + ariaLabel: string; } function CommandIcon(props: CommandIconProps) { return ( - +
  • - + @@ -57,12 +66,12 @@ export function Footer({ translations = {} }: FooterProps) {
  • - + - + @@ -70,7 +79,7 @@ export function Footer({ translations = {} }: FooterProps) {
  • - + diff --git a/packages/docsearch-react/src/__tests__/api.test.tsx b/packages/docsearch-react/src/__tests__/api.test.tsx index ec5ab3358..32a0227b0 100644 --- a/packages/docsearch-react/src/__tests__/api.test.tsx +++ b/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(); }); }); diff --git a/packages/website/docs/api.mdx b/packages/website/docs/api.mdx index 117ddf26d..2638db297 100644 --- a/packages/website/docs/api.mdx +++ b/packages/website/docs/api.mdx @@ -122,7 +122,7 @@ Learn more on the [Navigator API][11] documentation. > `type: Partial` | `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.
    docSearchTranslations
    @@ -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` | `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.
    docSearchTranslations
    @@ -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: {