material-ui: [Autocomplete] Accessibility error
As of @material-ui/lab v4.0.0-alpha.52 the Autocomplete component fails jest a11y tests when the input field is filled. From some mild debugging I found that after the input field has been populated this aria attribute is added:
aria-controls="mui-12209-popup"
the id on this input element is
id="mui-12209"
This seems like a mismatched aria attribute?
- The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate.
Current Behavior 😯
Fails jest tests due to an a11y issue with a mismatched aria attribute after the input field is filled.
Expected Behavior 🤔
Remains accessible when input field has been populated.
Steps to Reproduce 🕹
Steps:
- put a data-testid on the input field via input props
<Autocomplete<string>
inputValue={props.searchInput}
onInputChange={handleOnSearchInputChange}
openOnFocus
freeSolo
disableClearable
options={props.searchOptions}
renderInput={params => (
<TextField
{...params}
variant='outlined'
placeholder={props.searchPlaceholder}
inputProps={{
...params.inputProps,
'aria-label': 'search input',
'data-testid': 'autocomplete-input'
}}
/>
)}
/>
- change the input in jest
const input = utils.getByTestId('autocomplete-input');
fireEvent.change(input, { target: { value: 'my doctor' } });
- test for a11y
expect(await axe(input)).toHaveNoViolations();
Context 🔦
I am simply trying to test a11y when the autocomplete input has been filled
Your Environment 🌎
| Tech | Version |
|---|---|
| Material-UI core | v4.11.0 |
| Material-UI lab | v4.0.0-alpha.52 |
| React | 16.13.1 |
| Browser | jest |
| TypeScript | 3.9.7 |
note: Issue began on v4.0.0-alpha.52. v4.0.0-alpha.51 passes a11y as expected.
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 2
- Comments: 15 (14 by maintainers)
Commits related to this issue
- [Autocomplete] Fix accessibility issue with empty option set I also added a sanity test for filtering without error on an empty option set fix #22302 — committed to tylerlaws0n/material-ui by tylerlaws0n 4 years ago
@tylerjlawson Next release is Saturday.
Very likely to report a lot of false positives. The goal is to fix a11y issues and not to provide axe integration. We could probably fix more actual a11y issues with the time spent on fixing integration issues with 3rd party testing tools.