fix(accessibility): CR-4249 instantearch accessibility fixes (#5884)

--------- Co-authored-by: Dhaya <154633+dhayab@users.noreply.github.com>
algolia · Oct 18, 2023 · bed187b · bed187b
1 parent 845190b
commit bed187b
Show file tree

Hide file tree

Showing 20 changed files with 912 additions and 870 deletions.
diff --git a/packages/instantsearch.js/src/components/Pagination/Pagination.tsx b/packages/instantsearch.js/src/components/Pagination/Pagination.tsx
@@ -56,7 +56,7 @@ function Pagination(props: PaginationProps) {
       <ul className={props.cssClasses.list}>
         {props.showFirst && (
           <PaginationLink
-            ariaLabel="First"
+            ariaLabel="First Page"
             className={props.cssClasses.firstPageItem}
             isDisabled={props.isFirstPage}
             templates={props.templates}
@@ -70,7 +70,7 @@ function Pagination(props: PaginationProps) {
 
         {props.showPrevious && (
           <PaginationLink
-            ariaLabel="Previous"
+            ariaLabel="Previous Page"
             className={props.cssClasses.previousPageItem}
             isDisabled={props.isFirstPage}
             templates={props.templates}
@@ -99,7 +99,7 @@ function Pagination(props: PaginationProps) {
 
         {props.showNext && (
           <PaginationLink
-            ariaLabel="Next"
+            ariaLabel="Next Page"
             className={props.cssClasses.nextPageItem}
             isDisabled={props.isLastPage}
             templates={props.templates}
@@ -113,7 +113,7 @@ function Pagination(props: PaginationProps) {
 
         {props.showLast && (
           <PaginationLink
-            ariaLabel="Last"
+            ariaLabel={`Last Page, Page ${props.nbPages}`}
             className={props.cssClasses.lastPageItem}
             isDisabled={props.isLastPage}
             templates={props.templates}

diff --git a/packages/instantsearch.js/src/components/RefinementList/RefinementList.tsx b/packages/instantsearch.js/src/components/RefinementList/RefinementList.tsx
@@ -328,6 +328,7 @@ class RefinementList<TTemplates extends Templates> extends Component<
           // This sets the search box to a controlled state because
           // we don't rely on the `refine` prop but on `onChange`.
           searchAsYouType={false}
+          ariaLabel="Search for filters"
         />
       </div>
     );

diff --git a/...rch.js/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.tsx.snap b/...rch.js/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.tsx.snap
@@ -98,6 +98,7 @@ exports[`RefinementList rendering with facets from search 1`] = `
           role="search"
         >
           <input
+            aria-label="Search for filters"
             autocapitalize="off"
             autocomplete="off"
             autocorrect="off"
@@ -175,6 +176,7 @@ exports[`RefinementList rendering without facets from search 1`] = `
           role="search"
         >
           <input
+            aria-label="Search for filters"
             autocapitalize="off"
             autocomplete="off"
             autocorrect="off"

diff --git a/packages/instantsearch.js/src/components/SearchBox/SearchBox.tsx b/packages/instantsearch.js/src/components/SearchBox/SearchBox.tsx
@@ -29,6 +29,7 @@ type SearchBoxProps = {
   searchAsYouType?: boolean;
   isSearchStalled?: boolean;
   disabled?: boolean;
+  ariaLabel?: string;
   onChange?: (event: Event) => void;
   onSubmit?: (event: Event) => void;
   onReset?: (event: Event) => void;
@@ -43,6 +44,7 @@ const defaultProps = {
   searchAsYouType: true,
   isSearchStalled: false,
   disabled: false,
+  ariaLabel: 'Search',
   onChange: noop,
   onSubmit: noop,
   onReset: noop,
@@ -154,6 +156,7 @@ class SearchBox extends Component<
       showLoadingIndicator,
       templates,
       isSearchStalled,
+      ariaLabel,
     } = this.props;
 
     return (
@@ -183,6 +186,7 @@ class SearchBox extends Component<
             onInput={this.onInput}
             onBlur={this.onBlur}
             onFocus={this.onFocus}
+            aria-label={ariaLabel}
           />
 
           <Template

diff --git a/...instantsearch.js/src/components/SearchBox/__tests__/__snapshots__/SearchBox-test.tsx.snap b/...instantsearch.js/src/components/SearchBox/__tests__/__snapshots__/SearchBox-test.tsx.snap
@@ -13,6 +13,7 @@ exports[`SearchBox Rendering with custom templates 1`] = `
     role="search"
   >
     <input
+      aria-label="Search"
       autoCapitalize="off"
       autoComplete="off"
       autoCorrect="off"
@@ -76,6 +77,7 @@ exports[`SearchBox Rendering with default props 1`] = `
     role="search"
   >
     <input
+      aria-label="Search"
       autoCapitalize="off"
       autoComplete="off"
       autoCorrect="off"

diff --git a/packages/instantsearch.js/src/components/Selector/Selector.tsx b/packages/instantsearch.js/src/components/Selector/Selector.tsx
@@ -19,19 +19,22 @@ export type SelectorProps = {
   currentValue?: string | number;
   options: SelectorOption[];
   setValue: (value: string) => void;
+  ariaLabel?: string;
 };
 
 function Selector({
   currentValue,
   options,
   cssClasses,
   setValue,
+  ariaLabel,
 }: SelectorProps) {
   return (
     <select
       className={cx(cssClasses.select)}
       onChange={(event) => setValue((event.target as HTMLSelectElement).value)}
       value={`${currentValue}`}
+      aria-label={ariaLabel}
     >
       {options.map((option) => (
         <option

diff --git a/packages/instantsearch.js/src/components/Slider/Slider.tsx b/packages/instantsearch.js/src/components/Slider/Slider.tsx
@@ -92,8 +92,13 @@ class Slider extends Component<SliderProps> {
         props['data-handle-key'] === 1 && 'rheostat-handle-upper'
       );
 
+      const ariaLabel =
+        props['data-handle-key'] === 0
+          ? 'Minimum Filter Handle'
+          : 'Maximum Filter Handle';
+
       return (
-        <div {...props} className={className}>
+        <div {...props} className={className} aria-label={ariaLabel}>
           {tooltips && <div className="rheostat-tooltip">{value}</div>}
         </div>
       );

diff --git a/packages/instantsearch.js/src/widgets/pagination/__tests__/pagination.test.tsx b/packages/instantsearch.js/src/widgets/pagination/__tests__/pagination.test.tsx
@@ -88,10 +88,10 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/pagination/
         pageLink,
       ] = await Promise.all([
         findByRole(container, 'list'),
-        (await findByLabelText(container, 'First')).parentNode,
-        (await findByLabelText(container, 'Previous')).parentNode,
-        (await findByLabelText(container, 'Next')).parentNode,
-        (await findByLabelText(container, 'Last')).parentNode,
+        (await findByLabelText(container, 'First Page')).parentNode,
+        (await findByLabelText(container, 'Previous Page')).parentNode,
+        (await findByLabelText(container, 'Next Page')).parentNode,
+        (await findByLabelText(container, 'Last Page, Page 0')).parentNode,
         findByRole(container, 'link', { name: 'Page 1' }),
       ]);