useCombobox with menu-trigger=focus and aria-labelledby shouldn't apply aria-hidden to the label element #8768
Description
Provide a general summary of the issue here
When the combobox popover opens, everything else on the page has aria-hidden applied to it to, to make sure it's ignored by screenreaders. However, when using aria-labelledby on the combobox input element, combined with menuTrigger=focus, this means that the name of the input isn't announced to screenreaders because the popover opens instantly and the label is aria-hidden.
🤔 Expected Behavior?
If there is an aria-labelledby, elements with those ids do not have aria-hidden applied
😯 Current Behavior
aria-hidden is applied to all elements, including the label element, resulting in the input element no longer being labelled.
💁 Possible Solution
We want to be able to use this component alongside our FormField component which has a separate label element instead of requiring aria-label.
One possible solution is to update the call to ariaHideOutside to include the labelRef element in the target array if one exists: https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/combobox/src/useComboBox.ts#L343
🔦 Context
This is an accessibility violation
🖥️ Steps to Reproduce
https://codesandbox.io/p/sandbox/hardcore-moon-xzc4r
(I'm having technical difficulties getting codesandbox to save my changes, but this JSX in app.tsx will do it)
<div className="flex flex-col items-center max-w-lg">
{/* prettier-ignore */}
<p className="mt-8 mb-16 text-gray-600">This sandbox shows examples of <strong><code>ComboBox</code></strong>, <strong><code>Select</code></strong>, and <strong><code>SearchAutocomplete</code></strong> components built with <a href="https://react-spectrum.adobe.com/react-aria/" rel="noreferrer" target="_blank" className="text-blue-700 underline">React Aria</a> and <a href="http://tailwindcss.com/" rel="noreferrer" target="_blank" className="text-blue-700 underline">Tailwind CSS</a>. They all share the same <code>Popover</code> and <code>ListBox</code> components, which are used to show their options.</p>
<label id="combobox-label">Favorite Animal</label>
<ComboBox aria-labelledby="combobox-label" menuTrigger="focus">
<Item key="red panda">Red Panda</Item>
<Item key="cat">Cat</Item>
<Item key="dog">Dog</Item>
<Item key="aardvark">Aardvark</Item>
<Item key="kangaroo">Kangaroo</Item>
<Item key="snake">Snake</Item>
</ComboBox>
</div>
Notice that when focus is applied to the input the popover opens and applies aria-hidden to the associated label
Version
3.21.0
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
OSX
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response