search

seas-computing / mark-one

A UI component library for building React Apps (in development)
https://seas-computing.github.io/mark-one/
BSD 3-Clause "New" or "Revised" License
0 stars 1 forks source link

Add "disabled" styles to Buttons #109

Open jonseitz opened 3 years ago

jonseitz commented 3 years ago

Our Button and Borderless Button components both accept a "disabled" prop that gets passed to the underlying <button> element, but that only prevents the onClick handler from being fired -- it doesn't change the styling to signal to the user that the can't click the button, and the :hover and :active pseudo-classes still get applied so it just looks like something is broken.

We should, at a minimum, set cursor: not-allowed on :hover. We can also switch to a "ghosted" background/text for those buttons to provide a passive visual indicator, and one that will apply on mobile.

jonseitz commented 3 months ago

This was held up because of accessibility concerns with using disabled on buttons, as that can often hide the button from assistive technology without any indication that the button can be "enabled" at another point. It needs further review.