[Autocomplete] Accessibility error
See original GitHub issueAs 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.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:2
- Comments:15 (14 by maintainers)
Top Results From Across the Web
[Autocomplete] Accessibility error #22302 - mui/material-ui
Fails jest tests due to an a11y issue with a mismatched aria attribute after the input field is filled. Expected Behavior. Remains accessible ......
Read more >F107: Failure of Success Criterion 1.3.5 due to incorrect ... - W3C
The purpose of this technique is to identify a failure condition where form inputs do not have the correct autocomplete attribute values for...
Read more >aria-autocomplete - Accessibility - MDN Web Docs - Mozilla
The aria-autocomplete attribute indicates whether inputting text could trigger display of one or more predictions of the user's intended ...
Read more >Autocomplete attribute must be used correctly | Axe Rules
Confirm that the autocomplete attribute is set with the appropriate value to identify the purpose of that UI component. Why it Matters. Failure...
Read more >Issues for Accessible Autocomplete | Drupal.org
Title Status Priority Category
Allow for an empty seach Needs review Normal Feature request
"exports" in package.json should be relative path Closed (fixed) Normal Bug...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@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.