Skip to content

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

Merged
mgadewoll merged 6 commits intoelastic:mainfrom
mgadewoll:breadcrumb/7514-color-contrast
Apr 5, 2024
Merged

[EuiBreadcrumb] Update color to ensure min. color contrast#7643
mgadewoll merged 6 commits intoelastic:mainfrom
mgadewoll:breadcrumb/7514-color-contrast

Conversation

@mgadewoll
Copy link
Copy Markdown
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
Copy Markdown
Contributor

@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
Copy Markdown

Preview staging links for this PR:

@elasticmachine
Copy link
Copy Markdown
Collaborator

💚 Build Succeeded

History

@mgadewoll mgadewoll merged commit 5016291 into elastic:main Apr 5, 2024
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