improvement(netlify-cms-core): wrap navigations in lists for better a11y (#1903)

packages/netlify-cms-core/src/components/App/Header.js

@@ -96,6 +96,12 @@ const AppHeaderQuickNewButton = styled(StyledDropdownButton)`
   }
 `;
 
+const AppHeaderNavList = styled.ul`
+  display: flex;
+  margin: 0;
+  list-style: none;
+`;
+
 class Header extends React.Component {
   static propTypes = {
     user: ImmutablePropTypes.map.isRequired,
@@ -135,26 +141,34 @@ class Header extends React.Component {
       <AppHeader>
         <AppHeaderContent>
           <nav>
-            <AppHeaderNavLink
+            <AppHeaderNavList>
-              to="/"
+              <li>
-              activeClassName="header-link-active"
+                <AppHeaderNavLink
-              isActive={(match, location) => location.pathname.startsWith('/collections/')}
+                  to="/"
-            >
+                  activeClassName="header-link-active"
-              <Icon type="page" />
+                  isActive={(match, location) => location.pathname.startsWith('/collections/')}
-              {t('app.header.content')}
+                >
-            </AppHeaderNavLink>
+                  <Icon type="page" />
-            {hasWorkflow ? (
+                  {t('app.header.content')}
-              <AppHeaderNavLink to="/workflow" activeClassName="header-link-active">
+                </AppHeaderNavLink>
-                <Icon type="workflow" />
+              </li>
-                {t('app.header.workflow')}
+              {hasWorkflow && (
-              </AppHeaderNavLink>
+                <li>
-            ) : null}
+                  <AppHeaderNavLink to="/workflow" activeClassName="header-link-active">
-            {showMediaButton ? (
+                    <Icon type="workflow" />
-              <AppHeaderButton onClick={openMediaLibrary}>
+                    {t('app.header.workflow')}
-                <Icon type="media-alt" />
+                  </AppHeaderNavLink>
-                {t('app.header.media')}
+                </li>
-              </AppHeaderButton>
+              )}
-            ) : null}
+              {showMediaButton && (
+                <li>
+                  <AppHeaderButton onClick={openMediaLibrary}>
+                    <Icon type="media-alt" />
+                    {t('app.header.media')}
+                  </AppHeaderButton>
+                </li>
+              )}
+            </AppHeaderNavList>
           </nav>
           <AppHeaderActions>
             {createableCollections.size > 0 && (

packages/netlify-cms-core/src/components/Collection/Sidebar.js

@@ -35,7 +35,7 @@ const SidebarHeading = styled.h2`
 const SearchContainer = styled.div`
   display: flex;
   align-items: center;
-  margin: 0 8px;
+  margin: 0 12px;
   position: relative;
 
   ${Icon} {
@@ -65,6 +65,11 @@ const SearchInput = styled.input`
   }
 `;
 
+const SidebarNavList = styled.ul`
+  margin: 16px 0 0;
+  list-style: none;
+`;
+
 const SidebarNavLink = styled(NavLink)`
   display: flex;
   font-size: 14px;
@@ -73,19 +78,17 @@ const SidebarNavLink = styled(NavLink)`
   padding: 8px 12px;
   border-left: 2px solid #fff;
 
+  ${Icon} {
+    margin-right: 8px;
+  }
+
   ${props => css`
     &:hover,
     &:active,
     &.${props.activeClassName} {
       ${styles.sidebarNavLinkActive};
     }
-  `} &:first-of-type {
+  `};
-    margin-top: 16px;
-  }
-
-  ${Icon} {
-    margin-right: 8px;
-  }
 `;
 
 class Sidebar extends React.Component {
@@ -104,14 +107,12 @@ class Sidebar extends React.Component {
   renderLink = collection => {
     const collectionName = collection.get('name');
     return (
-      <SidebarNavLink
+      <li key={collectionName}>
-        key={collectionName}
+        <SidebarNavLink to={`/collections/${collectionName}`} activeClassName="sidebar-active">
-        to={`/collections/${collectionName}`}
+          <Icon type="write" />
-        activeClassName="sidebar-active"
+          {collection.get('label')}
-      >
+        </SidebarNavLink>
-        <Icon type="write" />
+      </li>
-        {collection.get('label')}
-      </SidebarNavLink>
     );
   };
 
@@ -131,7 +132,7 @@ class Sidebar extends React.Component {
             value={query}
           />
         </SearchContainer>
-        {collections.toList().map(this.renderLink)}
+        <SidebarNavList>{collections.toList().map(this.renderLink)}</SidebarNavList>
       </SidebarContainer>
     );
   }