feat: add a11y props for search and combobox components (#2105)

mondaycom · May 6, 2024 · b564e1b · b564e1b
1 parent 4425821
commit b564e1b
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 43 deletions.
diff --git a/packages/core/src/components/Combobox/Combobox.tsx b/packages/core/src/components/Combobox/Combobox.tsx
@@ -17,7 +17,12 @@ import { StickyCategoryHeader } from "./components/StickyCategoryHeader/StickyCa
 import { useItemsData, useKeyboardNavigation } from "./ComboboxHelpers/ComboboxHelpers";
 import { getOptionId } from "./helpers";
 import { ElementContent, SubIcon, VibeComponentProps, withStaticProps } from "../../types";
-import { IComboboxCategoryMap, IComboboxItem, IComboboxOption } from "./components/ComboboxConstants";
+import {
+  IComboboxCategoryMap,
+  IComboboxItem,
+  IComboboxOption,
+  COMBOBOX_LISTBOX_ID
+} from "./components/ComboboxConstants";
 import styles from "./Combobox.module.scss";
 
 export interface ComboboxProps extends VibeComponentProps {
@@ -282,7 +287,7 @@ const Combobox: React.FC<ComboboxProps> & {
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.COMBOBOX, id)}
         ellipsis={false}
       >
-        <div className={styles.comboboxList} style={{ maxHeight: optionsListHeight }} role="listbox">
+        <div className={styles.comboboxList} style={{ maxHeight: optionsListHeight }}>
           <Search
             ref={inputRef}
             value={filterValue}
@@ -297,6 +302,9 @@ const Combobox: React.FC<ComboboxProps> & {
             autoFocus={autoFocus}
             loading={loading}
             searchIconName={searchIcon}
+            ariaExpanded={hasFilter || hasResults}
+            ariaHasPopup="listbox"
+            searchResultsContainerId={id ? `${id}-listbox` : COMBOBOX_LISTBOX_ID}
           />
           {stickyCategories && <StickyCategoryHeader label={activeCategoryLabel} />}
           <ComboboxItems
@@ -316,6 +324,7 @@ const Combobox: React.FC<ComboboxProps> & {
             renderOnlyVisibleOptions={renderOnlyVisibleOptions}
             maxOptionsWithoutScroll={maxOptionsWithoutScroll}
             visualFocusItemIndex={visualFocusItemIndex}
+            id={id ? `${id}-listbox` : COMBOBOX_LISTBOX_ID}
           />
         </div>
         {hasFilter && !hasResults && !loading && renderNoResults()}