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

[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 6 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
3 changes: 2 additions & 1 deletion .prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,6 @@
"printWidth": 80,
"semi": true,
"singleQuote": true,
"trailingComma": "es5"
"trailingComma": "es5",
"editor.formatOnSave": true
}
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
4 changes: 2 additions & 2 deletions src/components/form/form.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@ export const euiFormVariables = (euiThemeContext: UseEuiTheme) => {
? 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
49 changes: 25 additions & 24 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: $euiSwitchOffDisabledColor;
}

.euiSwitch__thumb {
background-color: $euiSwitchOffThumbDisabledColor;
border-color: $euiSwitchOffThumbDisabledBorderColor;
box-shadow: none;
}

.euiSwitch__icon {
fill: $euiColorDarkShade;
}

+ .euiSwitch__label {
color: $euiFormControlDisabledColor;
}
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The reason I moved this under the aria styles is to ensure the background color for disable overrides the selected (blue) background color if the switch is active but also disabled.

}

.euiSwitch__body {
Expand Down
7 changes: 5 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,16 @@ $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;
$euiSwitchOffDisabledColor: lightOrDarkTheme(transparentize($euiColorLightShade, .5), transparentize($euiColorDarkShade, .4)) !default;
$euiSwitchOffThumbDisabledColor: rgba(0,0,0,0) !default;
$euiSwitchOffThumbDisabledBorderColor: lightOrDarkTheme(transparentize($euiColorDarkShade, .5), $euiColorDarkShade) !default;

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The euiFormCustomControlBorderColor affects other components and I felt it would be best to add the switch specific styles as their own keys.

Copy link
Contributor

Choose a reason for hiding this comment

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

I think that's a good call. They're unique to the switch component, so having them called out and labeled is helpful.

Copy link
Contributor

Choose a reason for hiding this comment

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

Quick 2c: If they're only being used by the switch, can we define them in Sass where they're used instead of as a global form variable? (i.e., in _switch.scss below line 47).

This will (hopefully) prevent downstream consumers from using them when we only want them as one-off variables.

// 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