"aria-hidden" does not work on Button component

[mpalmer685]

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]

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]

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]

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.