Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui][Autocomplete] The ARIA role 'combobox' is not valid for the input element #40616

Closed
soulbeing opened this issue Jan 15, 2024 · 2 comments
Assignees
Labels
accessibility a11y component: autocomplete This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material

Comments

@soulbeing
Copy link

soulbeing commented Jan 15, 2024

Steps to reproduce

Steps:

  1. first find in our current version 5.11.1, but also confirmed the issue is still there using the latest 5.15.4
  2. return (<Autocomplete
    disablePortal
    id="combo-box-demo"
    options={['The Godfather', 'Pulp Fiction']}
    sx={{ width: 300 }}
    renderInput={(params) => <TextField {...params} label="Movie" />}
    />)
    }
  3. you will see <input aria-invalid="false" autocomplete="off" id="combo-box-demo" type="text" class="MuiOutlinedInput-input MuiInputBase-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-nxo287-MuiInputBase-input-MuiOutlinedInput-input" aria-autocomplete="list" aria-expanded="false" autocapitalize="none" spellcheck="false" role="combobox" value="">

4: and it Level access accessibility tool will say "The ARIA role 'combobox' is not valid for the element "

Current behavior

The ARIA role 'combobox' is not valid for the element

Expected behavior

the combobox should in the wrapper of the input box, which should fix the problem.

Context

No response

Your environment

npx @mui/envinfo

System:
OS: macOS 14.2.1
Binaries:
Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
pnpm: Not Found
Browsers:
Chrome: 120.0.6099.216
Edge: 120.0.2210.133
Safari: 17.2.1
npmPackages:
@emotion/react: 11.10.5
@emotion/styled: 11.10.5
@mui/base: 5.0.0-alpha.111
@mui/core-downloads-tracker: 5.11.2
@mui/icons-material: 5.11.0
@mui/lab: 5.0.0-alpha.113
@mui/material: 5.11.1
@mui/private-theming: 5.11.2
@mui/styled-engine: 5.11.0
@mui/styles: 5.11.1
@mui/system: 5.11.2
@mui/types: 7.2.3
@mui/utils: 5.11.2
@mui/x-date-pickers: 5.0.11
@types/react: 18.0.27
react: 18.2.0
react-dom: 18.2.0
typescript: 4.9.4 => 4.9.4

Search keywords: accessibility, Autocomplete

@soulbeing soulbeing added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 15, 2024
@zannager zannager added the component: autocomplete This is the name of the generic UI component, not the React module! label Jan 15, 2024
@danilo-leal danilo-leal changed the title Autocomplete element violates this accessibility rule: The ARIA role 'combobox' is not valid for the element <input> [material-ui][Autocomplete] The ARIA role 'combobox' is not valid for the input element Jan 15, 2024
@danilo-leal danilo-leal added accessibility a11y package: material-ui Specific to @mui/material labels Jan 15, 2024
@ZeeshanTamboli
Copy link
Member

Which accessibility tool are you using?

@ZeeshanTamboli ZeeshanTamboli added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 24, 2024
@mj12albert
Copy link
Member

@soulbeing Thanks for reporting this – setting role="combobox" on the input is an ARIA 1.0 guideline, ARIA 1.1 does indeed recommend setting the role on the element containing the input instead

However the ARIA 1.2 combobox will return to the 1.0 pattern for the role (see this doc from the w3c/aria repo), and it's already reached recommendation status so I don't think we will implement 1.1

We do already have an issue to update Autocomplete to 1.2: #25365

I'll close this issue for now!

@mj12albert mj12albert removed the status: waiting for author Issue with insufficient information label Jan 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility a11y component: autocomplete This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material
Projects
None yet
Development

No branches or pull requests

5 participants