useTextField: Why does it have both id and aria-labelledby attributes?

[sandrina-p]

Hi there,

While reading the useTextField docs, it says:

Text fields consist of an input element and a label. useTextField automatically manages the relationship between the two elements using the for attribute on the <label> element and the aria-labelledby attribute on the element.

Considering a normal input (with a visible label), why do we need both for and aria-labelledby attributes? Check the screenshot blow:

In the Accessibility tree (and using Voice Over as Screen Reader), it seems like for is enough to provide a name to the input.

So my 1st question: Is there any special case / exception where for is not enough / not supported?

Additionally, I noticed you use both jest and react-testing-library to test your components, so may I ask a 2º question?
When testing a label/input on my app using only for, the test fails with the following error:

TestingLibraryElementError: Found a label with the text of: ID number, however the element associated with this label (<input /> in non-labellable. If you really need to label a <input />, you can use aria-label or aria-labellledby instead.

I wonder... is this error happening for the reason you use both attributes?

Thank you 🙇

[snowystinger]

Hey, so I don't believe we "need" both. However, it doesn't hurt anything that I'm aware of, and it allows us to use the same code to label both inputs and non-inputs. It might be an error in RTL/Jest because of NVDA or TalkBack, which I don't have access to right now to verify. Is it causing any issues for you?

[sandrina-p]

@snowystinger, that flexibility for both scenarios seems handy, gotcha. Regarding the testing error, I had to use both attributes to fix it. If one day I come back there and find another solution, I'll let you know.

[snowystinger]

I'm not quite sure I follow what you mean that you had to use both attributes? Did you not have everything required in the objects returned by our hooks? or have we missed making something required to be passed in?

[sandrina-p]

Oh, I'm not using react-aria on my project, forgive me for not being clear about that. I'm just using plain React and noticed that error. While searching on the web about why it happens, and looking at other A11Y tools, I noticed that you folks use both attributes. That's why I asked it here.

So far, my understanding is that:

• my HTML is correct (which only uses for)
• For some unknown reason, it's an error in RTL/Jest validating the HTML.
• react-aria uses both attributes for "convenience": it supports multiple cases out of the box.