Skip to content

[select] Stop using combobox element for labelling #48251

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.

Sign up for GitHub

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

Merged
silviuaavram merged 2 commits into from
Apr 14, 2026
+17 −39
Merged

[select] Stop using combobox element for labelling #48251

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a609988
[select] Stop using combobox element for labelling
silviuaavram Apr 9, 2026
4b528c5
slight improve for test
silviuaavram Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 16 additions & 38 deletions packages/mui-material/src/Select/Select.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -727,56 +727,34 @@ describe('<Select />', () => {
});
});

it('will fallback to its content for the accessible name when it has no name', () => {
render(<Select value="" />);

// TODO what is the accessible name actually?
expect(screen.getByRole('combobox')).not.to.have.attribute('aria-labelledby');
});

it('is labelled by itself when it has a name', () => {
render(<Select name="select" value="" />);

expect(screen.getByRole('combobox')).to.have.attribute(
'aria-labelledby',
screen.getByRole('combobox').getAttribute('id'),
);
});

it('is labelled by itself when it has an id which is preferred over name', () => {
it('will be labelled by its visible value when it has no label', () => {
render(
<React.Fragment>
<span id="select-1-label">Chose first option:</span>
<Select id="select-1" labelId="select-1-label" name="select" value="" />
<span id="select-2-label">Chose second option:</span>
<Select id="select-2" labelId="select-2-label" name="select" value="" />
</React.Fragment>,
<Select value="the value">
<MenuItem value="the value">Option 1</MenuItem>
</Select>,
);

const triggers = screen.getAllByRole('combobox');
const combobox = screen.getByRole('combobox');

expect(triggers[0]).to.have.attribute(
'aria-labelledby',
`select-1-label ${triggers[0].getAttribute('id')}`,
);
expect(triggers[1]).to.have.attribute(
'aria-labelledby',
`select-2-label ${triggers[1].getAttribute('id')}`,
);
expect(combobox).not.to.have.attribute('aria-labelledby');
expect(combobox).to.have.text('Option 1');
});

it('can be labelled by an additional element if its id is provided in `labelId`', () => {
it('will be labelled by an additional element if its id is provided in `labelId`', () => {
render(
<React.Fragment>
<span id="select-label">Choose one:</span>
<Select labelId="select-label" name="select" value="" />
<Select value="the value" labelId="select-label">
<MenuItem value="the value">Option 1</MenuItem>
</Select>
</React.Fragment>,
);

expect(screen.getByRole('combobox')).to.have.attribute(
'aria-labelledby',
`select-label ${screen.getByRole('combobox').getAttribute('id')}`,
);
const combobox = screen.getByRole('combobox');

expect(combobox).to.have.attribute('aria-labelledby', 'select-label');
expect(combobox).toHaveAccessibleName('Choose one:');
expect(combobox).to.have.text('Option 1');
Comment thread
silviuaavram marked this conversation as resolved.
});

it('the list of options is not labelled by default', () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/Select/SelectInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -524,7 +524,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
aria-expanded={open ? 'true' : 'false'}
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}
Comment on lines 525 to 529
Copy link

Copilot AI Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
aria-invalid={error ? 'true' : undefined}
Expand Down
Loading