From 762469a69b0624b70e1ac0b26006782ff95d8b70 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Tue, 8 Oct 2019 10:49:36 -0500 Subject: [PATCH 01/11] updated docs and added focus state to button --- src-docs/src/views/list_group/list_group.js | 19 +++++++++++++++---- .../src/views/list_group/list_group_extra.js | 10 ++++++++-- .../list_group/_list_group_item.scss | 8 ++++++-- 3 files changed, 29 insertions(+), 8 deletions(-) diff --git a/src-docs/src/views/list_group/list_group.js b/src-docs/src/views/list_group/list_group.js index e0fb8363877..b53b5e1cef4 100644 --- a/src-docs/src/views/list_group/list_group.js +++ b/src-docs/src/views/list_group/list_group.js @@ -30,6 +30,9 @@ export default class extends Component { render() { const { flushWidth, showBorder } = this.state; + const handleOnClick = () => { + alert('Item was clicked'); + }; return ( @@ -61,13 +64,21 @@ export default class extends Component { - + - + - + - + ); diff --git a/src-docs/src/views/list_group/list_group_extra.js b/src-docs/src/views/list_group/list_group_extra.js index e8a134aeb4f..a9b29e472b4 100644 --- a/src-docs/src/views/list_group/list_group_extra.js +++ b/src-docs/src/views/list_group/list_group_extra.js @@ -2,13 +2,18 @@ import React from 'react'; import { EuiListGroup, EuiListGroupItem } from '../../../../src/components'; +const handleOnClick = () => { + alert('Item was clicked'); +}; + export default () => ( - + - + Third very, very long item that will surely force @@ -18,6 +23,7 @@ export default () => ( /> diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss index 115d4b2a67c..acd23bbd76f 100644 --- a/src/components/list_group/_list_group_item.scss +++ b/src/components/list_group/_list_group_item.scss @@ -13,11 +13,15 @@ } &.euiListGroupItem-isActive, - &.euiListGroupItem-isClickable:hover, - &.euiListGroupItem-isClickable:focus { + &.euiListGroupItem-isClickable:hover { background-color: tintOrShade($euiColorLightestShade, 0%, 30%); } + &.euiListGroupItem-isClickable .euiListGroupItem__button:focus { + background-color: tintOrShade($euiColorLightestShade, 0%, 30%); + } + + &.euiListGroupItem-isClickable:hover .euiListGroupItem__label, &.euiListGroupItem-isClickable:focus .euiListGroupItem__label { text-decoration: underline; From f7395298fb7900890e814a502a8d6d721f88d239 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Tue, 8 Oct 2019 12:33:35 -0500 Subject: [PATCH 02/11] cl --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0346eaf0d89..43d33b7df8e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - Added new `EuiColorStops` component ([#2360](https://github.com/elastic/eui/pull/2360)) - Added `currency` glyph to 'EuiIcon' ([#2398](https://github.com/elastic/eui/pull/2398)) - Migrate `EuiBreadcrumbs`, `EuiHeader` etc, and `EuiLink` to TypeScript ([#2391](https://github.com/elastic/eui/pull/2391)) +- Added focus state to `EuiListGroupItem` ([#2406](https://github.com/elastic/eui/pull/2406)) **Bug fixes** From 9d96b7e55dd1982da25abdaf32c973ae215f3510 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Tue, 8 Oct 2019 19:38:29 -0500 Subject: [PATCH 03/11] trying to make aria-label dynamic --- src-docs/src/views/nav_drawer/nav_drawer.js | 30 +++++++------ src/components/nav_drawer/_nav_drawer.scss | 6 ++- src/components/nav_drawer/nav_drawer.js | 47 ++++++++++++--------- 3 files changed, 49 insertions(+), 34 deletions(-) diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index 04df1470330..618f0d0d242 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -50,7 +50,11 @@ export default class extends Component { color: 'subdued', iconType: 'pin', iconSize: 's', - 'aria-label': 'Pin to top', + // 'aria-label': 'Pin to top', + }; + + const pinExtraActionFn = val => { + pinExtraAction['aria-label'] = `Pin ${val} to top`; }; this.topLinks = [ @@ -132,35 +136,35 @@ export default class extends Component { label: 'Discover', href: '#/layout/nav-drawer', iconType: 'discoverApp', - extraAction: pinExtraAction, + extraAction: pinExtraActionFn('Discover'), }, { label: 'Visualize', href: '#/layout/nav-drawer', iconType: 'visualizeApp', - extraAction: pinExtraAction, + extraAction: pinExtraActionFn('Visualize'), }, { label: 'Dashboard', href: '#/layout/nav-drawer', iconType: 'dashboardApp', - extraAction: pinExtraAction, + extraAction: pinExtraActionFn('Dashboard'), }, { label: 'Machine learning', href: '#/layout/nav-drawer', iconType: 'machineLearningApp', - extraAction: pinExtraAction, + extraAction: pinExtraActionFn('Machine learning'), }, { label: 'Custom Plugin (no icon)', href: '#/layout/nav-drawer', - extraAction: pinExtraAction, + extraAction: pinExtraActionFn('Custom Plugin'), }, { label: 'Nature Plugin (image as icon)', href: '#/layout/nav-drawer', - extraAction: pinExtraAction, + extraAction: pinExtraActionFn('Nature Plugin'), icon: ( + this.closeBoth()} isDisabled={this.state.outsideClickDisabled}> -
- - - - - {flyoutContent} -
+ ); } From 6d3827ce620a550de49f55b58fad10353a8d450a Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Tue, 8 Oct 2019 20:05:25 -0500 Subject: [PATCH 04/11] trying to make aria-label dynamic --- src-docs/src/views/nav_drawer/nav_drawer.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index 618f0d0d242..846f27bdbb8 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -55,6 +55,7 @@ export default class extends Component { const pinExtraActionFn = val => { pinExtraAction['aria-label'] = `Pin ${val} to top`; + return pinExtraAction; }; this.topLinks = [ @@ -128,7 +129,7 @@ export default class extends Component { iconType: 'canvasApp', isActive: true, extraAction: { - ...pinExtraAction, + ...pinExtraActionFn('Canvas'), alwaysShow: true, }, }, From 8d4588b9672f1c063166569fe633dc1447f34195 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 9 Oct 2019 15:13:22 -0500 Subject: [PATCH 05/11] added missing underline property --- src/components/list_group/_list_group_item.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss index acd23bbd76f..a20818d26b8 100644 --- a/src/components/list_group/_list_group_item.scss +++ b/src/components/list_group/_list_group_item.scss @@ -19,6 +19,7 @@ &.euiListGroupItem-isClickable .euiListGroupItem__button:focus { background-color: tintOrShade($euiColorLightestShade, 0%, 30%); + text-decoration: underline; } From 230e5a20b94617a00e423e74d801b7fd7f133f5c Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 9 Oct 2019 16:23:17 -0500 Subject: [PATCH 06/11] making hover and focus behave differently --- src/components/list_group/_list_group_item.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss index a20818d26b8..e0434fc62a2 100644 --- a/src/components/list_group/_list_group_item.scss +++ b/src/components/list_group/_list_group_item.scss @@ -22,12 +22,6 @@ text-decoration: underline; } - - &.euiListGroupItem-isClickable:hover .euiListGroupItem__label, - &.euiListGroupItem-isClickable:focus .euiListGroupItem__label { - text-decoration: underline; - } - // Style all disabled list items whether or not they are links or buttons &.euiListGroupItem-isDisabled, &.euiListGroupItem-isDisabled:hover, From 03f44a1832eb231c87f6cd36879ef83d6727dc25 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 9 Oct 2019 17:35:36 -0500 Subject: [PATCH 07/11] updated aria-labels --- src-docs/src/views/nav_drawer/nav_drawer.js | 24 ++++++++++----------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index 846f27bdbb8..fd37f391176 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -137,35 +137,35 @@ export default class extends Component { label: 'Discover', href: '#/layout/nav-drawer', iconType: 'discoverApp', - extraAction: pinExtraActionFn('Discover'), + extraAction: { ...pinExtraActionFn('Discover') }, }, { label: 'Visualize', href: '#/layout/nav-drawer', iconType: 'visualizeApp', - extraAction: pinExtraActionFn('Visualize'), + extraAction: { ...pinExtraActionFn('Visualize') }, }, { label: 'Dashboard', href: '#/layout/nav-drawer', iconType: 'dashboardApp', - extraAction: pinExtraActionFn('Dashboard'), + extraAction: { ...pinExtraActionFn('Dashboard') }, }, { label: 'Machine learning', href: '#/layout/nav-drawer', iconType: 'machineLearningApp', - extraAction: pinExtraActionFn('Machine learning'), + extraAction: { ...pinExtraActionFn('Machine learning') }, }, { label: 'Custom Plugin (no icon)', href: '#/layout/nav-drawer', - extraAction: pinExtraActionFn('Custom Plugin'), + extraAction: { ...pinExtraActionFn('Custom Plugin') }, }, { label: 'Nature Plugin (image as icon)', href: '#/layout/nav-drawer', - extraAction: pinExtraActionFn('Nature Plugin'), + extraAction: { ...pinExtraActionFn('Nature Plugin') }, icon: ( Date: Thu, 10 Oct 2019 15:57:46 -0500 Subject: [PATCH 08/11] remove unneeded line --- src-docs/src/views/nav_drawer/nav_drawer.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index fd37f391176..29a81960b07 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -50,7 +50,6 @@ export default class extends Component { color: 'subdued', iconType: 'pin', iconSize: 's', - // 'aria-label': 'Pin to top', }; const pinExtraActionFn = val => { From 14302212e094585086014cac110da82918c78f83 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 10 Oct 2019 16:53:35 -0500 Subject: [PATCH 09/11] cl --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 43d33b7df8e..7fbc69df170 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ - Added `currency` glyph to 'EuiIcon' ([#2398](https://github.com/elastic/eui/pull/2398)) - Migrate `EuiBreadcrumbs`, `EuiHeader` etc, and `EuiLink` to TypeScript ([#2391](https://github.com/elastic/eui/pull/2391)) - Added focus state to `EuiListGroupItem` ([#2406](https://github.com/elastic/eui/pull/2406)) +- Improved a11y in `EuiNavDrawer` ([#2417](https://github.com/elastic/eui/pull/2417)) **Bug fixes** From a7de7127380984a99978ea35165785dc865e997e Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Fri, 11 Oct 2019 16:07:51 -0500 Subject: [PATCH 10/11] use nav and avoid a11y error --- src/components/nav_drawer/nav_drawer.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js index 37238d76c20..fb51841fb87 100644 --- a/src/components/nav_drawer/nav_drawer.js +++ b/src/components/nav_drawer/nav_drawer.js @@ -6,7 +6,7 @@ import { EuiNavDrawerFlyout } from './nav_drawer_flyout'; import { EuiNavDrawerGroup } from './nav_drawer_group'; import { EuiOutsideClickDetector } from '../outside_click_detector'; import { EuiI18n } from '../i18n'; -import { EuiFlexItem } from '../flex'; +import { EuiFlexItem, EuiFlexGroup } from '../flex'; import { throttle } from '../color_picker/utils'; export class EuiNavDrawer extends Component { @@ -324,12 +324,12 @@ export class EuiNavDrawer extends Component { this.closeBoth()} isDisabled={this.state.outsideClickDisabled}> - ); From 6c63fab7e50614e1c2a04b7bdcf62f7636c0575d Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Mon, 14 Oct 2019 08:39:16 -0500 Subject: [PATCH 11/11] remove role=presentation --- src/components/nav_drawer/nav_drawer.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js index fb51841fb87..4c9c54ea840 100644 --- a/src/components/nav_drawer/nav_drawer.js +++ b/src/components/nav_drawer/nav_drawer.js @@ -327,7 +327,6 @@ export class EuiNavDrawer extends Component {