[EuiBreadcrumbs] a11y polish #4763

myasonik · 2021-04-28T00:07:31Z

Summary

Biggest change is the DOM structure:
- From a <nav> with <a>, <button> and <span> children
- To a <nav> with an <ol>, where each <li> has a <a>, <button> or <span> child
- Separators are now rendered 100% through CSS instead of JSX+CSS

Some tiny visual changed with with spacing tightened up and relying on more native CSS logic

Introduces a new prop for Breadcrumb: aria-current
Allows consumers to override the default value of page, only valid on the last item

Before	After

Checklist

Check against all themes for compatibility in both light and dark modes
Checked in mobile
Checked in Chrome, Safari, Edge, and Firefox
[ ] Props have proper autodocs and playground toggles
[ ] Added documentation
~~[ ] Checked Code Sandbox works for the any docs examples~~
Added or updated jest tests
Checked for breaking changes and labeled appropriately
Checked for accessibility including keyboard-only and screenreader modes
A changelog entry exists and is marked appropriately

kibanamachine · 2021-04-28T00:29:59Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4763/

kibanamachine · 2021-07-06T20:46:58Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4763/

thompsongl · 2021-07-13T21:46:51Z

jenkins test this

kibanamachine · 2021-07-13T22:08:28Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4763/

cchaos · 2021-07-13T22:20:45Z

@myasonik So the big thing that I'm seeing is that, in Amsterdam, the EuiHeaderBreadcrumbs are a wrapper around EuiBreadcrumbs with some specific styling overrides. This is now rendering quite wrong. 😬 I think mainly due to moving the separator into CSS.

kibanamachine · 2021-07-14T15:47:56Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4763/

src/components/header/header_breadcrumbs/_header_breadcrumbs.scss

kibanamachine · 2021-07-20T13:49:48Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4763/

thompsongl

LGTM! Tested in all the browsers using the preview link

kibanamachine · 2021-07-20T18:36:37Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4763/

kibanamachine · 2021-07-21T20:52:38Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4763/

kibanamachine · 2021-07-22T17:36:03Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4763/

cchaos

I double-checked all the styles in FF, Chrome, and Safari and in regular breadcrumbs and header breadcrumbs 👍 . There's just a couple code-specific things that need updating.

Oh and you'll need to change the selectors in the _control_bar.scss to fix the contrast.

src/themes/eui-amsterdam/overrides/_header_breadcrumbs.scss

src/components/breadcrumbs/breadcrumbs.tsx

kibanamachine · 2021-07-22T19:50:57Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4763/

kibanamachine · 2021-07-26T17:52:06Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4763/

kibanamachine · 2021-07-26T21:37:47Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4763/

kibanamachine · 2021-07-27T16:12:07Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4763/

…c#4977) * handle 0 count * CL

Co-authored-by: cchaos <caroline.horn@elastic.co>

* [EuiLink] Increased font weight to match buttons - Increased text underline weight on focus - Removed low-contrast focus background - Added `:visited` and `:target` styling (All mainly affecting Amsterdam) * Re-use mixin in text styles

…inks 😜

cchaos · 2021-07-27T22:47:41Z

WEll that was a terrible upstream merged... Sorry, will fix

# Conflicts: # src/components/link/_link.scss # src/themes/eui-amsterdam/global_styling/mixins/_link.scss

cchaos

I knew there was going to be some issue with my EuiLink PR and increased font-weights, so I went ahead and fixed those.

Let's get this sucker merged 👍 😆

src/components/breadcrumbs/breadcrumbs.tsx

CHANGELOG.md

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

kibanamachine · 2021-07-28T14:40:27Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4763/

kibanamachine · 2021-07-28T14:41:59Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4763/

kibanamachine · 2021-07-28T17:00:53Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4763/

myasonik added the accessibility label Apr 28, 2021

Michail Yasonik added 3 commits July 6, 2021 14:00

breadcrumbs a11y polish

2dddcb8

fixing final issues

c5f9aac

adding CL

d05885f

myasonik force-pushed the breadcrumbs branch from a497d2a to d05885f Compare July 6, 2021 20:23

myasonik marked this pull request as ready for review July 6, 2021 20:23

thompsongl self-requested a review July 13, 2021 16:14

cchaos self-requested a review July 13, 2021 22:18

Michail Yasonik added 2 commits July 14, 2021 10:44

remove seperator from header breadcrumbs

6a78eeb

Merge remote-tracking branch 'upstream/master' into breadcrumbs

aae1b10

myasonik force-pushed the breadcrumbs branch from 28a2cfa to aae1b10 Compare July 14, 2021 15:26

cchaos reviewed Jul 14, 2021

View reviewed changes

src/components/header/header_breadcrumbs/_header_breadcrumbs.scss Outdated Show resolved Hide resolved

Michail Yasonik added 2 commits July 20, 2021 08:01

Merge remote-tracking branch 'upstream/master' into breadcrumbs

18328ec

PR feedback

573daf2

myasonik requested a review from cchaos July 20, 2021 13:36

