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.

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

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

Merged
merged 6 commits into from
Dec 4, 2024

Conversation

cee-chen
Copy link
Member

@cee-chen cee-chen commented Dec 3, 2024

Summary

Note

This PR merges into a feature branch.

The impetus for this PR stems from this earlier conversation: #8193 (comment)

Essentially, our use of forced-color-adjust: none can cause visibility issues with fullShade/emptyShade, if we don't respect high contrast themes that force light/dark mode.

At this point, we need to treat forced colors/high contrast themes as superceding any application setting (since they do in reality) - hence this architectural change.

QA

  • Go to https://eui.elastic.co/pr_8200/#/theming/high-contrast-mode
  • Use Chrome/Edge devtools > rendering to emulate both forced colors and prefers color scheme media queries
  • Confirm that toggling the color scheme correctly updates the color mode, and that EUI's theme switcher toggles in the nav are unable to be toggled

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 mobile
        - [ ] Checked in Chrome, Safari, Edge, and Firefox
        - [ ] Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • Release checklist
    • A changelog entry exists and is marked appropriately.
      - [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)
  • Designer checklist - N/A

@cee-chen cee-chen force-pushed the high-contrast-forced branch from 5f2c6ea to faa1510 Compare December 3, 2024 18:09
@cee-chen cee-chen marked this pull request as ready for review December 3, 2024 18:15
@cee-chen cee-chen requested a review from a team as a code owner December 3, 2024 18:15
Copy link
Contributor

@mgadewoll mgadewoll left a comment

Choose a reason for hiding this comment

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

🚢 🐈‍⬛ The updates works as expected and code LGTM 👍

packages/eui/src/services/theme/provider.tsx Outdated Show resolved Hide resolved
@cee-chen cee-chen merged commit 07e1c13 into elastic:high-contrast-mode Dec 4, 2024
1 of 2 checks passed
@cee-chen cee-chen deleted the high-contrast-forced branch December 4, 2024 17:17
@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

cee-chen added a commit that referenced this pull request Dec 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants