search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.76k stars 1.09k forks source link

"aria-hidden" does not work on Button component #6548

Closed mpalmer685 closed 2 months ago

mpalmer685 commented 3 months ago

Provide a general summary of the issue here

Passing the aria-hidden prop to the Button component does not work as expected.

🤔 Expected Behavior?

Given <Button aria-hidden={true}>Do the thing</Button>, the HTML <button> element should have aria-hidden="true"

😯 Current Behavior

The aria-hidden attribute does not get applied.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

CodeSandbox

Version

react-aria-components@1.2.1

What browsers are you seeing the problem on?

Firefox

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

rostero1 commented 3 months ago

See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden

aria-hidden="true" should not be used on elements that can receive focus. Additionally, since this attribute is inherited by an element's children, it should not be added onto the parent or ancestor of a focusable element.

snowystinger commented 3 months ago

Can you tell us more about your usecase? @rostero1 is correct, in general it shouldn't be used on a button. Though I'd expand on it and say most of the time, even if it can't receive focus, it still shouldn't be hidden. As an example, look at our Combobox and NumberField, their in-field buttons are not included in the tab focus order, but they are not hidden so that Assitive Technology users can still interact with them.

If you can show us an example of what you're trying to accomplish, we may be able to provide some recommendations that hopefully don't involve aria-hidden.

marktnoonan commented 3 months ago

Assuming there is valid use case to remove the button from the accessibility tree but not from the DOM - the inert attribute might be the right choice?

Usually I find myself wanting aria-hidden in situations where something is behind a modal overlay or similarly intentionally not available.

snowystinger commented 2 months ago

You can always wrap the component in an inert element. You should be able to do the same with aria-hidden as well.

Our modals will take care of aria-hiding everything behind them for you without the need to pass props around everywhere.

I'm going to close this for now until a use case comes up.