Button style for aria-diabled
Closed this issue · 2 comments
Is your feature request related to a problem? Please describe.
Disabled button styling is only applied for the disabled attribute.
Describe the solution you'd like
I wish that it was also applied for aria-disabled="true".
Additional context
While it is usually recommended to use native HTML attributes, the disabled attribute comes with some issues. One is that the element becomes not focusable. For a user using tab navigation this can be a problem, as when the button is disabled (i.e. during for submission), focus will jump to the next element in the tabindex, potentially disorienting the user. Imagine being asked to try again, but focus has changed away from the button!
Fabric React also seem to be using aria-disabled over the native attribute.
Naturally it would be up to each developer to prevent double submission on buttons with aria-disabled="true".
On a <button> aria-disabled is wrong because it defines a second time what is already accomplished by the disabled property, In addition to this aria should not be used to style elements.
First rule of aria - don't use aria
Just to clarify, yes the first rule of ARIA is to not use it when there is equivalent alternatives in HTML. In the case of disabled, they are not, especially when it comes to assistive technology. A button with the disabled attribute is not focusable and its label will not be announced by screen readers. ARIA disabled does not have these downsides.