thompsongl approved these changes Jul 20, 2021

View reviewed changes

Michail Yasonik added 2 commits July 20, 2021 14:08

more breadcrumbs css polish

5a36b7c

Merge remote-tracking branch 'upstream/master' into breadcrumbs

a5e6926

breadcrumbs collapsedLink polish

e879f76

cchaos added 2 commits July 22, 2021 11:01

test

0b17652

Revert test

538dec8

cchaos reviewed Jul 22, 2021

View reviewed changes

src/themes/eui-amsterdam/overrides/_header_breadcrumbs.scss Outdated Show resolved Hide resolved

src/components/breadcrumbs/breadcrumbs.tsx Outdated Show resolved Hide resolved

src/components/breadcrumbs/breadcrumbs.tsx Outdated Show resolved Hide resolved

PR update

f36b7d5

Michail Yasonik added 2 commits July 26, 2021 13:26

classname fix

107d716

Merge remote-tracking branch 'upstream/master' into breadcrumbs

7d54af4

Michail Yasonik added 2 commits July 26, 2021 16:20

remove empty title attrs

82d43e3

don't set aria-current on popover breadcrumbs

a38345f

test changes

4c054c9

thompsongl and others added 6 commits July 27, 2021 18:45

[EuiSearchBar] Handle 0 count after manual query manipulation (elasti…

e4df9c7

…c#4977) * handle 0 count * CL

[EuiHorizontalStep] Added current status (elastic#4911)

7236d58

Co-authored-by: cchaos <caroline.horn@elastic.co>

@cchaos: Executive decision to remove background hover color on all l…

54d95f0

…inks 😜

Fix Amsterdam breadcrumb styles with new link styles

93432b6

Fix last breadcrumb text color to match EuiLink

39ba0f7

Merge remote-tracking branch '2_upstream/master' into breadcrumbs

2398cec

# Conflicts: # src/components/link/_link.scss # src/themes/eui-amsterdam/global_styling/mixins/_link.scss

cchaos approved these changes Jul 27, 2021

View reviewed changes

src/components/breadcrumbs/breadcrumbs.tsx Outdated Show resolved Hide resolved

CHANGELOG.md Outdated Show resolved Hide resolved

myasonik and others added 2 commits July 28, 2021 10:15

Update src/components/breadcrumbs/breadcrumbs.tsx

865b57a

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

CL update

67419a7

Merge branch 'master' into breadcrumbs

09cf85c

myasonik merged commit 932bb6d into elastic:master Jul 28, 2021

myasonik deleted the breadcrumbs branch July 28, 2021 18:16

chandlerprall mentioned this pull request Jul 29, 2021

Upgrade EUI to v36.1.0 elastic/kibana#107231

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiBreadcrumbs] a11y polish #4763

[EuiBreadcrumbs] a11y polish #4763

myasonik commented Apr 28, 2021 •

edited

Loading

kibanamachine commented Apr 28, 2021

kibanamachine commented Jul 6, 2021

thompsongl commented Jul 13, 2021

kibanamachine commented Jul 13, 2021

cchaos commented Jul 13, 2021

kibanamachine commented Jul 14, 2021

kibanamachine commented Jul 20, 2021

thompsongl left a comment

kibanamachine commented Jul 20, 2021

kibanamachine commented Jul 21, 2021

kibanamachine commented Jul 22, 2021

cchaos left a comment

kibanamachine commented Jul 22, 2021

kibanamachine commented Jul 26, 2021

kibanamachine commented Jul 26, 2021

kibanamachine commented Jul 27, 2021

cchaos commented Jul 27, 2021

cchaos left a comment

kibanamachine commented Jul 28, 2021

kibanamachine commented Jul 28, 2021

kibanamachine commented Jul 28, 2021

[EuiBreadcrumbs] a11y polish #4763

[EuiBreadcrumbs] a11y polish #4763

Conversation

myasonik commented Apr 28, 2021 • edited Loading

Summary

Checklist

kibanamachine commented Apr 28, 2021

kibanamachine commented Jul 6, 2021

thompsongl commented Jul 13, 2021

kibanamachine commented Jul 13, 2021

cchaos commented Jul 13, 2021

kibanamachine commented Jul 14, 2021

kibanamachine commented Jul 20, 2021

thompsongl left a comment

Choose a reason for hiding this comment

kibanamachine commented Jul 20, 2021

kibanamachine commented Jul 21, 2021

kibanamachine commented Jul 22, 2021

cchaos left a comment

Choose a reason for hiding this comment

kibanamachine commented Jul 22, 2021

kibanamachine commented Jul 26, 2021

kibanamachine commented Jul 26, 2021

kibanamachine commented Jul 27, 2021

cchaos commented Jul 27, 2021

cchaos left a comment

Choose a reason for hiding this comment

kibanamachine commented Jul 28, 2021

kibanamachine commented Jul 28, 2021

kibanamachine commented Jul 28, 2021

myasonik commented Apr 28, 2021 •

edited

Loading