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
-
useLabel
hook has this behaviour where if bothlabel
andaria-label
are passed to it, both are eventually concatenated and exposed to the accessibility tree viaaria-labelledby
.The relevant lines:
useLabel
generateslabelId
and assigns it toariaLabelledby
.https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/label/src/useLabel.ts#L50
The object with
ariaLabelledby
is passed touseLabels
.https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/label/src/useLabel.ts#L59-L63
Both element's
id
andariaLabelledby
are 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
,useField
oruseTextField
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 passeslabel
as botharia-label
andlabel
touseTextField
, 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 oflabel
andaria-label
accomplishes foruseTextField
.Personally, I would expect
label
to 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-aria
does indeed behave as it should and it is the consumers that are not supposed to ever pass the same value asaria-label
andlabel
touseTextField
. 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