primer
Apply 'disabled' styling when `aria-disabled` is set on a `Button` or `IconButton`
In many cases it's not desirable to fully disable a button control because it can make that button difficult for some users to locate. A disabled button is not focusable and doesn't respond to interaction at all, and it doesn't have any indication of why it's disabled.
While it's generally preferable to just avoid disabling buttons and rely on alternative methods instead, in some cases it may be preferable to use aria-disabled along with CSS styling to disable a button. This is particularly useful in tandem with a tooltip that appears on focus (this tooltip would be inaccessible on a disabled button).
As a component library we should make accessible practices as easy as possible. So I think we shouldn't force consumers to build custom CSS styles in order to use this approach - we should make using aria-disabled as easy as disabled. With that in mind, I propose that aria-disabled should, by default, have the same styling as disabled buttons.
I've focused on buttons here but this actually probably applies to all interactive components that can be disabled.
@langermank Should we split https://github.com/primer/react/issues/3991 into 2 parts to address this issue?
Should we split https://github.com/primer/react/issues/3991 into 2 parts to address this issue?
Looks like a mistaken copy/paste there - #3991 is this issue 🔄
Thanks for bringing this up!
I believe it's likely design will agree with this proposal as I think this is already supported in PVC, but would appreciate confirmation from the Primer Patterns group before prioritizing 🙏 . Adding to that queue now.
I believe it's likely design will agree with this proposal as I think this is already supported in PVC
This is in fact what PVC (and PCSS) currently do. I agree with this proposal.
Adding this to next week's Primer patterns session to get opinions from other systems and a11y designers.
@lesliecdubs - if the group agrees with this change, it would fit great in this PR: https://github.com/primer/react/pull/3582
If you prefer we do it in a separate PR, I'm cool with that too.
@mperrotti the group agrees. The preference from PRC maintainer's sync is to handle this work in a separate PR, if that's okay 🙏
@broccolinisoup has been looking into some IconButton changes to support Tooltip so temporarily assigning it to her. Please report back if this is unrelated work and we can re-triage!
I think we should re-open this because the button loading state PR was reverted and it is being re-introduced here https://github.com/primer/react/pull/4485 (It is referenced in https://github.com/primer/react/pull/4426 )
@mperrotti I'm assigning this issue to you since you have done the work already in https://github.com/primer/react/pull/4485 but feel free to un-assign yourself if there is anything I misunderstand here.