Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TextField input isn't associated with an aria-label

See original GitHub issue

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When inspecting (inspect element) the input of a TextField (I’ve tried in Edge (chromium) and firefox) then going to the accessibility tab, you can see that the input itself isn’t associated with a label.

Expected Behavior 🤔

The input element for TextField component should have an aria-label property

Steps to Reproduce 🕹

Steps:

Create a TextField component
Using Inspect Element tool in devtools, inspect the TextField component’s input element.
Under the Accessibility tab, you will see the aria attributes that associated with the element.

Context 🔦

for better accessibility and also when testing using React-Testing-Library, we are able to use the getRoleBy("textbox", {name: "Some Label"}) function.

Your Environment 🌎

`npx @material-ui/envinfo`

  System:
    OS: Windows 10 10.0.19042
  Binaries:
    Node: 15.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - C:\Program Files\nodejs\yarn.CMD
    npm: 7.7.6 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (89.0.774.68)
    Firefox: Developer Edition 88
  npmPackages:
    @material-ui/core: ^4.11.3 => 4.11.3
    @material-ui/icons: ^4.11.2 => 4.11.2
    @material-ui/lab: ^4.0.0-alpha.57 => 4.0.0-alpha.57
    @material-ui/styles:  4.11.3
    @material-ui/system:  4.11.3
    @material-ui/types:  5.1.0
    @material-ui/utils:  4.11.2
    @types/react: ^17.0.3 => 17.0.3
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: ^4.2.3 => 4.2.3

Issue Analytics

State:
Created 2 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

3reactions

Rolfchencommented, Dec 11, 2021

In case anyone else is also having trouble with this (especially with getByRole from testing library). You need to provide an id to the TextField for the label to associate itself with the input.

Here’s the part of the doc that talks about accessibility: https://mui.com/components/text-fields/#accessibility

2reactions

support[bot]commented, Apr 10, 2021

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others. If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.