Skip to content
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

Jump to bottom

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

Merged
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 10 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),
cee-chen marked this conversation as resolved.
Show resolved Hide resolved
};

const controlLayout = {
Expand Down
51 changes: 26 additions & 25 deletions src/components/form/switch/_switch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,30 +24,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 +43,31 @@
}
}
}

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

.euiSwitch__body {
background-color: lightOrDarkTheme(transparentize($euiColorLightShade, .5), transparentize($euiColorDarkShade, .4));
cee-chen marked this conversation as resolved.
Show resolved Hide resolved
}

.euiSwitch__thumb {
background-color: rgba(0,0,0,0);
border-color: lightOrDarkTheme(transparentize($euiColorDarkShade, .5), $euiColorDarkShade);
box-shadow: none;
}

.euiSwitch__icon {
fill: $euiColorDarkShade;
}

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

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

.euiSwitch__icon--checked {
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` to meet WCAG AA guidelines.
breehall marked this conversation as resolved.
Show resolved Hide resolved