Skip to content

Commit

Permalink
feat: Dropdown and TextFeild accessibility improvements (#1898)
Browse files Browse the repository at this point in the history
  • Loading branch information
@or-nuri-monday
or-nuri-monday authored Apr 15, 2024
1 parent e395bc1 commit de99f06
Show file tree
Hide file tree
Showing 9 changed files with 253 additions and 66 deletions.
48 changes: 32 additions & 16 deletions ...core/src/components/Combobox/__tests__/__snapshots__/combobox-snapshot-tests.jest.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,10 @@ exports[`Combobox renders correctly when disabled 1`] = `
>
<input
aria-activedescendant=""
aria-invalid={null}
aria-invalid={false}
aria-label="Search for content"
aria-owns=""
aria-required={false}
autoComplete="off"
className="comboboxSearch search input inputHasIcon"
data-testid="search_combobox-search"
Expand Down Expand Up @@ -148,9 +149,10 @@ exports[`Combobox renders correctly with another noResultsMessage 1`] = `
>
<input
aria-activedescendant=""
aria-invalid={null}
aria-invalid={false}
aria-label="Search for content"
aria-owns=""
aria-required={false}
autoComplete="off"
className="comboboxSearch search input inputHasIcon"
data-testid="search_combobox-search"
Expand Down Expand Up @@ -268,9 +270,10 @@ exports[`Combobox renders correctly with autoFocus 1`] = `
>
<input
aria-activedescendant=""
aria-invalid={null}
aria-invalid={false}
aria-label="Search for content"
aria-owns=""
aria-required={false}
autoComplete="off"
className="comboboxSearch search input inputHasIcon"
data-testid="search_combobox-search"
Expand Down Expand Up @@ -388,9 +391,10 @@ exports[`Combobox renders correctly with className 1`] = `
>
<input
aria-activedescendant=""
aria-invalid={null}
aria-invalid={false}
aria-label="Search for content"
aria-owns=""
aria-required={false}
autoComplete="off"
className="comboboxSearch search input inputHasIcon"
data-testid="search_combobox-search"
Expand Down Expand Up @@ -508,9 +512,10 @@ exports[`Combobox renders correctly with custom search icon 1`] = `
>
<input
aria-activedescendant=""
aria-invalid={null}
aria-invalid={false}
aria-label="Search for content"
aria-owns=""
aria-required={false}
autoComplete="off"
className="comboboxSearch search input inputHasIcon"
data-testid="search_combobox-search"
Expand Down Expand Up @@ -628,9 +633,10 @@ exports[`Combobox renders correctly with divider 1`] = `
>
<input
aria-activedescendant=""
aria-invalid={null}
aria-invalid={false}
aria-label="Search for content"
aria-owns=""
aria-required={false}
autoComplete="off"
className="comboboxSearch search input inputHasIcon"
data-testid="search_combobox-search"
Expand Down Expand Up @@ -846,9 +852,10 @@ exports[`Combobox renders correctly with divider and colored categories 1`] = `
>
<input
aria-activedescendant=""
aria-invalid={null}
aria-invalid={false}
aria-label="Search for content"
aria-owns=""
aria-required={false}
autoComplete="off"
className="comboboxSearch search input inputHasIcon"
data-testid="search_combobox-search"
Expand Down Expand Up @@ -1074,9 +1081,10 @@ exports[`Combobox renders correctly with empty props 1`] = `
>
<input
aria-activedescendant=""
aria-invalid={null}
aria-invalid={false}
aria-label="Search for content"
aria-owns=""
aria-required={false}
autoComplete="off"
className="comboboxSearch search input inputHasIcon"
data-testid="search_combobox-search"
Expand Down Expand Up @@ -1194,9 +1202,10 @@ exports[`Combobox renders correctly with id 1`] = `
>
<input
aria-activedescendant=""
aria-invalid={null}
aria-invalid={false}
aria-label="Search for content"
aria-owns=""
aria-required={false}
autoComplete="off"
className="comboboxSearch search input inputHasIcon"
data-testid="search_combobox-search"
Expand Down Expand Up @@ -1314,9 +1323,10 @@ exports[`Combobox renders correctly with loading 1`] = `
>
<input
aria-activedescendant=""
aria-invalid={null}
aria-invalid={false}
aria-label="Search for content"
aria-owns=""
aria-required={false}
autoComplete="off"
className="comboboxSearch search input inputHasIcon"
data-testid="search_combobox-search"
Expand Down Expand Up @@ -1463,9 +1473,10 @@ exports[`Combobox renders correctly with optionClassName 1`] = `
>
<input
aria-activedescendant=""
aria-invalid={null}
aria-invalid={false}
aria-label="Search for content"
aria-owns=""
aria-required={false}
autoComplete="off"
className="comboboxSearch search input inputHasIcon"
data-testid="search_combobox-search"
Expand Down Expand Up @@ -1583,9 +1594,10 @@ exports[`Combobox renders correctly with optionLineHeight 1`] = `
>
<input
aria-activedescendant=""
aria-invalid={null}
aria-invalid={false}
aria-label="Search for content"
aria-owns=""
aria-required={false}
autoComplete="off"
className="comboboxSearch search input inputHasIcon"
data-testid="search_combobox-search"
Expand Down Expand Up @@ -1703,9 +1715,10 @@ exports[`Combobox renders correctly with optionRenderer 1`] = `
>
<input
aria-activedescendant=""
aria-invalid={null}
aria-invalid={false}
aria-label="Search for content"
aria-owns=""
aria-required={false}
autoComplete="off"
className="comboboxSearch search input inputHasIcon"
data-testid="search_combobox-search"
Expand Down Expand Up @@ -1876,9 +1889,10 @@ exports[`Combobox renders correctly with optionsListHeight 1`] = `
>
<input
aria-activedescendant=""
aria-invalid={null}
aria-invalid={false}
aria-label="Search for content"
aria-owns=""
aria-required={false}
autoComplete="off"
className="comboboxSearch search input inputHasIcon"
data-testid="search_combobox-search"
Expand Down Expand Up @@ -1996,9 +2010,10 @@ exports[`Combobox renders correctly with placeholder 1`] = `
>
<input
aria-activedescendant=""
aria-invalid={null}
aria-invalid={false}
aria-label="Search for content"
aria-owns=""
aria-required={false}
autoComplete="off"
className="comboboxSearch search input inputHasIcon"
data-testid="search_combobox-search"
Expand Down Expand Up @@ -2116,9 +2131,10 @@ exports[`Combobox renders correctly with size 1`] = `
>
<input
aria-activedescendant=""
aria-invalid={null}
aria-invalid={false}
aria-label="Search for content"
aria-owns=""
aria-required={false}
autoComplete="off"
className="comboboxSearch search input inputHasIcon"
data-testid="search_combobox-search"
Expand Down
33 changes: 30 additions & 3 deletions packages/core/src/components/Dropdown/Dropdown.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import {
defaultCustomStyles,
DROPDOWN_CHIP_COLORS,
DROPDOWN_ID,
DROPDOWN_MENU_ID,
DROPDOWN_MENU_ARIA_LABEL,
DROPDOWN_MENU_PLACEMENT,
DROPDOWN_MENU_POSITION
} from "./DropdownConstants";
Expand Down Expand Up @@ -69,6 +71,8 @@ const Dropdown = forwardRef(
menuIsOpen,
tabIndex,
id,
menuId,
menuAriaLabel,
autoFocus,
multi = false,
multiline = false,
Expand Down Expand Up @@ -178,9 +182,15 @@ const Dropdown = forwardRef(

const Menu = useCallback(
props => (
<MenuComponent {...props} Renderer={menuRenderer} dropdownMenuWrapperClassName={dropdownMenuWrapperClassName} />
<MenuComponent
{...props}
id={menuId}
ariaLabel={menuAriaLabel}
Renderer={menuRenderer}
dropdownMenuWrapperClassName={dropdownMenuWrapperClassName}
/>
),
[dropdownMenuWrapperClassName, menuRenderer]
[dropdownMenuWrapperClassName, menuRenderer, menuId, menuAriaLabel]
);

const DropdownIndicator = useCallback(props => <DropdownIndicatorComponent {...props} size={size} />, [size]);
Expand All @@ -192,7 +202,10 @@ const Dropdown = forwardRef(
[finalOptionRenderer, optionWrapperClassName]
);

const Input = useCallback(props => <components.Input {...props} aria-label="Dropdown input" />, []);
const Input = useCallback(
props => <components.Input {...props} aria-label="Dropdown input" aria-controls={menuId} />,
[menuId]
);

const SingleValue = useCallback(
props => (
Expand Down Expand Up @@ -334,6 +347,10 @@ const Dropdown = forwardRef(
aria-readonly={readOnly}
aria-label={overrideAriaLabel}
aria-details={tooltipContent}
aria-expanded={!readOnly && menuIsOpen}
aria-haspopup="listbox"
aria-activedescendant
role="combobox"
defaultValue={defaultValue}
value={value}
onMenuOpen={onMenuOpen}
Expand Down Expand Up @@ -406,6 +423,8 @@ Dropdown.defaultProps = {
tabIndex: "0",
onOptionRemove: undefined,
id: DROPDOWN_ID,
menuId: DROPDOWN_MENU_ID,
menuAriaLabel: DROPDOWN_MENU_ARIA_LABEL,
autoFocus: false,
closeMenuOnSelect: undefined,
closeMenuOnScroll: false,
Expand Down Expand Up @@ -599,6 +618,14 @@ Dropdown.propTypes = {
* ID for the select container
*/
id: PropTypes.string,
/**
* ID for the menu container
*/
menuId: PropTypes.string,
/**
* aria-label attribute for the menu container
*/
menuAriaLabel: PropTypes.string,
/**
* focusAuto when component mount
*/
Expand Down
2 changes: 2 additions & 0 deletions packages/core/src/components/Dropdown/DropdownConstants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ export const defaultCustomStyles = baseStyles => baseStyles;
export const ADD_AUTO_HEIGHT_COMPONENTS = ["container", "control", "valueContainer"];

export const DROPDOWN_ID = "dropdown-menu-id";
export const DROPDOWN_MENU_ID = "dropdown-menu-list-id";
export const DROPDOWN_MENU_ARIA_LABEL = "Dropdown menu";

export const DROPDOWN_CHIP_COLORS = {
PRIMARY: "PRIMARY",
Expand Down
Loading

0 comments on commit de99f06

Please sign in to comment.