fix: CSidebarNavItem/CSidebarNavDropdown: accessibility fixes #141

- add tabIndex and aria-attribute to CSidebarNavDropdown
- Make links not focusable when they are in closed CSidebarNavDropdown

Author: woothu

src/template/CSidebarNavDropdown.js

@@ -11,6 +11,7 @@ import CIcon from '@coreui/icons-react'
 import { useLocation } from 'react-router-dom'
 
 import { Context } from './CSidebar'
+export const DropdownContext = React.createContext({})
 
 export const iconProps = (icon) => {
   if (typeof icon === 'object') {
@@ -100,13 +101,20 @@ const CSidebarNavDropdown = props => {
       {...attributes} 
       ref={ref}
     >
-      <a className="c-sidebar-nav-dropdown-toggle" onClick={toggle} >
+      <a
+        className="c-sidebar-nav-dropdown-toggle" 
+        tabIndex="0"
+        onClick={toggle}
+        aria-label="menu dropdown"
+      >
         { icon && (isValidElement(icon) ? icon : <CIcon {...iconProps(icon)}/>) }
         { fontIcon && <i className={iconClasses}/> }
         { name }
       </a>
       <ul className="c-sidebar-nav-dropdown-items">
-        {children}
+        <DropdownContext.Provider value={{ isOpen }}>
+          {children}
+        </DropdownContext.Provider>
       </ul>
     </li>
   )

src/template/CSidebarNavItem.js

@@ -1,10 +1,12 @@
-import React, { isValidElement } from 'react'
+import React, { isValidElement, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { CLink, CBadge } from '../index'
 import CIcon from '@coreui/icons-react'
 import { iconProps } from './CSidebarNavDropdown'
 
+import { DropdownContext } from './CSidebarNavDropdown'
+
 //component - CoreUI / CSidebarNavItem
 const CSidebarNavItem = props => {
 
@@ -23,7 +25,7 @@ const CSidebarNavItem = props => {
     ...rest
   } = props
 
-  //render
+  const { isOpen } = useContext(DropdownContext)
   const classes = classNames(
     'c-sidebar-nav-item',
     className
@@ -43,6 +45,7 @@ const CSidebarNavItem = props => {
           className={linkClasses}
           {...routerLinkProps}
           {...rest}
+          tabIndex={ isOpen === false ? -1 : 0 }
         >
           { icon && (isValidElement(icon) ? icon : <CIcon {...iconProps(icon)}/>) }
           { fontIcon && <i className={`c-sidebar-nav-icon ${fontIcon}`}/>}