3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-03 12:17:20 +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,
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 <NavLink className={navLinkClassNames(className)} {...props} />;
@ -74,21 +76,27 @@ function NavItem({items, position, className, ...props}) {
'dropdown--left': position === 'left',
'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}
</NavLink>
<ul className="dropdown__menu">
{items.map(
({className: childItemClassName, ...linkItemInnerProps}, i) => (
<li key={i}>
<NavLink
activeClassName="dropdown__link--active"
className={navLinkClassNames(childItemClassName, true)}
{...linkItemInnerProps}
/>
</li>
),
)}
{items.map(({className: childItemClassName, ...childItemProps}, i) => (
<li key={i}>
<NavLink
activeClassName="dropdown__link--active"
className={navLinkClassNames(childItemClassName, true)}
{...childItemProps}
/>
</li>
))}
</ul>
</div>
);
@ -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}
</NavLink>
<ul className="menu__list">
{items.map(
({className: childItemClassName, ...linkItemInnerProps}, i) => (
<li className="menu__list-item" key={i}>
<NavLink
activeClassName="menu__link--active"
className={navLinkClassNames(childItemClassName)}
{...linkItemInnerProps}
onClick={props.onClick}
/>
</li>
),
)}
{items.map(({className: childItemClassName, ...childItemProps}, i) => (
<li className="menu__list-item" key={i}>
<NavLink
activeClassName="menu__link--active"
className={navLinkClassNames(childItemClassName)}
{...childItemProps}
onClick={props.onClick}
/>
</li>
))}
</ul>
</li>
);

1
website/docusaurus.config.js
View file

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