Add header links, replace header breadcrumbs, fix accessibility issues around them #844
Conversation
| }], | ||
| text: ( | ||
| <p> | ||
| Kibana should and will eventually always use the breadcrumb style of header. |
There was a problem hiding this comment.
If you want, you can future-proof this copy by leaving this bit about Kibana out (I'm also not sure if this guidance will have an effect on people reading the docs, since once we implement this header in Kibana it's pretty much a done deal).
If you’re using EUI in a one-off site or page, you can use <EuiCode>EuiHeaderLinks</EuiCode>, <EuiCode>EuiHeaderLink</EuiCode>s instead of breadcrumbs.
| @@ -74,7 +74,11 @@ $buttonTypes: ( | |||
| } | |||
|
|
|||
| &:focus { | |||
| background-color: transparentize($color, .9); | |||
| @if ($name == 'text') { | |||
There was a problem hiding this comment.
Is this a bug-fix? Is it worth mentioning in the change log?
There was a problem hiding this comment.
It's a pretty minor visual change. Didn't think it was worth mentioning.
| @@ -161,6 +163,15 @@ export class EuiPopover extends Component { | |||
| ariaLive = 'assertive'; | |||
| } | |||
|
|
|||
| let focusTrapScreenReaderText; | |||
There was a problem hiding this comment.
I love this idea but VoiceOver on OS X wasn't picking it up when I was testing the header popovers. I have VO verbosity set to high -- did you do anything special to your settings or maybe you're using a different screen reader?
There was a problem hiding this comment.
I'll check it out again. Was ownFocus on? For example, this wouldn't work in the combo box cuz i think it's set to off there. The default popover example has it off as well. Try it in the header.
There was a problem hiding this comment.
I was testing it with the header popovers, e.g. the keypad menu and the user menu. No dice. The first focusable elements with those popovers automatically took focus and VO read those aloud.
There was a problem hiding this comment.
Here's what I get.
There was a problem hiding this comment.
The first one has ownFocus off, the second one has it on. Works the same for me in the header. Since it's an alert, it should read it first, before the focus.
There was a problem hiding this comment.
Oh really weird, I just tried it again and this time it worked. Must have been a VO glitch. Anyway, it sounds & looks great!
Also made the following modifications to existing comps: - `EuiHeaderLogo` now accepts text (children) as well - `EuiHeaderSectionItem` can have “none” as the border but still defaults to “left”
…r` for dark theme
Replaces #804
Fixes #801
Fixes #727
Fixes #726
Summary
EuiHeaderBreadcrumbcomponents withEuiBreadcrumbsEuiHeaderLinkfor more traditional navigation uses (@thomasneirynck needs this).Later todo