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:

  1. 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'
       }}
      />
  )}
/>
  1. change the input in jest
const input = utils.getByTestId('autocomplete-input');
fireEvent.change(input, { target: { value: 'my doctor' } });
  1. 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

Most upvoted comments

@tylerjlawson Next release is Saturday.

On a broader note, I wonder if it would make sense to run axe along with the describe conformance steps.

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.