fix(v2): disable tab focus on collapsed doc sidebar items (#2625)

facebook · Apr 19, 2020 · 2c4490a · 2c4490a
1 parent 409f878
commit 2c4490a
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
@@ -17,7 +17,7 @@ import styles from './styles.module.css';
 
 const MOBILE_TOGGLE_SIZE = 24;
 
-function DocSidebarItem({item, onItemClick, collapsible}) {
+function DocSidebarItem({item, onItemClick, collapsible, ...props}) {
   const {items, href, label, type} = item;
   const [collapsed, setCollapsed] = useState(item.collapsed);
   const [prevCollapsedProp, setPreviousCollapsedProp] = useState(null);
@@ -50,12 +50,14 @@ function DocSidebarItem({item, onItemClick, collapsible}) {
                 'menu__link--active': collapsible && !item.collapsed,
               })}
               href="#!"
-              onClick={collapsible ? handleItemClick : undefined}>
+              onClick={collapsible ? handleItemClick : undefined}
+              {...props}>
               {label}
             </a>
             <ul className="menu__list">
               {items.map((childItem) => (
                 <DocSidebarItem
+                  tabIndex={collapsed ? '-1' : '0'}
                   key={childItem.label}
                   item={childItem}
                   onItemClick={onItemClick}
@@ -84,7 +86,8 @@ function DocSidebarItem({item, onItemClick, collapsible}) {
               : {
                   target: '_blank',
                   rel: 'noreferrer noopener',
-                })}>
+                })}
+            {...props}>
             {label}
           </Link>
         </li>
@@ -153,7 +156,11 @@ function DocSidebar(props) {
   return (
     <div className={styles.sidebar}>
       {hideOnScroll && (
-        <Link className={styles.sidebarLogo} to={logoLink} {...logoLinkProps}>
+        <Link
+          tabIndex="-1"
+          className={styles.sidebarLogo}
+          to={logoLink}
+          {...logoLinkProps}>
           {logoImageUrl != null && (
             <img key={isClient} src={logoImageUrl} alt={logoAlt} />
           )}