Add header links, replace header breadcrumbs, fix accessibility issues around them

CHANGELOG.md

@@ -4,15 +4,17 @@ No changes since 0.0.48.
 
 ## [`0.0.48`](https://github.com/elastic/eui/tree/v0.0.48)
 
-**Bug fixes**
-- `EuiInMemoryTable` and `EuiBasicTable` now pass unknown props through to their child ([#836](https://github.com/elastic/eui/pull/836)) 
-
 **Breaking changes**
 
+- `EuiHeaderBreadcrumbs` refactored to use `EuiBreadcrumbs`. This removed all child components of `EuiHeaderBreadcrumbs`. ([#844](https://github.com/elastic/eui/pull/844))
 - Move `EuiBasicTable`'s `itemId` prop from `selection` to a top-level property ([#830](https://github.com/elastic/eui/pull/830))
 - Renamed/refactored `requiresAriaLabel` prop validator to a more general `withRequiredProp` ([#830](https://github.com/elastic/eui/pull/830))
 
 **Bug fixes**
+
+- `EuiInMemoryTable` and `EuiBasicTable` now pass unknown props through to their child ([#836](https://github.com/elastic/eui/pull/836))
+- Added `EuiHeaderLinks` which allow you to construct navigation in the header in place of the app menu. ([#844](https://github.com/elastic/eui/pull/844))
+- `EuiPopover` will use an alert to warn the user it traps focus ([#844](https://github.com/elastic/eui/pull/844))
 - `EuiComboBox` do not pass `isDisabled` prop to `EuiComboBoxOptionsList` to avoid "React does not reconize the 'isDisabled' prop on a DOM element" console warning ([#838](https://github.com/elastic/eui/pull/838))
 - `EuiComboBox` do not display clear icon when `isClearable` prop is set to false and `selectedOptions` prop is provided ([#838](https://github.com/elastic/eui/pull/838))
 

src-docs/src/views/header/header.js

@@ -4,8 +4,6 @@ import React, {
 
 import {
   EuiHeader,
-  EuiHeaderBreadcrumb,
-  EuiHeaderBreadcrumbCollapsed,
   EuiHeaderBreadcrumbs,
   EuiHeaderSection,
   EuiHeaderSectionItem,
@@ -40,37 +38,41 @@ export default class extends Component {
 
   renderLogo() {
     return (
-      <EuiHeaderLogo href="#" />
+      <EuiHeaderLogo href="#" aria-label="Go to home page" />
     );
   }
 
   renderBreadcrumbs() {
-    return (
-      <EuiHeaderBreadcrumbs>
-        <EuiHeaderBreadcrumb href="#">
-          Management
-        </EuiHeaderBreadcrumb>
-
-        <EuiHeaderBreadcrumb href="#">
-          Truncation test is here
-        </EuiHeaderBreadcrumb>
-
-        <EuiHeaderBreadcrumbCollapsed />
+    const breadcrumbs = [{
+      text: 'Management',
+      href: '#',
+      onClick: (e) => { e.preventDefault(); console.log('You clicked management'); },
+      'data-test-subj': 'breadcrumbsAnimals',
+      className: 'customClass',
+    }, {
+      text: 'Truncation test is here for a really long item',
+      href: '#',
+      onClick: (e) => { e.preventDefault(); console.log('You clicked truncation test'); },
+    }, {
+      text: 'hidden',
+      href: '#',
+      onClick: (e) => { e.preventDefault(); console.log('You clicked hidden'); },
+    }, {
+      text: 'Users',
+      href: '#',
+      onClick: (e) => { e.preventDefault(); console.log('You clicked users'); },
+    }, {
+      text: 'Create',
+    }];
 
-        <EuiHeaderBreadcrumb href="#">
-          Users
-        </EuiHeaderBreadcrumb>
-
-        <EuiHeaderBreadcrumb href="#" isActive>
-          Create
-        </EuiHeaderBreadcrumb>
-      </EuiHeaderBreadcrumbs>
+    return (
+      <EuiHeaderBreadcrumbs breadcrumbs={breadcrumbs} />
     );
   }
 
   renderSearch() {
     return (
-      <EuiHeaderSectionItemButton>
+      <EuiHeaderSectionItemButton aria-label="Search">
         <EuiIcon
           type="search"
           size="m"

src-docs/src/views/header/header_app_menu.js

@@ -33,7 +33,13 @@ export default class extends Component {
 
   render() {
     const button = (
-      <EuiHeaderSectionItemButton onClick={this.onMenuButtonClick}>
+      <EuiHeaderSectionItemButton
+        aria-controls="keyPadMenu"
+        aria-expanded={this.state.isOpen}
+        aria-haspopup="true"
+        aria-label="Apps menu"
+        onClick={this.onMenuButtonClick}
+      >
         <EuiIcon type="apps" size="m" />
       </EuiHeaderSectionItemButton>
     );
@@ -48,7 +54,7 @@ export default class extends Component {
         closePopover={this.closeMenu}
         panelClassName="euiHeaderPopover"
       >
-        <EuiKeyPadMenu>
+        <EuiKeyPadMenu id="keyPadMenu">
           <EuiKeyPadMenuItem
             label="Discover"
             href="#"

src-docs/src/views/header/header_example.js

@@ -8,19 +8,24 @@ import {
 
 import {
   EuiHeader,
-  EuiHeaderBreadcrumb,
-  EuiHeaderBreadcrumbCollapsed,
   EuiHeaderBreadcrumbs,
   EuiHeaderSection,
   EuiHeaderSectionItem,
   EuiHeaderSectionItemButton,
   EuiHeaderLogo,
+  EuiCode,
+  EuiHeaderLinks,
+  EuiHeaderLink,
 } from '../../../../src/components';
 
 import Header from './header';
 const headerSource = require('!!raw-loader!./header');
 const headerHtml = renderToHtml(Header);
 
+import HeaderLinks from './header_links';
+const headerLinksSource = require('!!raw-loader!./header_links');
+const headerLinksHtml = renderToHtml(HeaderLinks);
+
 export const HeaderExample = {
   title: 'Header',
   sections: [{
@@ -38,14 +43,31 @@ export const HeaderExample = {
     ),
     props: {
       EuiHeader,
-      EuiHeaderBreadcrumb,
-      EuiHeaderBreadcrumbCollapsed,
       EuiHeaderBreadcrumbs,
       EuiHeaderSection,
       EuiHeaderSectionItem,
       EuiHeaderSectionItemButton,
       EuiHeaderLogo,
     },
     demo: <Header />,
+  },{
+    title: "Links",
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: headerLinksSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: headerLinksHtml,
+    }],
+    text: (
+      <p>
+        If you&rsquo;re using EUI in a one-off site or page, you can use <EuiCode>EuiHeaderLinks</EuiCode>, <EuiCode>EuiHeaderLink</EuiCode>s instead of breadcrumbs.
+      </p>
+    ),
+    props: {
+      EuiHeaderLinks,
+      EuiHeaderLink
+    },
+    demo: <HeaderLinks />,
   }],
 };

src-docs/src/views/header/header_links.js

@@ -0,0 +1,49 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiHeader,
+  EuiHeaderSectionItem,
+  EuiHeaderLogo,
+  EuiHeaderLinks,
+  EuiHeaderLink,
+} from '../../../../src/components';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isAppMenuOpen: false,
+    };
+  }
+
+  render() {
+    return (
+      <EuiHeader>
+
+        <EuiHeaderSectionItem border="right">
+          <EuiHeaderLogo href="#">
+            Product
+          </EuiHeaderLogo>
+        </EuiHeaderSectionItem>
+
+        <EuiHeaderLinks>
+          <EuiHeaderLink href="#" isActive>
+            Docs
+          </EuiHeaderLink>
+
+          <EuiHeaderLink href="#">
+            Code
+          </EuiHeaderLink>
+
+          <EuiHeaderLink iconType="help" href="#">
+            Help
+          </EuiHeaderLink>
+        </EuiHeaderLinks>
+
+      </EuiHeader>
+    );
+  }
+}

src-docs/src/views/header/header_user_menu.js

@@ -39,7 +39,13 @@ export default class extends Component {
 
   render() {
     const button = (
-      <EuiHeaderSectionItemButton onClick={this.onMenuButtonClick}>
+      <EuiHeaderSectionItemButton
+        aria-controls="headerUserMenu"
+        aria-expanded={this.state.isOpen}
+        aria-haspopup="true"
+        aria-label="Account menu"
+        onClick={this.onMenuButtonClick}
+      >
         <EuiIcon
           type="user"
           size="m"

src/components/breadcrumbs/__snapshots__/breadcrumbs.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiBreadcrumbs is rendered 1`] = `
-<div
+<nav
   aria-label="aria-label"
   class="euiBreadcrumbs testClass1 testClass2 euiBreadcrumbs--truncate euiBreadcrumbs--responsive"
   data-test-subj="test subject string"
@@ -40,16 +40,18 @@ exports[`EuiBreadcrumbs is rendered 1`] = `
     class="euiBreadcrumbSeparator"
   />
   <span
+    aria-current="page"
     class="euiBreadcrumb euiBreadcrumb--last"
     title="Edit"
   >
     Edit
   </span>
-</div>
+</nav>
 `;
 
 exports[`EuiBreadcrumbs props max doesn't break when max exceeds the number of breadcrumbs 1`] = `
-<div
+<nav
+  aria-label="breadcrumb"
   class="euiBreadcrumbs euiBreadcrumbs--truncate euiBreadcrumbs--responsive"
 >
   <button
@@ -83,16 +85,18 @@ exports[`EuiBreadcrumbs props max doesn't break when max exceeds the number of b
     class="euiBreadcrumbSeparator"
   />
   <span
+    aria-current="page"
     class="euiBreadcrumb euiBreadcrumb--last"
     title="Edit"
   >
     Edit
   </span>
-</div>
+</nav>
 `;
 
 exports[`EuiBreadcrumbs props max renders 1 item 1`] = `
-<div
+<nav
+  aria-label="breadcrumb"
   class="euiBreadcrumbs euiBreadcrumbs--truncate euiBreadcrumbs--responsive"
 >
   <div
@@ -104,16 +108,18 @@ exports[`EuiBreadcrumbs props max renders 1 item 1`] = `
     class="euiBreadcrumbSeparator"
   />
   <span
+    aria-current="page"
     class="euiBreadcrumb euiBreadcrumb--last"
     title="Edit"
   >
     Edit
   </span>
-</div>
+</nav>
 `;
 
 exports[`EuiBreadcrumbs props max renders 2 items 1`] = `
-<div
+<nav
+  aria-label="breadcrumb"
   class="euiBreadcrumbs euiBreadcrumbs--truncate euiBreadcrumbs--responsive"
 >
   <button
@@ -135,16 +141,18 @@ exports[`EuiBreadcrumbs props max renders 2 items 1`] = `
     class="euiBreadcrumbSeparator"
   />
   <span
+    aria-current="page"
     class="euiBreadcrumb euiBreadcrumb--last"
     title="Edit"
   >
     Edit
   </span>
-</div>
+</nav>
 `;
 
 exports[`EuiBreadcrumbs props max renders 3 items 1`] = `
-<div
+<nav
+  aria-label="breadcrumb"
   class="euiBreadcrumbs euiBreadcrumbs--truncate euiBreadcrumbs--responsive"
 >
   <button
@@ -176,16 +184,18 @@ exports[`EuiBreadcrumbs props max renders 3 items 1`] = `
     class="euiBreadcrumbSeparator"
   />
   <span
+    aria-current="page"
     class="euiBreadcrumb euiBreadcrumb--last"
     title="Edit"
   >
     Edit
   </span>
-</div>
+</nav>
 `;
 
 exports[`EuiBreadcrumbs props responsive is rendered 1`] = `
-<div
+<nav
+  aria-label="breadcrumb"
   class="euiBreadcrumbs euiBreadcrumbs--truncate euiBreadcrumbs--responsive"
 >
   <button
@@ -219,16 +229,18 @@ exports[`EuiBreadcrumbs props responsive is rendered 1`] = `
     class="euiBreadcrumbSeparator"
   />
   <span
+    aria-current="page"
     class="euiBreadcrumb euiBreadcrumb--last"
     title="Edit"
   >
     Edit
   </span>
-</div>
+</nav>
 `;
 
 exports[`EuiBreadcrumbs props truncate is rendered 1`] = `
-<div
+<nav
+  aria-label="breadcrumb"
   class="euiBreadcrumbs euiBreadcrumbs--truncate euiBreadcrumbs--responsive"
 >
   <button
@@ -262,10 +274,11 @@ exports[`EuiBreadcrumbs props truncate is rendered 1`] = `
     class="euiBreadcrumbSeparator"
   />
   <span
+    aria-current="page"
     class="euiBreadcrumb euiBreadcrumb--last"
     title="Edit"
   >
     Edit
   </span>
-</div>
+</nav>
 `;

src/components/breadcrumbs/_breadcrumbs.scss

@@ -1,5 +1,5 @@
 .euiBreadcrumbs {
-  font-size: $euiFontSizeS;
+  @include euiFontSizeS;
 }
 
 .euiBreadcrumb {