Skip to content

Commit

Permalink
EuiNavDrawer focus management, flyout auto-close (#2749)
Browse files Browse the repository at this point in the history 
* nav drawer focus; nav drawer flyout autoclose

* clean up

* update example

* aria improvements

* more a11y

* CL

* tabbables trial

* formalize tab-through

* fix grouping

* fix fav text

* update delay for focus management

* fix firefox expansion

Co-authored-by: dave.snider@gmail.com <dave.snider@gmail.com>
  • Loading branch information
@thompsongl @snide
thompsongl and snide authored Jan 10, 2020
1 parent d4b0cf2 commit c0dc52d
Show file tree
Hide file tree
Showing 8 changed files with 398 additions and 175 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
- Converted `EuiRangeInput` to TypeScript ([#2732](https://github.com/elastic/eui/pull/2732))
- Added `bellSlash` glyph to `EuiIcon` ([#2714](https://github.com/elastic/eui/pull/2714))
- Added `legend` prop to `EuiCheckboxGroup` and `EuiRadioGroup` to add `EuiFieldset` wrappers for title the groups ([#2739](https://github.com/elastic/eui/pull/2739))
- Changed `EuiNavDrawerFlyout` to close after child nav items are clicked ([#2749](https://github.com/elastic/eui/pull/2749))
- Changed `EuiNavDrawerFlyout` to trap focus while navigating via keyboard ([#2749](https://github.com/elastic/eui/pull/2749))

**Bug fixes**

Expand Down
326 changes: 227 additions & 99 deletions src-docs/src/views/nav_drawer/nav_drawer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,137 +121,264 @@ export default class extends Component {
},
];

this.exploreLinks = [
this.adminLinks = [
{
label: 'Canvas',
href: '#/layout/nav-drawer',
iconType: 'canvasApp',
isActive: true,
extraAction: {
...pinExtraActionFn('Canvas'),
alwaysShow: true,
label: 'Admin',
iconType: 'managementApp',
flyoutMenu: {
title: 'Tools and settings',
listItems: [
{
label: 'Dev tools',
href: '#/layout/nav-drawer',
iconType: 'devToolsApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add to Tools and Settings to favorites',
},
},
{
label: 'Stack Monitoring',
href: '#/layout/nav-drawer',
iconType: 'monitoringApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add Stack Monitoring to favorites',
},
},
{
label: 'Stack Management',
href: '#/layout/nav-drawer',
iconType: 'managementApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add Stack Management to favorites',
},
},
{
label: 'Nature Plugin (image as icon)',
href: '#/layout/nav-drawer',
extraAction: { ...pinExtraActionFn('Nature Plugin') },
icon: (
<EuiImage
size="s"
alt="Random nature image"
url="https://source.unsplash.com/300x300/?Nature"
/>
),
},
],
},
},
{
label: 'Discover',
href: '#/layout/nav-drawer',
iconType: 'discoverApp',
extraAction: { ...pinExtraActionFn('Discover') },
},
{
label: 'Visualize',
href: '#/layout/nav-drawer',
iconType: 'visualizeApp',
extraAction: { ...pinExtraActionFn('Visualize') },
},
{
label: 'Dashboard',
href: '#/layout/nav-drawer',
iconType: 'dashboardApp',
extraAction: { ...pinExtraActionFn('Dashboard') },
},
{
label: 'Machine learning',
href: '#/layout/nav-drawer',
iconType: 'machineLearningApp',
extraAction: { ...pinExtraActionFn('Machine learning') },
},
{
label: 'Custom Plugin (no icon)',
href: '#/layout/nav-drawer',
extraAction: { ...pinExtraActionFn('Custom Plugin') },
},
{
label: 'Nature Plugin (image as icon)',
href: '#/layout/nav-drawer',
extraAction: { ...pinExtraActionFn('Nature Plugin') },
icon: (
<EuiImage
size="s"
alt="Random nature image"
url="https://source.unsplash.com/300x300/?Nature"
/>
),
},
];

this.solutionsLinks = [
{
label: 'APM',
href: '#/layout/nav-drawer',
iconType: 'apmApp',
extraAction: { ...pinExtraActionFn('APM') },
},
{
label: 'Metrics',
href: '#/layout/nav-drawer',
iconType: 'metricsApp',
extraAction: { ...pinExtraActionFn('Infrastructure') },
},
this.analyzeLinks = [
{
label: 'Logs',
href: '#/layout/nav-drawer',
iconType: 'logsApp',
extraAction: { ...pinExtraActionFn('Log viewer') },
},
{
label: 'Uptime',
href: '#/layout/nav-drawer',
iconType: 'upgradeAssistantApp',
extraAction: { ...pinExtraActionFn('Uptime') },
label: 'Analyze',
iconType: 'logoBusinessAnalytics',
flyoutMenu: {
title: 'Analyze your data',
listItems: [
{
label: 'Discover',
href: '#/layout/nav-drawer',
iconType: 'discoverApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add Discover to favorites',
},
},
{
label: 'Visualize',
href: '#/layout/nav-drawer',
iconType: 'visualizeApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add Visualize to favorites',
},
},
{
label: 'Canvas',
href: '#/layout/nav-drawer',
iconType: 'canvasApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add Canvas to favorites',
},
},
{
label: 'Maps',
href: '#/layout/nav-drawer',
iconType: 'gisApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add Maps to favorites',
},
},
{
label: 'Machine Learning',
href: '#/layout/nav-drawer',
iconType: 'machineLearningApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add Machine Learning to favorites',
},
},
{
label: 'Graph',
href: '#/layout/nav-drawer',
iconType: 'graphApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add Graph to favorites',
},
},
],
},
},
];

this.securityLinks = [
{
label: 'Maps',
href: '#/layout/nav-drawer',
iconType: 'gisApp',
extraAction: { ...pinExtraActionFn('Maps') },
label: 'Security',
iconType: 'logoSecurity',
flyoutMenu: {
title: 'Security',
listItems: [
{
label: 'SIEM',
href: '#/layout/nav-drawer',
iconType: 'securityApp',
extraAction: { ...pinExtraActionFn('SIEM') },
},
{
label: 'Endpoints',
href: '#/layout/nav-drawer',
iconType: 'securityAnalyticsApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add SIEM to favorites',
},
},
],
},
},
];

this.searchLinks = [
{
label: 'SIEM',
href: '#/layout/nav-drawer',
iconType: 'securityAnalyticsApp',
extraAction: { ...pinExtraActionFn('SIEM') },
label: 'Enterprise Search',
iconType: 'logoAppSearch',
flyoutMenu: {
title: 'Enterprise search',
listItems: [
{
label: 'Site search',
href: '#/layout/nav-drawer',
iconType: 'searchProfilerApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add Enterprise search to favorites',
},
},
{
label: 'App search',
href: '#/layout/nav-drawer',
iconType: 'searchProfilerApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add App Search to favorites',
},
},
{
label: 'Workplace search',
href: '#/layout/nav-drawer',
iconType: 'searchProfilerApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add Workplace Search to favorites',
},
},
],
},
},
];

