search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.02k stars 32.3k forks source link

[material-ui][Select] Aria-controls references invalid id when not expanded #43876

Open siddhantantil39 opened 1 month ago

siddhantantil39 commented 1 month ago

Steps to reproduce

Aria-controls references invalid id when not expanded mui select component select-error

Link to live example: (required) Go to: https://mui.com/material-ui/react-select/

Steps:

  1. Download ARC Toolkit: https://chromewebstore.google.com/detail/arc-toolkit/chdkkkccnlfncngelccgbgfmjebmkmce?hl=en and install it
  2. Expand Inspect and select ARC Toolkit and Run tests on https://mui.com/material-ui/react-select/
  3. Look into the error for "ARIA attribute value is incorrect Description: The value :R9alal9h9l6kud6: is not allowed on the aria-controls attribute(s)."

It is also observed using access-assistant also.

PFA the ARC snapshot:

Current behavior

ARIA attribute value is incorrect is observed on the select component upon ADA Testing using automation tools such as ARC.

Expected behavior

Aria-control should refer to the id of the menu-item, in non-expanded state also.

Context

No response

Your environment

No response

Search keywords: select

DiegoAndai commented 1 month ago

Thanks for the report @siddhantantil39!

@michaldudak, do you know what's the behaviour on Base UI's Select regarding this?

michaldudak commented 1 month ago

AFAIR @mui/base did not place the aria-controls attribute when its target doesn't exist. @atomiks, how does the new implementation handle this case?

atomiks commented 1 month ago

@michaldudak yes, aria-controls is not added to the trigger unless the popup is in the open state

DiegoAndai commented 1 month ago

@michaldudak @atomiks, thanks. This means this will be fixed when we refactor Material UI's Select on top of Base UI's. This is one of the next projects we'll take on soon.

hspotorno commented 2 weeks ago

Hi @DiegoAndai, I'm also having this issue and I'm wondering if this wouldn't just be a matter of doing a similar change than the one from https://github.com/mui/material-ui/pull/30378/files?

Something like aria-controls={listboxId} -> aria-controls={open ? listboxId : ''} on SelectInput.js.