[High Contrast Mode] Form controls #8193
Conversation
cee-chen
force-pushed
the
high-contrast-mode-4
branch
from
200dae3 to
827a36f
Compare
+ 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
force-pushed
the
high-contrast-mode-4
branch
from
827a36f to
737cb08
Compare
| // 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`; |
There was a problem hiding this comment.
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.
| ), | ||
| borderColor: highContrastMode | ||
| ? euiTheme.border.color | ||
| : transparentize( |
There was a problem hiding this comment.
General Borealis note for any occurrences: color manipulations/calculations were removed in Borealis and will be replaced by tokens.
There was a problem hiding this comment.
I believe we can use transparentize(color, 1) to remove all transparency from color values.
packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.styles.ts
Outdated
Show resolved
Hide resolved
cee-chen
force-pushed
the
high-contrast-mode-4
branch
from
737cb08 to
036e2a9
Compare
| : // 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 { |
There was a problem hiding this comment.
This changes the design slightly, but imho it's a minor change and has the added benefit of actually being more visible 👍
There was a problem hiding this comment.
Right, yes, this should only affect high contrast mode as well (as extra visibility is the point!)
|
Preview staging links for this PR:
|
💚 Build Succeeded
History
cc @mgadewoll |
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
- [ ] Checked in Chrome, Safari, Edge, and Firefox- [ ] Checked in mobile- [ ] Checked for accessibility including keyboard-only and screenreader modes- [ ] Added or updated jest and cypress tests