search

n8design / htwoo

hTWOo - a better Fluent UI framework.
http://my.n8d.at/hTWOo
MIT License
91 stars 9 forks source link

Button style for aria-diabled #121

Closed gabbsmo closed 3 months ago

gabbsmo commented 4 months ago

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".

StfBauer commented 3 months ago

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

gabbsmo commented 3 months ago

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.