From 956f9aacc18b394d3214faa569ed580df6071cae Mon Sep 17 00:00:00 2001 From: Felipe Vega Date: Fri, 26 Mar 2021 13:02:29 -0700 Subject: [PATCH 1/8] Enabling accessibility --- src/Nav.jsx | 3 +- src/NavItem.jsx | 95 +++++++++++++++++++++++++++------------- src/sidenav-navitem.styl | 36 +++++++-------- 3 files changed, 84 insertions(+), 50 deletions(-) diff --git a/src/Nav.jsx b/src/Nav.jsx index 544ef05..f57758d 100644 --- a/src/Nav.jsx +++ b/src/Nav.jsx @@ -104,9 +104,10 @@ class Nav extends PureComponent { { [styles.expanded]: expanded } )} > - {React.Children.map(children, child => { + {React.Children.map(children, (child, key) => { if (React.isValidElement(child) && this.isNavItem(child)) { return this.renderNavItem(child, { + tabIndex: child.props.tabIndexPosition || key, onSelect, selected: currentSelected, expanded: (!!child.props.expanded) || diff --git a/src/NavItem.jsx b/src/NavItem.jsx index 3386fe3..f72b9bf 100644 --- a/src/NavItem.jsx +++ b/src/NavItem.jsx @@ -86,6 +86,20 @@ class NavItem extends PureComponent { } }; + preventDefault = (event) => { + event.preventDefault(); + }; + + onKeyDown = (event) => { + const SPACEBAR_CODE = 32; + const ENTER_KEY = 13; + const isSpaceKey = e.keyCode === SPACEBAR_CODE; + const isEnterKey = e.keyCode === ENTER_KEY; + if (isSpaceKey || isEnterKey) { + event.target.click(); + } + } + render() { const { componentType, // eslint-disable-line @@ -99,6 +113,7 @@ class NavItem extends PureComponent { // Nav props selected, + tabIndex, // Sub navigation item subnav, @@ -141,25 +156,32 @@ class NavItem extends PureComponent { })} style={style} > -
- {navIcon && -
- } - {navText && -
- } -
+
+ {navIcon && +
+ } + {navText && +
+ } +
+ ); } @@ -208,26 +230,37 @@ class NavItem extends PureComponent { })} style={style} > -
- {navIcon && -
- } - {navText && -
- } - {others} -
+
+ {navIcon && +
+ } + {navText && +
+ } + {others} +
+ {(navItems.length > 0) &&
.navitem { + &.highlighted > a > .navitem { cursor: default; } - &:hover > .navitem::after { + &:hover > a > .navitem::after { background: #fff; opacity: .15; } - &.highlighted > .navitem::after, + &.highlighted > a > .navitem::after, &:hover.highlighted > .navitem::after { background: #000; opacity: .2; } - &.highlighted.expanded > .navitem::after, - &:hover.highlighted.expanded > .navitem::after { + &.highlighted.expanded > a > .navitem::after, + &:hover.highlighted.expanded > a > .navitem::after { background: #000; opacity: .25; } - &.highlighted.selected.expanded > .navitem::after, - &:hover.highlighted.selected.expanded > .navitem::after { + &.highlighted.selected.expanded > a > .navitem::after, + &:hover.highlighted.selected.expanded > a > .navitem::after { background: #000; opacity: .2; } - &:hover > .navitem .navicon, - &.highlighted > .navitem .navicon { + &:hover > a > .navitem .navicon, + &.highlighted > a > .navitem .navicon { opacity: 1; } - &:hover > .navitem .navicon, - &:hover > .navitem .navtext, - &.highlighted > .navitem .navicon, - &.highlighted > .navitem .navtext { + &:hover > a > .navitem .navicon, + &:hover > a > .navitem .navtext, + &.highlighted > a > .navitem .navicon, + &.highlighted > a > .navitem .navtext { color: #fff; > * { color: #fff; } } - > .navitem { + > a > .navitem { position: relative; display: block; line-height: 50px; @@ -73,15 +73,15 @@ } } - > .navitem .navicon, - > .navitem .navtext { + > a > .navitem .navicon, + > a > .navitem .navtext { color: #f9dcdd; > * { color: #f9dcdd; } } - > .navitem .navicon { + > a > .navitem .navicon { display: block; float: left; width: 64px; @@ -96,7 +96,7 @@ text-align: center; } - > .navitem .navicon + .navtext { + > a > .navitem .navicon + .navtext { width: 0; visibility: hidden; opacity: 0; From 07d558690efa10b166cece729a36ea5a09344b1f Mon Sep 17 00:00:00 2001 From: Felipe Vega Date: Fri, 26 Mar 2021 13:09:37 -0700 Subject: [PATCH 2/8] Removing old node_js version from travis to avoid issues at building time --- .travis.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index a606097..e128999 100644 --- a/.travis.yml +++ b/.travis.yml @@ -8,7 +8,6 @@ os: - linux node_js: - - '8' - '10' before_install: From d64958cc4b62ef391bbd53e91bccd37fd35d7fff Mon Sep 17 00:00:00 2001 From: Felipe Vega Date: Fri, 26 Mar 2021 13:21:14 -0700 Subject: [PATCH 3/8] Upgrading nodejs version to 14 --- .travis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index e128999..59b10d2 100644 --- a/.travis.yml +++ b/.travis.yml @@ -8,7 +8,7 @@ os: - linux node_js: - - '10' + - '14' before_install: - npm install -g npm From c88042a45da7913a9c4251d676f2e21f8967fb24 Mon Sep 17 00:00:00 2001 From: Felipe Vega Date: Fri, 26 Mar 2021 13:24:09 -0700 Subject: [PATCH 4/8] Disabling npm cache --- .travis.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.travis.yml b/.travis.yml index 59b10d2..1ffafac 100644 --- a/.travis.yml +++ b/.travis.yml @@ -10,6 +10,9 @@ os: node_js: - '14' +cache: + npm: false + before_install: - npm install -g npm - npm --version From 8f4827491cc9e6d65f96c349391617b771a647b0 Mon Sep 17 00:00:00 2001 From: Felipe Vega Date: Fri, 26 Mar 2021 13:27:51 -0700 Subject: [PATCH 5/8] Forcing npm install with --legacy-peer-deps --- .travis.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.travis.yml b/.travis.yml index 1ffafac..bc7771e 100644 --- a/.travis.yml +++ b/.travis.yml @@ -10,8 +10,8 @@ os: node_js: - '14' -cache: - npm: false +before_script: + - npm install --legacy-peer-deps before_install: - npm install -g npm From 057516d6348fefbad20753b3a38c0ee2a53c1ff5 Mon Sep 17 00:00:00 2001 From: Felipe Vega Date: Fri, 26 Mar 2021 13:33:23 -0700 Subject: [PATCH 6/8] Forcing npm install to avoid issues with legacy deps --- .travis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index bc7771e..57fc49a 100644 --- a/.travis.yml +++ b/.travis.yml @@ -10,7 +10,7 @@ os: node_js: - '14' -before_script: +install: - npm install --legacy-peer-deps before_install: From 8da219ab0adb01a6f7a9a5b10d2e89a9bf5d7216 Mon Sep 17 00:00:00 2001 From: Felipe Vega Date: Fri, 26 Mar 2021 13:43:15 -0700 Subject: [PATCH 7/8] Correcting typo and adding propType --- src/NavItem.jsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/NavItem.jsx b/src/NavItem.jsx index f72b9bf..823bd55 100644 --- a/src/NavItem.jsx +++ b/src/NavItem.jsx @@ -56,7 +56,9 @@ class NavItem extends PureComponent { navitemClassName: PropTypes.string, navitemStyle: PropTypes.object, subnavClassName: PropTypes.string, - subnavStyle: PropTypes.object + subnavStyle: PropTypes.object, + + tabIndex: PropTypes.string, }; static defaultProps = { componentClass: 'div', @@ -93,8 +95,8 @@ class NavItem extends PureComponent { onKeyDown = (event) => { const SPACEBAR_CODE = 32; const ENTER_KEY = 13; - const isSpaceKey = e.keyCode === SPACEBAR_CODE; - const isEnterKey = e.keyCode === ENTER_KEY; + const isSpaceKey = event.keyCode === SPACEBAR_CODE; + const isEnterKey = event.keyCode === ENTER_KEY; if (isSpaceKey || isEnterKey) { event.target.click(); } From 123dc4130138b774cfbc2766579c9088be21e954 Mon Sep 17 00:00:00 2001 From: Felipe Vega Date: Fri, 26 Mar 2021 13:46:54 -0700 Subject: [PATCH 8/8] Removing unexpected trailing comma --- src/NavItem.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/NavItem.jsx b/src/NavItem.jsx index 823bd55..34ddbb5 100644 --- a/src/NavItem.jsx +++ b/src/NavItem.jsx @@ -58,7 +58,7 @@ class NavItem extends PureComponent { subnavClassName: PropTypes.string, subnavStyle: PropTypes.object, - tabIndex: PropTypes.string, + tabIndex: PropTypes.string }; static defaultProps = { componentClass: 'div',