[High Contrast Mode] Form controls by cee-chen · Pull Request #8193 · elastic/eui

cee-chen · 2024-11-27T18:20:29Z

Summary

Note

This PR merges into a feature branch.

This PR primarily handles the basic form controls and selection controls. I recommend following along by commit and viewing the VRT screenshots.

It does not tackle advanced form controls like date picker, color picker, etc. (except for random border / shade issues I grepped for).

It does randomly grab some more EuiToast contrast improvements while here because the stateful color gradient work reminded me of it 😅

QA

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
    - [ ] Checked in Chrome, Safari, Edge, and Firefox
    - [ ] Checked in mobile
    ~~- [ ] Checked for accessibility including keyboard-only and screenreader modes~~
Docs site QA - N/A
Code quality checklist
- [ ] Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist - N/A, feature branch
Designer checklist - N/A

+ add borders to prepend/append labels - contrast feels low otherwise, especially for disabled inputs

- always set a border (even if transparent) for Windows high contrast themes

- have to use `empty` instead of `dot` as Windows will always render the `dot` + VRT

- compressed modes in particular require a windows forced contrast mode override - since they have no icon, users have literally no way of telling what on/off state is without it

- increase size in all high contrast modes - use inline SVG workaround (sadly necessarily) for Windows high contrast mode - remove form background tint on all high contrast modes for better consistency + add VRT screenshots for focus state, dark mode

cee-chen · 2024-11-28T17:10:42Z

packages/eui/src/components/form/form.styles.ts

