You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
useLabel hook has this behaviour where if both label and aria-label are passed to it, both are eventually concatenated and exposed to the accessibility tree via aria-labelledby.
I also see that there are tests covering this exact behaviour.
So, I have no doubts that it was designed like this intentionally, but I wonder what is the actual use case behind it. The documentation for useLabel, useField or useTextField doesn't declare such interaction and it's not obvious why it would be the default.
I'm consuming @react-aria through @heroui/react. The component library passes label as both aria-label and label to useTextField, which then results in duplicated accessibility label like "Email Email". For example, here on their doc page: https://www.heroui.com/docs/components/input#usage
@react-aria does similar label concatenations for selects #3821. In that case, I understand the value of such behaviour, but I can't understand what concatenation of label and aria-label accomplishes for useTextField.
Anyway, I need someone to clarify and confirm that @react-aria does indeed behave as it should and it is the consumers that are not supposed to ever pass the same value as aria-label and label to useTextField. With that information, I'll be able to confidently work on a fix for this issue I encountered in the HeroUI itself.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
-
useLabelhook has this behaviour where if bothlabelandaria-labelare passed to it, both are eventually concatenated and exposed to the accessibility tree viaaria-labelledby.The relevant lines:
useLabelgenerateslabelIdand assigns it toariaLabelledby.https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/label/src/useLabel.ts#L50
The object with
ariaLabelledbyis passed touseLabels.https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/label/src/useLabel.ts#L59-L63
Both element's
idandariaLabelledbyare concatenated inuseLabels.https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/utils/src/useLabels.ts#L31-L33
I also see that there are tests covering this exact behaviour.
So, I have no doubts that it was designed like this intentionally, but I wonder what is the actual use case behind it. The documentation for
useLabel,useFieldoruseTextFielddoesn't declare such interaction and it's not obvious why it would be the default.I'm consuming

@react-ariathrough@heroui/react. The component library passeslabelas botharia-labelandlabeltouseTextField, which then results in duplicated accessibility label like "Email Email". For example, here on their doc page:https://www.heroui.com/docs/components/input#usage
@react-ariadoes similar label concatenations for selects #3821. In that case, I understand the value of such behaviour, but I can't understand what concatenation oflabelandaria-labelaccomplishes foruseTextField.Personally, I would expect
labelto be overridden byaria-label, at least if the standard accessible name calculation order was used as reference.Anyway, I need someone to clarify and confirm that
@react-ariadoes indeed behave as it should and it is the consumers that are not supposed to ever pass the same value asaria-labelandlabeltouseTextField. With that information, I'll be able to confidently work on a fix for this issue I encountered in the HeroUI itself.Beta Was this translation helpful? Give feedback.
All reactions