USWDS: Radio Button & Checkbox - Windows High Contrast Support#4509
Conversation
…uttons to allow checkmark to appear properly in high contrast mode
|
Fixed a bug where the "checked" status for checkboxes was not appearing in white background high contrast themes. Instead, the checkmark will show in black background themes and the white background themes will show a blacked out checkbox Before:
After:
The checkmark will not show in both cases due to the limitations of Our thinking was that the dark high contrast themes are more frequently used than the light themes, so the broader user base will get the most similar checkboxes, stylistically speaking, while the light users still maintain a functional component Note: I did try to remedy this using
|
|
This update also adjusts tile selection styling, addressing a low contrast concern
|
mejiaj
left a comment
There was a problem hiding this comment.
Looks great in Win11 HCM themes.
Added my comments. Also, I would add an empty line before these forced-color media queries.
|
Nice work! |
Previews
Radio Button →
Checkbox →
Description
Resolves #4469 checkbox & radio button issues
Currently, the radio button and checkbox components are missing important visual queues for users implementing Windows High Contrast mode including the buttons/boxes themselves, when a selection has been made, and a visual queue of disabled form options.
This PR adds
forced-colors: activesettings to ensure visibility for all users.Because most of the stylings are shared between Radio + Checkbox, it was easiest to fix together.
Additional information
Radio Buttons
Currently:
Default
Tile
After Fix:
// Note: Bolder border around Radio button / checkbox indicates focus
Default:
Tile:
Checkbox
Currently
Default:
Tile:
After Fix
Default:
Tile:
The checkmark will not show in both cases due to the limitations of forced-colors mode being able to determine light or dark themes, to switch between the light and dark versions of the checkmark.
Our thinking was that the dark high contrast themes are more frequently used than the light themes, so the broader user base will get the most similar checkboxes, stylistically speaking, while the light users still maintain a functional componen
Before you hit Submit, make sure you’ve done whichever of these applies to you:
npm testand make sure the tests for the files you have changed have passed.