Thanks to visit codestin.com
Credit goes to github.com

Skip to content

USWDS - Disabled mixin: Test for color contrast #5455

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Feb 26, 2024
Merged

USWDS - Disabled mixin: Test for color contrast #5455

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
329c61b
Utilize set-text-and-bg mixin within u-disabled to test for color con…
mahoneycm Aug 21, 2023
b7e8307
Manually set disabled outline buttons background and color
mahoneycm Aug 21, 2023
f71a138
Add color contrast check for disabled file input
mahoneycm Aug 21, 2023
32120ba
Remove unused combobox placeholder color definition
mahoneycm Aug 21, 2023
950759f
Run prettier
mahoneycm Aug 21, 2023
b584b12
Merge branch 'develop' of github.com:uswds/uswds into cm-disabled-col…
mahoneycm Aug 25, 2023
4f96471
Add comma to trigger rebuild
mahoneycm Aug 25, 2023
a53a6d4
Remove comma to trigger rebuild
mahoneycm Aug 25, 2023
90d6e6e
Merge branch 'develop' of github.com:uswds/uswds into cm-disabled-col…
mahoneycm Dec 12, 2023
9bb417c
Remove duplicate disabled checkbox and radio styles; add color contra…
mahoneycm Dec 26, 2023
96a1c21
Enhance checkbox + radio contrast check logic
mahoneycm Dec 26, 2023
379e3f9
Run prettier
mahoneycm Dec 26, 2023
264b36b
Replace radio + checkbox 'disabled' colors with -text-color-disabled
mahoneycm Jan 5, 2024
987177b
Add scss comments
mahoneycm Jan 10, 2024
a937d98
Format sassdoc comments
Feb 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion packages/usa-button/src/styles/_usa-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,11 +198,18 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
padding: units(2) units(3);
}

// Cannot use disabled mixin due to transparent causing build errors with color grade check.
.usa-button--outline:disabled,
.usa-button--outline[aria-disabled="true"],
.usa-button--outline-inverse:disabled,
.usa-button--outline-inverse[aria-disabled="true"] {
@include u-disabled("transparent", "disabled");
&,
&:hover,
&:active,
&:focus {
background-color: transparent;
color: color("disabled");
}
}

.usa-button--outline:disabled,
Expand Down
15 changes: 0 additions & 15 deletions packages/usa-checkbox/src/styles/_usa-checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,21 +15,6 @@
}
}

&:disabled,
&[aria-disabled="true"] {
@include format-input {
cursor: not-allowed;
}
@include format-label {
color: color("disabled");
cursor: not-allowed;

@media (forced-colors: active) {
color: color(GrayText);
}
}
}

Comment on lines -18 to -32
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Duplicate styles found in _usa-radio.scss.

Moved styles to checkbox-and-radio-colors.scss

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note

It looks like format-input styles were not carried over, but I confirmed that there are no visual regressions after this consolidation.

