From 7389a605144e1228cbd5588b5f7ccf3fa29b261c Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 27 Apr 2020 14:17:55 +0300 Subject: [PATCH] fix(v2): add a11y support for dropdown (#2672) * fix(v2): add a11y support for dropdown * fix(v2): add aria-label for navbar GH link --- .../src/theme/Navbar/index.js | 76 +++++++++++-------- website/docusaurus.config.js | 1 + 2 files changed, 44 insertions(+), 33 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js index 7b06aefc6e..cee4fbd410 100644 --- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js +++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js @@ -25,7 +25,6 @@ function NavLink({ to, href, label, - position, activeClassName = 'navbar__link--active', ...props }) { @@ -58,11 +57,14 @@ function NavLink({ } function NavItem({items, position, className, ...props}) { - const navLinkClassNames = (extraClassName, isDropdownItem) => - classnames(extraClassName, { - 'navbar__item navbar__link': !isDropdownItem, - dropdown__link: isDropdownItem, - }); + const navLinkClassNames = (extraClassName, isDropdownItem = false) => + classnames( + { + 'navbar__item navbar__link': !isDropdownItem, + dropdown__link: isDropdownItem, + }, + extraClassName, + ); if (!items) { return ; @@ -74,21 +76,27 @@ function NavItem({items, position, className, ...props}) { 'dropdown--left': position === 'left', 'dropdown--right': position === 'right', })}> - + e.preventDefault()} + onKeyDown={(e) => { + if (e.key === 'Enter') { + e.target.parentNode.classList.toggle('dropdown--show'); + } + }}> {props.label}
    - {items.map( - ({className: childItemClassName, ...linkItemInnerProps}, i) => ( -
  • - -
  • - ), - )} + {items.map(({className: childItemClassName, ...childItemProps}, i) => ( +
  • + +
  • + ))}
); @@ -96,9 +104,13 @@ function NavItem({items, position, className, ...props}) { function MobileNavItem({items, className, ...props}) { const navLinkClassNames = (extraClassName, isSubList = false) => - classnames('menu__link', extraClassName, { - 'menu__link--sublist': isSubList, - }); + classnames( + 'menu__link', + { + 'menu__link--sublist': isSubList, + }, + extraClassName, + ); if (!items) { return ( @@ -114,18 +126,16 @@ function MobileNavItem({items, className, ...props}) { {props.label}
); diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index bcbba5488f..31d59dc20c 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -122,6 +122,7 @@ module.exports = { href: 'https://github.com/facebook/docusaurus', position: 'right', className: 'header-github-link', + 'aria-label': 'GitHub repository', }, ], },