Repository navigation
USWDS - Disabled styles: Apply consistent styles to disabled elements #5051
Description
Is your feature request related to a problem? Please describe.
Disabled styles are not consistent across browsers and can cause visual confusion for users
Describe the solution you'd like
Add disabled modifier to other form elements to ensure consistent styling across disabled forms.
Describe alternatives you've considered
No response
Additional context
Screenshots go from Active inputs, default styles when disabled, new styles with USWDS disabled (Chrome)
Other browsers lack disabled styles so there is no indication that the element is disabled other than it is not focusable. Example from safari:
Code of Conduct
- I agree to follow this project's Code of Conduct.
- I checked the current issues for duplicate feature requests.
Activity
amyleadem commentedon Nov 23, 2022
Just a note - When reviewing #5004, I noticed that the gray value is inconsistent in our various disabled styles (see image below). This could be a good opportunity to standardize our disabled color choices for a more consistent user experience.
Additionally, we should consider adding
cursor: not-allowedto all our disabled items.mahoneycm commentedon Nov 25, 2022
@amyleadem originally I chose
disabled-lightfor the disabled color because it was closer to the styles Chrome and Edge apply to disabled inputs. We could easily change this todisabledto make them consistent with the other disabled states. I am curious how color contrast plays into disabled options. Currently, our disabled colors for the checkboxes and the disabled button does not meet WCAG color contrast minimums.mahoneycm commentedon Nov 25, 2022
Good news, inactive items are not required to meet color contrast standards:
Footnotes
https://www.w3.org/TR/WCAG22/#contrast-minimum:~:text=least%203%3A1%3B-,Incidental,picture%20that%20contains%20significant%20other%20visual%20content%2C%20have%20no%20contrast%20requirement.,-Logotypes ↩
Move disabled styles into mixin to match #5051
[-]USWDS - Feature: Add disabled styles to other form inputs.[/-][+]USWDS - Disabled styles: Apply consistent styles to disabled elements[/+]