// Checkboxes and radios with tap-friendly targets
&--tile {
@include format-label {
Expand Down
1 change: 0 additions & 1 deletion packages/usa-combo-box/src/styles/_usa-combo-box.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@ $close: map-merge(
// Placeholder overrides to ensure color contrast compliance accross browsers
&::placeholder {
opacity: 1;
color: color("disabled-dark");
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Browsers set the color for the placeholder via the -webkit-text-fill-color above. Removing this color definition because it seems unnecessary.

}

& ~ .usa-combo-box__input-button-separator {
Expand Down
2 changes: 1 addition & 1 deletion packages/usa-file-input/src/styles/_usa-file-input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@
.usa-file-input--disabled {
.usa-file-input__instructions,
.usa-file-input__choose {
color: color("disabled-dark");
@include set-text-from-bg("disabled-lighter", "disabled-dark");
}

.usa-file-input__box {
Expand Down
10 changes: 0 additions & 10 deletions packages/usa-radio/src/styles/_usa-radio.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,6 @@
}
}

&:disabled,
&[aria-disabled="true"] {
@include format-input {
cursor: not-allowed;
}
@include format-label {
cursor: not-allowed;
}
}

Comment on lines -18 to -27
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Duplicate styles found in _usa-checkbox.scss.

Moved styles to checkbox-and-radio-colors.scss

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note

It looks like format-input styles were not carried over, but I confirmed that there are no visual regressions after this consolidation.

// Checkboxes and radios with tap-friendly targets
&--tile {
@include format-label {
Expand Down
16 changes: 11 additions & 5 deletions packages/uswds-core/src/styles/mixins/helpers/checkbox-and-radio-colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@
$input-type: null
) {
$input-text-color: get-color-token-from-bg($bg-color);
$input-text-color-disabled: get-color-token-from-bg(
$bg-color,
"disabled",
"gray-50"
);
$input-bg-color: if(
$bg-color == "default",
$theme-body-background-color,
Expand Down Expand Up @@ -70,7 +75,8 @@
&:disabled,
&[aria-disabled="true"] {
@include format-label {
color: color("disabled");
color: color($input-text-color-disabled);
cursor: not-allowed;

@media (forced-colors: active) {
color: GrayText;
Expand All @@ -79,7 +85,7 @@
@include format-input {
background-color: color($input-bg-color);
box-shadow: 0 0 0 units($theme-input-select-border-width)
color("disabled");
color($input-text-color-disabled);
}
}
&--tile {
Expand Down Expand Up @@ -134,7 +140,7 @@
&:checked:disabled,
&:checked[aria-disabled="true"] {
@include format-input {
background-color: color("disabled");
background-color: color($input-text-color-disabled);
@media (forced-colors: active) {
background-color: color(GrayText);
}
Expand All @@ -160,8 +166,8 @@
&:checked:disabled,
&:checked[aria-disabled="true"] {
@include format-input {
background-color: color("disabled");
box-shadow: 0 0 0 2px color("disabled"),
background-color: color($input-text-color-disabled);
box-shadow: 0 0 0 2px color($input-text-color-disabled),
inset 0 0 0 2px color($input-bg-color);

@media (forced-colors: active) {
Expand Down
30 changes: 25 additions & 5 deletions packages/uswds-core/src/styles/mixins/utilities/_disabled.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,31 @@
@use "../../functions/utilities/color" as *;
@use "../../settings" as *;
@use "../../variables/border-high-contrast" as *;
// Overrides background-color and cursor styles of elements to display as disabled
@use "../helpers/set-text-and-bg.scss" as *;

/// Adds compliant disabled colors and cursor styles to elements to read as disabled.
/// Falls back to standard disabled tokens if params fail color contrast check.
///
/// @param {String} $bg-color - Desired background color token.
/// @param {String} $text-color - Desired text color token.
///
/// @output Theme adjusted disabled styles.
///
/// @example scss
/// .foo {
/// @include u-disabled("disabled-darker", "white");
/// }
@mixin u-disabled($bg-color: "disabled-lighter", $text-color: "disabled-dark") {
background-color: color($bg-color);
color: color($text-color);
@include set-text-and-bg($bg-color, $text-color);

cursor: not-allowed;
opacity: 1; // Override disabled default opacity shift (Necessary for Chromium, iOS Safari)

&:hover,
&:active,
&:focus,
&.usa-focus {
background-color: color($bg-color);
color: color($text-color);
@include set-text-and-bg($bg-color, $text-color);
}

@media (forced-colors: active) {
Expand All @@ -30,6 +41,15 @@
}
}

/// Adds high contrast border using the GrayText system token.
///
/// @output Border size, style, and color.
///
/// @example scss
/// .foo {
/// @include u-disabled-high-contrast-border;
/// }
///
@mixin u-disabled-high-contrast-border {
@media (forced-colors: active) {
border: $border-high-contrast-disabled;
Expand Down