[select] Stop using combobox element for labelling#48251
[select] Stop using combobox element for labelling#48251silviuaavram merged 2 commits intomui:masterfrom
Conversation
silviuaavram
added
accessibility
Netlify deploy previewhttps://deploy-preview-48251--material-ui.netlify.app/ Bundle size report
|
There was a problem hiding this comment.
Pull request overview
This PR updates the Material UI <Select /> accessibility labeling so the combobox element is no longer included in aria-labelledby, preventing screen readers from announcing the selected value twice.
Changes:
- Update
SelectInputto setaria-labelledbyfromlabelIdonly (no self-reference). - Revise accessibility tests to reflect the updated labeling behavior.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| packages/mui-material/src/Select/SelectInput.js | Stops including the combobox id in aria-labelledby, relying on labelId only. |
| packages/mui-material/src/Select/Select.test.js | Updates a11y tests around labeling with/without labelId to match the new behavior. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| aria-haspopup="listbox" | ||
| aria-label={ariaLabel} | ||
| aria-labelledby={[labelId, buttonId].filter(Boolean).join(' ') || undefined} | ||
| aria-labelledby={labelId} | ||
| aria-describedby={ariaDescribedby} | ||
| aria-required={required ? 'true' : undefined} |
There was a problem hiding this comment.
aria-labelledby={labelId} will still render an empty aria-labelledby attribute if labelId is an empty string. Previously, falsy values were filtered out. Consider using a falsy guard (e.g. labelId || undefined) so the attribute is omitted when labelId is empty/undefined, avoiding an invalid reference list.
mj12albert
removed
the
breaking change
mj12albert
left a comment
mj12albert
left a comment
There was a problem hiding this comment.
Since the existing accName was plain wrong, IMO this doesn't count as breaking ~
With the current
aria-labelledbyvalue, a Select with a selected value will be read like: value + label + value. The last 'value' comes from the fact thataria-labelledhas also the id of the combobox. Removing that will fix the double reading.There are some cases where adding multiple elements to
aria-labelledbymight work, like how React Aria does. But in their case, the other id works like a placeholder, which we don't support.