[docs] Make NumberField described by helper text#48257
Conversation
silviuaavram
added
docs
Netlify deploy previewhttps://deploy-preview-48257--material-ui.netlify.app/ Bundle size report
|
There was a problem hiding this comment.
Pull request overview
Improves accessibility for the Number Field docs example by associating the input with its helper text via aria-describedby, so assistive technologies can announce the helper text alongside the field.
Changes:
- Add
aria-describedbyon the TSX NumberField example input, pointing to helper text. - Add an
idto the helper text element in both TSX and JS examples.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| docs/data/material/components/number-field/components/NumberField.tsx | Adds aria-describedby on the input and an id on helper text to link them. |
| docs/data/material/components/number-field/components/NumberField.js | Adds helper text id, but currently lacks the matching aria-describedby on the input. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| )} | ||
| /> | ||
| <FormHelperText sx={{ ml: 0, '&:empty': { mt: 0 } }}> | ||
| <FormHelperText id={`${id}-helper-text`} sx={{ ml: 0, '&:empty': { mt: 0 } }}> |
There was a problem hiding this comment.
This file now assigns an id to the FormHelperText, but the input itself is still missing the corresponding aria-describedby attribute, so the helper text won’t be announced/associated by assistive tech in the JS example. Please add the same aria-describedby={${id}-helper-text} wiring to the OutlinedInput (as done in the TSX version) to fully achieve the PR’s goal.
Uh oh!
There was an error while loading. Please reload this page.