ENG-2381 [BUG] - Accessible label for Input component is duplicated

This issue originally came up when I was trying to select the input with a getByLabelText selector from react-testing-library.

I have identified that the input is rendered with aria-labelledby="react-aria-:r13: react-aria-:r14:". react-aria-:r13: points to the input element itself and react-aria-:r14: points to the label. The browsers, following the standard, then concatenate the two labels and expose the result to accessibility tree.

I found that if "aria-label" key is not passed to useTextField from @react-aria/textfield, the duplication does not occur.

I believe that passing both label and aria-label to react-aria results in both somehow being represented in aria-labelledby.

There is this part of useLabel in react-aria that does some sort of concatenation https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/label/src/useLabel.ts#L50. It doesn't even look like the exact concatenation that I've reported, but the tests for the hook assert the concatenation of label and aria-label.

Ok, I figured it out.

useLabel generates labelId and assigns it to ariaLabelledby.
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/label/src/useLabel.ts#L50

The object with ariaLabelledby is passed to useLabels.
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/label/src/useLabel.ts#L59-L63

Both element's id and ariaLabelledby are concatenated in useLabels.
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/utils/src/useLabels.ts#L31-L33

It seems wrong even though the tests indicate that this behaviour is intentional.

I'll create an issue there at react-spectrum to get clarification on whether this is indeed intentional.

Started a discussion on the react-spectrum repo to get some clarity on the matter.
adobe/react-spectrum#8037