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

[EuiBreadcrumb] Update color to ensure min. color contrast #7643

Merged
merged 6 commits into from
Apr 5, 2024

Conversation

mgadewoll
Copy link
Contributor

@mgadewoll mgadewoll commented Apr 2, 2024

Summary

closes #7514

This PR updates the styles of EuiBreadcrumb with type="application" to increase color contrast to ensure the required contrast minimum level (AA) of 4.5

Changes

  • uses primary button colors for interactive breadcrumbs
  • replaces transparentize with tintOrShade on non-interactive breadcrumb styles and adjusts values to result in contrast above 4.5

light mode

light_mode.mov

Screenshot 2024-04-02 at 10 51 48
Screenshot 2024-04-02 at 10 51 54

dark mode

dark_mode.mov

Screenshot 2024-04-02 at 10 52 10
Screenshot 2024-04-02 at 10 52 16

QA

  • review EuiBreadcrumbs (storybook) and EuiHeaderBreadcrumbs (storybook) and verify the min. required color contrast
    • and set type to application (if not preset)
    • use the devTools to inspect the breadcrumbs and their color contrast (in Chrome use the selection tool and hover the element) OR run axe DevTools and confirm no color contrast issue is raised for the breadcrumbs

General checklist

  • Browser QA
    • Checked in both light and dark modes
      - [ ] Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
      - [ ] Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA - N/A
  • Code quality checklist
  • Release checklist
    • A changelog entry exists and is marked appropriately.
    • Updated the Figma library counterpart

@mgadewoll mgadewoll marked this pull request as ready for review April 2, 2024 11:22
@mgadewoll mgadewoll requested a review from a team as a code owner April 2, 2024 11:22
@mgadewoll mgadewoll force-pushed the breadcrumb/7514-color-contrast branch from 2de642f to 353ecf5 Compare April 4, 2024 08:06
@mgadewoll mgadewoll requested a review from cee-chen April 4, 2024 17:14
Copy link
Member

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

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

🥳 Awesome work on this Lene!!

@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

@mgadewoll mgadewoll merged commit 5016291 into elastic:main Apr 5, 2024
7 checks passed
cee-chen added a commit to elastic/kibana that referenced this pull request Apr 9, 2024
`v93.5.2` ⏩ `v93.6.0`

---

## [`v93.6.0`](https://github.com/elastic/eui/releases/v93.6.0)

- Updated `EuiBreadcrumb` styles to improve visual distinction of
clickable breadcrumbs
([#7615](elastic/eui#7615))

**Deprecations**

- Deprecated `color` prop on `EuiBreadcrumb`
([#7615](elastic/eui#7615))

**Bug fixes**

- Fixed `EuiComboBox` to correctly select full matches within groups via
the `Enter` key ([#7658](elastic/eui#7658))

**Accessibility**

- Updated `EuiHeaderBreadcrumb` styles to ensure min. required color
contrast ([#7643](elastic/eui#7643))
- `EuiSuperSelect` now correctly reads out parent `EuiFormRow` labels to
screen readers ([#7650](elastic/eui#7650))
- `EuiSuperSelect` now more closely mimics native `<select>` behavior in
its keyboard behavior and navigation
([#7650](elastic/eui#7650))
- `EuiSuperSelect` no longer strands keyboard focus on close
([#7650](elastic/eui#7650))
- `EuiSuperSelect` now correctly allows keyboard navigating past
disabled options in the middle of the options list
([#7650](elastic/eui#7650))
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.

[EuiHeader][COLOR CONTRAST]: Header breadcrumbs with blue background have color contrast ratio below 4.5:1
5 participants