Skip to content

[TextField] Can required prop add HTML required="" and aria-required="true" attributes #48742

Description

@scottrippon-nbn

For the TextField component when the standard required prop is added could the HTML required="" and aria-required="true" attributes please be added to the input field? As per the current example only the HTML required="" attribute is added to the HTML.
https://mui.com/material-ui/react-text-field/#form-props

<TextField
          required
          id="outlined-required"
          label="Required"
          defaultValue="Hello World"
/>

Current HTML output:

<input aria-invalid="false" id="outlined-required" required="" class="MuiInputBase-input MuiOutlinedInput-input css-uzaonk" type="text" value="Hello World">

Proposed HTML output:

<input aria-invalid="false" id="outlined-required" required="" aria-required="true" class="MuiInputBase-input MuiOutlinedInput-input css-uzaonk" type="text" value="Hello World">

This will improve the accessibility of required TextFields for users using screen readers.
Will also help pass this W3C Web Content Accessibility Guidelines (WCAG2.2) advisory technique: ARIA2: Identifying a required field with the aria-required property.

Search keywords:

Metadata

Metadata

Assignees

No one assigned

    Labels

    scope: text fieldChanges related to the text field.support: questionCommunity support but can be turned into an improvement.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions