fix(v2): add a11y support for dropdown

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 <NavLink className={navLinkClassNames(className)} {...props} />;
@@ -74,31 +76,41 @@ 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>
   );
 }
 
 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>
   );

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',
         },
       ],
     },