[input base] Place aria-label on the input element#48283
Merged
Conversation
silviuaavram
added
accessibility
Netlify deploy previewhttps://deploy-preview-48283--material-ui.netlify.app/ Bundle size report
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR fixes how aria-label is handled for components built on top of InputBase, ensuring the label is applied to the actual input element (and downstream components like SelectInput) rather than ending up on the outer wrapper.
Changes:
- Forward
aria-labelfromInputBaseprops to the innerInputslot (input element /inputComponent). - Add a regression test to ensure
InputBasereceives an accessible name/description fromaria-label/aria-describedby. - Add a regression test to ensure
Select’s combobox is labeled whenaria-labelis provided.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/mui-material/src/InputBase/InputBase.js | Extracts and forwards aria-label to the inner input slot instead of the wrapper. |
| packages/mui-material/src/InputBase/InputBase.test.js | Adds coverage for accessible name/description when aria-* props are provided. |
| packages/mui-material/src/Select/Select.test.js | Adds coverage ensuring Select combobox is labeled via aria-label. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
github-actions
Bot
added
the
PR: out-of-date
silviuaavram
force-pushed
the
fix/input-aria-label
branch
from
80a37d6 to
3564124
Compare
github-actions
Bot
removed
the
PR: out-of-date
Bundle size
Deploy previewhttps://deploy-preview-48283--material-ui.netlify.app/ Check out the code infra dashboard for more information about this PR. |
| expect(input).not.to.have.attribute('required'); | ||
| }); | ||
|
|
||
| it('should be aria-labelled and aria-describedby if props are provided', () => { |
Member
There was a problem hiding this comment.
Suggested change
| it('should be aria-labelled and aria-describedby if props are provided', () => { | |
| it('should apply both aria-label and aria-describedby when provided', () => { |
ZeeshanTamboli
approved these changes
Apr 14, 2026
Member
|
One comment: #48283 (comment). |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Noticed this issue while working on #48251.
The aria-label was not parsed from the props, and ended up on the input wrapper. It should be added on the input element instead.