3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-04 12:47:14 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(v2): add a11y support for dropdown (#2672)

Browse source 
* fix(v2): add a11y support for dropdown

* fix(v2): add aria-label for navbar GH link
This commit is contained in:
Alexey Pyltsyn 2020-04-27 14:17:55 +03:00 • committed by GitHub
parent 1d8cc4b10f
commit 7389a60514
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 44 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
packages/docusaurus-theme-classic/src/theme/Navbar/index.js
View file

@ -25,7 +25,6 @@ function NavLink({
to, to,
href, href,
label, label,
position,
activeClassName = 'navbar__link--active', activeClassName = 'navbar__link--active',
...props ...props
}) { }) {
@ -58,11 +57,14 @@ function NavLink({
} }
function NavItem({items, position, className, ...props}) { function NavItem({items, position, className, ...props}) {
const navLinkClassNames = (extraClassName, isDropdownItem) => const navLinkClassNames = (extraClassName, isDropdownItem = false) =>
classnames(extraClassName, { classnames(
'navbar__item navbar__link': !isDropdownItem, {
dropdown__link: isDropdownItem, 'navbar__item navbar__link': !isDropdownItem,
}); dropdown__link: isDropdownItem,
},
extraClassName,
);
if (!items) { if (!items) {
return <NavLink className={navLinkClassNames(className)} {...props} />; return <NavLink className={navLinkClassNames(className)} {...props} />;
@ -74,21 +76,27 @@ function NavItem({items, position, className, ...props}) {
'dropdown--left': position === 'left', 'dropdown--left': position === 'left',
'dropdown--right': position === 'right', 'dropdown--right': position === 'right',
})}> })}>
<NavLink className={navLinkClassNames(className)} {...props}> <NavLink
className={navLinkClassNames(className)}
{...props}
onClick={(e) => e.preventDefault()}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.target.parentNode.classList.toggle('dropdown--show');
}
}}>
{props.label} {props.label}
</NavLink> </NavLink>
<ul className="dropdown__menu"> <ul className="dropdown__menu">
{items.map( {items.map(({className: childItemClassName, ...childItemProps}, i) => (
({className: childItemClassName, ...linkItemInnerProps}, i) => ( <li key={i}>
<li key={i}> <NavLink
<NavLink activeClassName="dropdown__link--active"
activeClassName="dropdown__link--active" className={navLinkClassNames(childItemClassName, true)}
className={navLinkClassNames(childItemClassName, true)} {...childItemProps}
{...linkItemInnerProps} />
/> </li>
</li> ))}
),
)}
</ul> </ul>
</div> </div>
); );
@ -96,9 +104,13 @@ function NavItem({items, position, className, ...props}) {
function MobileNavItem({items, className, ...props}) { function MobileNavItem({items, className, ...props}) {
const navLinkClassNames = (extraClassName, isSubList = false) => const navLinkClassNames = (extraClassName, isSubList = false) =>
classnames('menu__link', extraClassName, { classnames(
'menu__link--sublist': isSubList, 'menu__link',
}); {
'menu__link--sublist': isSubList,
},
extraClassName,
);
if (!items) { if (!items) {
return ( return (
@ -114,18 +126,16 @@ function MobileNavItem({items, className, ...props}) {
{props.label} {props.label}
</NavLink> </NavLink>
<ul className="menu__list"> <ul className="menu__list">
{items.map( {items.map(({className: childItemClassName, ...childItemProps}, i) => (
({className: childItemClassName, ...linkItemInnerProps}, i) => ( <li className="menu__list-item" key={i}>
<li className="menu__list-item" key={i}> <NavLink
<NavLink activeClassName="menu__link--active"
activeClassName="menu__link--active" className={navLinkClassNames(childItemClassName)}
className={navLinkClassNames(childItemClassName)} {...childItemProps}
{...linkItemInnerProps} onClick={props.onClick}
onClick={props.onClick} />
/> </li>
</li> ))}
),
)}
</ul> </ul>
</li> </li>
); );

1
website/docusaurus.config.js
View file

@ -122,6 +122,7 @@ module.exports = {
href: 'https://github.com/facebook/docusaurus', href: 'https://github.com/facebook/docusaurus',
position: 'right', position: 'right',
className: 'header-github-link', className: 'header-github-link',
'aria-label': 'GitHub repository',
}, },
], ],
}, },