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

This commit is contained in:
Alexey Pyltsyn 2020-04-19 16:28:08 +03:00 committed by GitHub
parent 409f8788dc
commit 2c4490a1ff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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} />
)}