Add appropriate roles to option and listbox elements #5625
Conversation
|
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
There was a problem hiding this comment.
I couldn't use getByRole with react-testing-library to target the option-equivalent elements.
I ran into this same exact problem.
As work-around, these roles can be added using components prop. It would be great to have these set by default as this PR does.
import ReactSelect, { type OptionProps, type MenuListProps, components } from 'react-select';
export default function Select() {
return (
<ReactSelect components={{Option, MenuList}} />
)
}
function Option({innerProps, isSelected, ...props}: OptionProps) {
return (
<components.Option
{...props}
isSelected={isSelected}
innerProps={{...innerProps, role: 'option', 'aria-selected': isSelected}}
/>
);
}
function MenuList({innerProps, ...props}: MenuListProps) {
return (
<components.MenuList {...props} innerProps={{...innerProps, role: 'listbox'}} />
);
}
|
@AriPerkkio |
This pull request aims to improve the accessibility of react-select by adding appropriate roles to the option and listbox elements.
Changes:
optionrole andaria-selectedto the option-equivalent elementslistboxrole to the listbox-equivalent elementsI noticed that while using react-select in my own project, I couldn't use getByRole with react-testing-library to target the option-equivalent elements. This led me to create this PR to address the issue.
By merging this PR, we can make react-select more accessible and provide a better experience for users with assistive technologies. Please let me know if any further changes or tests are needed. I look forward to contributing to this project and making it more inclusive for all users.