this.adminLinks = [
this.observabilityLinks = [
{
label: 'Admin',
iconType: 'managementApp',
label: 'Observability',
iconType: 'logoMetrics',
flyoutMenu: {
title: 'Tools and settings',
title: 'Observe your operations',
listItems: [
{
label: 'Dev tools',
label: 'Logs',
href: '#/layout/nav-drawer',
iconType: 'devToolsApp',
iconType: 'logsApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add to favorites',
'aria-label': 'Add Logs to favorites',
},
},
{
label: 'Stack Monitoring',
label: 'Metrics',
href: '#/layout/nav-drawer',
iconType: 'monitoringApp',
iconType: 'metricsApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add to favorites',
'aria-label': 'Add Metrics to favorites',
},
},
{
label: 'Stack Management',
label: 'APM',
href: '#/layout/nav-drawer',
iconType: 'managementApp',
iconType: 'apmApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add to favorites',
'aria-label': 'Add APM to favorites',
},
},
{
label: 'Uptime',
href: '#/layout/nav-drawer',
iconType: 'uptimeApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add Uptime to favorites',
},
},
],
Expand All @@ -262,9 +389,9 @@ export default class extends Component {

onKeyDown = event => {
if (event.keyCode === keyCodes.ESCAPE) {
event.preventDefault();
event.stopPropagation();
this.closeFullScreen();
// event.preventDefault();
// event.stopPropagation();
// this.closeFullScreen();
}
};

Expand Down Expand Up @@ -387,9 +514,10 @@ export default class extends Component {
<EuiNavDrawer ref={this.setNavDrawerRef}>
<EuiNavDrawerGroup listItems={this.topLinks} />
<EuiHorizontalRule margin="none" />
<EuiNavDrawerGroup listItems={this.exploreLinks} />
<EuiHorizontalRule margin="none" />
<EuiNavDrawerGroup listItems={this.solutionsLinks} />
<EuiNavDrawerGroup listItems={this.analyzeLinks} />
<EuiNavDrawerGroup listItems={this.securityLinks} />
<EuiNavDrawerGroup listItems={this.searchLinks} />
<EuiNavDrawerGroup listItems={this.observabilityLinks} />
<EuiHorizontalRule margin="none" />
<EuiNavDrawerGroup listItems={this.adminLinks} />
</EuiNavDrawer>
Expand Down
Loading

0 comments on commit c0dc52d

Please sign in to comment.