+  // so to restore the linear-gradient that provides important visual information, we're
+  // using a static inline SVG workaround
+  const fill = encodeURIComponent(color);
+  const inlineSVG = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='${fill}' /%3E%3C/svg%3E`;


Worth mentioning - unfortunately we can't use the forced-color-adjust: none workaround here that EuiToast uses, because that affects more than just the underline - it also affects the background/text/placeholder colors with fairly significant deviance from high contrast themes.

mgadewoll · 2024-11-29T10:41:39Z

packages/eui/src/components/form/form.styles.ts

-    ),
+    borderColor: highContrastMode
+      ? euiTheme.border.color
+      : transparentize(


General Borealis note for any occurrences: color manipulations/calculations were removed in Borealis and will be replaced by tokens.

I believe we can use transparentize(color, 1) to remove all transparency from color values.

packages/eui/src/components/form/form.styles.ts

packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.styles.ts

packages/eui/src/components/toast/toast.styles.ts

…ced colors workaround

mgadewoll · 2024-12-02T17:39:46Z

packages/eui/src/components/toast/toast.styles.ts

+          : // Windows high contrast mode ignores/overrides border colors, which have semantic meaning here. To get around this, we'll use a pseudo element that ignores forced colors
+            `overflow: hidden;
+
+            &::before {


This changes the design slightly, but imho it's a minor change and has the added benefit of actually being more visible 👍

Right, yes, this should only affect high contrast mode as well (as extra visibility is the point!)

kibanamachine · 2024-12-02T17:52:24Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_8193/
Storybook: https://eui.elastic.co/pr_8193/storybook
New docs: https://eui.elastic.co/pr_8193/new-docs

elasticmachine · 2024-12-02T17:52:28Z

💚 Build Succeeded

Buildkite Build
Commit: 8912c05

History

💚 Build #3164 succeeded 036e2a9
💚 Build #3151 succeeded 737cb08
💚 Build #3150 succeeded 827a36f
💚 Build #3149 succeeded 200dae3

cc @mgadewoll

mgadewoll

🚢 🐈‍⬛ Thanks for the explanations and additional updates! The changes look good to me and it's working great now 🎉

cee-chen force-pushed the high-contrast-mode-4 branch from 200dae3 to 827a36f Compare November 27, 2024 18:55

cee-chen added 8 commits November 27, 2024 14:01

[EuiForm] Increase contrast of form control inputs across the board

a1a95a8

+ add borders to prepend/append labels - contrast feels low otherwise, especially for disabled inputs

[EuiCheckbox][EuiRadio] Increase selection control border contrast

d6ad4bd

- always set a border (even if transparent) for Windows high contrast themes

[EuiRadio] Fix Windows high contrast rendering

51af990

- have to use `empty` instead of `dot` as Windows will always render the `dot` + VRT

[EuiSwitch] Increase contrast for disabled modes and compressed modes

8c5ce8c

- compressed modes in particular require a windows forced contrast mode override - since they have no icon, users have literally no way of telling what on/off state is without it

[EuiFilePicker] Fix border color

363fed7

[EuiComboBox] Fix list dividers to match EuiSelectable

4c93618

[EuiForm] Increase clear button contrast + fix display on Windows

0580f23

cee-chen force-pushed the high-contrast-mode-4 branch from 827a36f to 737cb08 Compare November 27, 2024 23:59

cee-chen marked this pull request as ready for review November 28, 2024 00:33

cee-chen requested a review from a team as a code owner November 28, 2024 00:33

mgadewoll self-assigned this Nov 28, 2024

cee-chen commented Nov 28, 2024

View reviewed changes

mgadewoll reviewed Nov 29, 2024

View reviewed changes

cee-chen added 2 commits December 2, 2024 08:38

[EuiToast] Increase color indicator to match form underline + add for…

75f034a

…ced colors workaround

[PR feedback] Fix readOnly focus state

036e2a9

cee-chen force-pushed the high-contrast-mode-4 branch from 737cb08 to 036e2a9 Compare December 2, 2024 16:43

[PR feedback] Form clear button - respect windows theme colors more

8912c05

mgadewoll reviewed Dec 2, 2024

View reviewed changes

mgadewoll approved these changes Dec 2, 2024

View reviewed changes

cee-chen merged commit 91f3f91 into elastic:high-contrast-mode Dec 2, 2024

cee-chen deleted the high-contrast-mode-4 branch December 2, 2024 18:06

cee-chen mentioned this pull request Dec 3, 2024

[High Contrast Mode] Allow forced high contrast themes to also force color mode #8200

Merged

6 tasks

cee-chen added a commit that referenced this pull request Dec 6, 2024

[High Contrast Mode] Form controls (#8193)

c447d04

cee-chen added a commit that referenced this pull request Dec 12, 2024

[High Contrast Mode] Form controls (#8193)

112f1e5

cee-chen mentioned this pull request Dec 12, 2024

High contrast mode support #8232

Closed

10 tasks

mgadewoll pushed a commit to mgadewoll/eui that referenced this pull request Mar 14, 2025

[High Contrast Mode] Form controls (elastic#8193)

a65668e

mgadewoll mentioned this pull request Mar 14, 2025

[HCM] Add high contrast mode support #8444

Merged

12 tasks

mgadewoll pushed a commit to mgadewoll/eui that referenced this pull request Mar 18, 2025

[High Contrast Mode] Form controls (elastic#8193)

1c7e675

mgadewoll pushed a commit to mgadewoll/eui that referenced this pull request Mar 18, 2025

[High Contrast Mode] Form controls (elastic#8193)

b8be581

mgadewoll pushed a commit to mgadewoll/eui that referenced this pull request Mar 20, 2025

[High Contrast Mode] Form controls (elastic#8193)

3d45f5b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[High Contrast Mode] Form controls#8193

[High Contrast Mode] Form controls#8193
cee-chen merged 11 commits intoelastic:high-contrast-modefrom
cee-chen:high-contrast-mode-4

cee-chen commented Nov 27, 2024 •

edited

Loading

Uh oh!

cee-chen Nov 28, 2024

Uh oh!

mgadewoll Nov 29, 2024

Uh oh!

cee-chen Dec 2, 2024 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mgadewoll Dec 2, 2024 •

edited

Loading

Uh oh!

cee-chen Dec 2, 2024

Uh oh!

kibanamachine commented Dec 2, 2024

Uh oh!

elasticmachine commented Dec 2, 2024

Uh oh!

mgadewoll left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

cee-chen commented Nov 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

QA

General checklist

Uh oh!

cee-chen Nov 28, 2024

Choose a reason for hiding this comment

Uh oh!

mgadewoll Nov 29, 2024

Choose a reason for hiding this comment

Uh oh!

cee-chen Dec 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mgadewoll Dec 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cee-chen Dec 2, 2024

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Dec 2, 2024

Uh oh!

elasticmachine commented Dec 2, 2024

💚 Build Succeeded

History

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

cee-chen commented Nov 27, 2024 •

edited

Loading

cee-chen Dec 2, 2024 •

edited

Loading

mgadewoll Dec 2, 2024 •

edited

Loading