question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Autocomplete] Accessibility error

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:15 (14 by maintainers)

github_iconTop GitHub Comments

1reaction
oliviertassinaricommented, Sep 24, 2020

@tylerjlawson Next release is Saturday.

1reaction
eps1loncommented, Sep 21, 2020

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found