Skip to content

[EuiForm] Increase Contrast on EuiForm Section Controls to Pass WCAG AA Standards #6729

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
breehall merged 13 commits into from
Apr 25, 2023
Merged

[EuiForm] Increase Contrast on EuiForm Section Controls to Pass WCAG AA Standards #6729

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
37ff60a
[Selection Form Controls] Increase the shade threshhold for EuiForm s…
breehall Apr 21, 2023
cd59308
Forgot to add test update
breehall Apr 21, 2023
670df8d
[Selection Form Controls] Increase the tint threshhold for EuiForm se…
breehall Apr 21, 2023
c93ea40
Change the euiSwitchOff color to a darker shade. This changes the swi…
breehall Apr 21, 2023
74af05b
CHANGELOG
breehall Apr 21, 2023
40957db
[EuiSwitch] Updated the color scheme of the disabled styling for EuiS…
breehall Apr 24, 2023
a528e8b
Delete .prettierrc
breehall Apr 24, 2023
48ed465
Revert "Delete .prettierrc"
breehall Apr 24, 2023
27961fa
Revert prettier RC changes
breehall Apr 24, 2023
ab65814
[EuiSwitch] - Removed individual EuiSwitch SASS keys in favor of addi…
breehall Apr 24, 2023
2a960c6
Update upcoming_changelogs/6729.md
breehall Apr 25, 2023
e442597
[EuiSwitch] Add block scoped variabled to EuiSwitch for reused colors.:
breehall Apr 25, 2023
68b4596
Merge branch 'form-control-accessibility' of https://github.com/breeh…
breehall Apr 25, 2023
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
2 changes: 1 addition & 1 deletion src/components/form/form.styles.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ describe('euiFormVariables', () => {
expect(result.current.controlPlaceholderText).toEqual('#878b95');
expect(result.current.inputGroupLabelBackground).toEqual('#2c2f37');
expect(result.current.customControlDisabledIconColor).toEqual('#33373f');
expect(result.current.customControlBorderColor).toEqual('#1e1f26');
expect(result.current.customControlBorderColor).toEqual('#16171c');
});
});

Expand Down
6 changes: 3 additions & 3 deletions src/components/form/form.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,14 +53,14 @@ export const euiFormVariables = (euiThemeContext: UseEuiTheme) => {
inputGroupBorder: 'none',
};

// Colors - specific for checkboxes and radios
// Colors - specific to checkboxes, radios, switches, and range thumbs
const customControlColors = {
customControlDisabledIconColor: isColorDark
? shade(euiTheme.colors.mediumShade, 0.38)
: tint(euiTheme.colors.mediumShade, 0.485),
customControlBorderColor: isColorDark
? shade(euiTheme.colors.lightestShade, 0.18)
: tint(euiTheme.colors.lightestShade, 0.3),
? shade(euiTheme.colors.lightestShade, 0.4)
: tint(euiTheme.colors.lightestShade, 0.31),
};

const controlLayout = {
Expand Down
56 changes: 30 additions & 26 deletions src/components/form/switch/_switch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
// stylelint-disable max-nesting-depth

.euiSwitch {
$euiSwitchOffDisabledColor: lightOrDarkTheme(transparentize($euiColorLightShade, .5), transparentize($euiColorDarkShade, .4));
$euiSwitchDisabledThumbColor: lightOrDarkTheme(transparentize($euiColorDarkShade, .5), $euiColorDarkShade);

Comment on lines +5 to +7
Copy link
Contributor Author

@breehall breehall Apr 25, 2023

Choose a reason for hiding this comment

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

@cee-chen instead of adding these in the disabled block, I had to add them at a higher level because they're being used in a different scope that targets compressed switches as well

Copy link
Contributor

@cee-chen cee-chen Apr 25, 2023

Choose a reason for hiding this comment

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

All good! As long as they're scoped to a selector, they're not available globally 👍

position: relative;
display: inline-flex;
align-items: flex-start;
Expand All @@ -24,30 +27,6 @@
@include euiCustomControlFocused;
}

&:disabled {
&:hover,
~ .euiSwitch__label:hover {
cursor: not-allowed;
}

.euiSwitch__body {
background-color: $euiSwitchOffColor;
}

.euiSwitch__thumb {
@include euiCustomControlDisabled;
background-color: $euiSwitchOffColor;
}

.euiSwitch__icon {
fill: $euiFormCustomControlDisabledIconColor;
}

+ .euiSwitch__label {
color: $euiFormControlDisabledColor;
}
}

&[aria-checked='false'] {
.euiSwitch__body {
background-color: $euiSwitchOffColor;
Expand All @@ -67,6 +46,31 @@
}
}
}

&:disabled {
&:hover,
~ .euiSwitch__label:hover {
cursor: not-allowed;
}

.euiSwitch__body {
background-color: $euiSwitchOffDisabledColor;
}

.euiSwitch__thumb {
background-color: rgba(0,0,0,0);
border-color: $euiSwitchDisabledThumbColor;
box-shadow: none;
}

.euiSwitch__icon {
fill: $euiColorDarkShade;
}

+ .euiSwitch__label {
color: $euiFormControlDisabledColor;
}
}
}

.euiSwitch__body {
Expand Down Expand Up @@ -107,7 +111,7 @@
width: $euiSwitchWidth - ($euiSwitchThumbSize / 2) + $euiSizeS;
height: $euiSwitchIconHeight;
transition: left $euiAnimSpeedNormal $euiAnimSlightBounce, right $euiAnimSpeedNormal $euiAnimSlightBounce;
fill: $euiTextColor;
fill: $euiColorEmptyShade;
}

.euiSwitch__icon--checked {
Expand Down Expand Up @@ -194,7 +198,7 @@
.euiSwitch__button[aria-checked='false'],
.euiSwitch__button[aria-checked='true']:disabled {
.euiSwitch__thumb {
border-color: $euiFormCustomControlBorderColor;
border-color: $euiSwitchDisabledThumbColor;
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/global_styling/variables/_form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,13 @@ $euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 2
$euiFormBorderColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
$euiFormBorderDisabledColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
$euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade
$euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 18%, 30%) !default;
$euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 40%, 31%) !default;
$euiFormControlDisabledColor: $euiColorMediumShade !default;
$euiFormControlBoxShadow: 0 0 transparent !default;
$euiFormControlPlaceholderText: makeHighContrastColor($euiTextSubduedColor, $euiFormBackgroundColor) !default;
$euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 50%, 15%) !default;
$euiFormInputGroupBorder: none !default;
$euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3)) !default;
$euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorDarkShade, .25), transparentize($euiColorDarkShade, .4)) !default;

// Icons sizes
$euiFormControlIconSizes: (
Expand Down
1 change: 1 addition & 0 deletions upcoming_changelogs/6729.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Improved the contrast ratio of `EuiCheckbox`, `EuiRadio`, and `EuiSwitch` in their unchecked states to meet WCAG AA guidelines.