Description
Is there an existing issue for this?
- I have searched the existing issues
Describe the issue
It is currently impossible to create a HTML button like this: <button aria-disabled="true">click me</button>. Given the following snippet of JSX, where we create two buttons. One explicitly marked as disabled and another one marked as aria-disabled.
<Pressable onPress={() => alert('hello')} disabled>
<Text>Click me!</Text>
</Pressable>
<Pressable onPress={() => alert('hello')} aria-disabled>
<Text>Click me!</Text>
</Pressable>
When executing this on a native platform, like the iOS simulator, both buttons are marked with the trait "Not Enabled" when inspecting them with the Accessibility Inspector. When clicking the first button no alert is triggered, when clicking the second button the onPress function is executed and thus an alert is triggered.
While the behavior in a browser is the same, the DOM output does not reflect this. The aria-disabled attributed is stripped away completely. The snippet below shows the output.
<button aria-disabled="true" disabled="" role="button" tabindex="-1" class="..." type="button">
<div dir="auto" class="css-text-146c3p1">Click me!</div>
</button>
<button role="button" tabindex="0" class="..." type="button">
<div dir="auto" class="css-text-146c3p1">Click me!</div>
</button>
Expected behavior
On the web-version the aria-disabled attribute should be maintained. However this does not mean that the button should have the property disabled as well. For accessibility reasons it is common practice to only mark the button as disabled with the aria-disabled attribute. This allows a user to still being able to focus the button, additionally click it, and have feedback from the screenreader about the action. When adding the disabled button, most screenreader do not allow to focus the button anymore.
Steps to reproduce
The supplied snippets should be sufficient.
Test case
https://codesandbox.io/p/sandbox/gracious-matan-3vhxly
Additional comments
No response