fix(atomic): fix accessibility issues with pager/results per page but…

…tons (#4761)

This PR fixes the accessibility issues with the pager/results per page
buttons. More specifically, it was not possible to navigating between
pager or results per page buttons without selecting one, triggering a
refresh of the results.

The solution is to have the buttons inside a toolbar and implement the
logic described here:

https://www.w3.org/WAI/ARIA/apg/patterns/radio/#:~:text=For%20Radio%20Group%20Contained%20in%20a%20Toolbar

https://coveord.atlassian.net/browse/KIT-3767

packages/atomic/src/components/common/items-per-page/choices.tsx

@@ -60,6 +60,7 @@ export const Choices: FunctionalComponent<ChoicesProps> = ({
             class="btn-page focus-visible:bg-neutral-light"
             part={parts.join(' ')}
             text={text}
+            selectWhenFocused={false}
           ></RadioButton>
         );
       })}

packages/atomic/src/components/common/pager/pager-buttons.tsx

@@ -69,6 +69,7 @@ export const PagerPageButton: FunctionalComponent<PagerPageButtonProps> = (
   return (
     <RadioButton
       {...props}
+      selectWhenFocused={false}
       key={props.page}
       style="outline-neutral"
       checked={props.isSelected}

packages/atomic/src/components/common/pager/pager-navigation.tsx

@@ -11,7 +11,7 @@ export const PagerNavigation: FunctionalComponent<PagerNavigationProps> = (
 ) => {
   return (
     <nav aria-label={props.i18n.t('pagination')}>
-      <div part="buttons" class="flex flex-wrap gap-2">
+      <div part="buttons" role="toolbar" class="flex flex-wrap gap-2">
         {...children}
       </div>
     </nav>

packages/atomic/src/components/common/radio-button.tsx

@@ -9,6 +9,7 @@ import {
 
 export interface RadioButtonProps {
   groupName: string;
+  selectWhenFocused?: boolean;
   onChecked?(): void;
   style?: ButtonStyle;
   key?: string | number;
@@ -39,6 +40,61 @@ export const RadioButton: FunctionalComponent<RadioButtonProps> = (props) => {
     classNames.push(props.class);
   }
 
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (props.selectWhenFocused !== false) {
+      return;
+    }
+    const {key} = event;
+    const radioGroup = (event.currentTarget as HTMLElement).parentNode;
+
+    if (!radioGroup || !isArrowKey(key)) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const buttons = getRadioButtons(radioGroup);
+    const currentIndex = getCurrentIndex(
+      buttons,
+      event.currentTarget as HTMLInputElement
+    );
+    const newIndex = getNewIndex(key, currentIndex, buttons.length);
+
+    if (buttons[newIndex]) {
+      buttons[newIndex].focus();
+    }
+  };
+
+  const isArrowKey = (key: string) => {
+    return ['ArrowLeft', 'ArrowRight', 'ArrowDown', 'ArrowUp'].includes(key);
+  };
+
+  const getRadioButtons = (radioGroup: ParentNode) => {
+    return Array.from(
+      radioGroup.querySelectorAll('[type="radio"]')
+    ) as HTMLInputElement[];
+  };
+
+  const getCurrentIndex = (
+    buttons: HTMLInputElement[],
+    currentButton: HTMLInputElement
+  ) => {
+    return buttons.findIndex((button) => button === currentButton);
+  };
+
+  const getNewIndex = (key: string, currentIndex: number, length: number) => {
+    switch (key) {
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        return (currentIndex - 1 + length) % length;
+      case 'ArrowRight':
+      case 'ArrowDown':
+        return (currentIndex + 1) % length;
+      default:
+        return currentIndex;
+    }
+  };
+
   const attributes = {
     name: props.groupName,
     key: props.key,
@@ -53,6 +109,7 @@ export const RadioButton: FunctionalComponent<RadioButtonProps> = (props) => {
 
   return (
     <input
+      onKeyDown={handleKeyDown}
       type="radio"
       onChange={(e) =>
         (e.currentTarget as HTMLInputElement).checked && props.onChecked?.()

packages/atomic/src/components/search/atomic-results-per-page/atomic-results-per-page.tsx

@@ -102,7 +102,7 @@ export class AtomicResultsPerPage implements InitializableComponent {
         hasItems={this.searchStatusState.hasResults}
         isAppLoaded={this.bindings.store.isAppLoaded()}
       >
-        <div class="flex items-center">
+        <div class="flex items-center" role="toolbar" aria-label={this.label}>
           <Label>{this.label}</Label>
           <FieldsetGroup label={this.label}>
             <Choices