AlexVanK
commented
5 days ago The color red is because there was the class "btn-danger" applied, but it doesn't define disabled buttons per se. I made them all primary, because I can see how it caused confusion.
As per the disabled state, on Bootstrap it works differently than on USWDS:
- Bootstrap disabled button removes mouse point-events, which prevents any interaction with the button: https://getbootstrap.com/docs/5.3/components/buttons/#disabled-state (this prevents the denied icon to appear on hover)
- On USWDS disabled buttons are still clickable and hoverable, in fact all they have is a visual clue that they should not be used, but you can click or hover on them (click will produce nothing because no JS is bound to the button, hover will change the cursor to a denied icon)
I'm not sure what you mean by aria-label, the aria-* attribute is used as an html attribute to indicate to assistive technologies that elements needs attention.
For now I changed the style of the disabled button by applying "btn-dark" utility. If you want the denied icon as well, I have to redefine how the disabled button works basically. Let me know.
Disabled button should be grey (is currently red). Design should approximate: https://designsystem.digital.gov/components/button/
Side note: I really loved how USWDS included the aria label for disabled buttons in their preview section. I think it's a nice reminder for devs and designers to include/use aria labels for disabled buttons vs. just using a regular button and changing the color which I've seen happen once at least on one of our webinar pages. Let me know what you think!