Side nav a11y updates (freeCodeCamp#4093)

* Updated sidenav to be keyboard and screen reader friendly. * Using dashedName prop instead of building a unique string.
0x51 · Oct 28, 2017 · acda167 · acda167
1 parent 6f4f930
commit acda167
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/src/LayoutComponents/nav/NavItem.jsx b/src/LayoutComponents/nav/NavItem.jsx
@@ -12,8 +12,8 @@ const propTypes = {
 function NavItem(props) {
   const { isStubbed, path, title } = props;
   return (
-    <li role='presentation'>
-      <Link role='presentation' to={ path }>
+    <li>
+      <Link to={ path }>
         <span
           className={
             'navItemTitle' +

diff --git a/src/LayoutComponents/nav/NavPanel.jsx b/src/LayoutComponents/nav/NavPanel.jsx
@@ -9,6 +9,7 @@ import { toggleExpandedState } from './redux';
 const propTypes = {
   categoryChildren: PropTypes.arrayOf(PropTypes.string),
   children: PropTypes.any,
+  dashedName: PropTypes.string,
   handleClick: PropTypes.func.isRequired,
   isExpanded: PropTypes.bool,
   path: PropTypes.string,
@@ -19,10 +20,11 @@ function mapStateToProps(state, ownProps) {
   const { path } = ownProps;
   const isExpanded = state.nav.expandedState[path];
   const category = state.nav.pages.filter(page => page.path === path)[0];
-  const { title, children: categoryChildren } = category;
+  const { title, children: categoryChildren, dashedName } = category;
 
   return {
     categoryChildren,
+    dashedName,
     isExpanded,
     title
   };
@@ -37,7 +39,7 @@ function mapDispatchToProps(dispatch) {
 
 function NoArticles() {
   return (
-    <li role='presentation'>
+    <li>
       <span>
         No articles yet.
         <br />
@@ -109,13 +111,15 @@ class NavPanel extends PureComponent {
   }
 
   render() {
-    const { isExpanded } = this.props;
+    const { isExpanded, dashedName } = this.props;
     return (
       <Panel
         bsClass='panelStyle panel'
         collapsible={ true }
         expanded={ isExpanded }
         header={ this.renderHeader() }
+        id={ `${dashedName}-panel` }
+        role='listitem'
         >
         {
           ( isExpanded ? this.renderBody() : null )

diff --git a/src/LayoutComponents/nav/SideNav.jsx b/src/LayoutComponents/nav/SideNav.jsx
@@ -103,15 +103,15 @@ class SideNav extends Component {
     const { expandedState, pages, parents } = this.props;
     const panels = renderPanels(parents, pages);
     return (
-      <div className='sideNav' id='side-nav'>
-        <PanelGroup>
+      <nav className='sideNav' id='side-nav'>
+        <PanelGroup role='list'>
           {
             (!parents || !expandedState) ?
               <NavPanel title='No Parents Here' /> :
               panels
           }
         </PanelGroup>
-      </div>
+      </nav>
     );
   }
 }