PR changes

Author: jxom

src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js

@@ -149,7 +149,7 @@ class StickyResponsiveSidebar extends Component {
           }}
           onClick={this._openNavMenu}
           role="button"
-          tabIndex="-1">
+          tabIndex={0}>
           <Container>
             <div
               css={{

src/templates/components/MetaTitle/index.js

@@ -12,27 +12,17 @@
 import React from 'react';
 import {colors} from 'theme';
 
-const MetaTitle = ({
-  children,
-  title,
-  cssProps = {},
-  onClick,
-  onDark = false,
-}) => (
+const MetaTitle = ({children, title, cssProps = {}, onDark = false}) => (
   <div
-    onClick={onClick}
     css={{
       color: onDark ? colors.subtleOnDark : colors.subtle,
-      cursor: onClick ? 'pointer' : null,
       fontSize: 14,
       fontWeight: 700,
       lineHeight: 3,
       textTransform: 'uppercase',
       letterSpacing: '0.08em',
       ...cssProps,
-    }}
-    role="link"
-    tabIndex="-1">
+    }}>
     {children}
   </div>
 );

src/templates/components/Sidebar/Section.js

@@ -26,32 +26,35 @@ const Section = ({
   section,
 }) => (
   <div>
-    <MetaTitle
-      onClick={onSectionTitleClick}
-      cssProps={{
-        marginTop: 10,
+    <button
+      css={{cursor: 'pointer', backgroundColor: 'transparent', border: 0}}
+      onClick={onSectionTitleClick}>
+      <MetaTitle
+        cssProps={{
+          marginTop: 10,
 
-        [media.greaterThan('small')]: {
-          color: isActive ? colors.text : colors.subtle,
+          [media.greaterThan('small')]: {
+            color: isActive ? colors.text : colors.subtle,
 
-          ':hover': {
-            color: colors.text,
+            ':hover': {
+              color: colors.text,
+            },
           },
-        },
-      }}>
-      {section.title}
-      <ChevronSvg
-        cssProps={{
-          marginLeft: 7,
-          transform: isActive ? 'rotateX(180deg)' : 'rotateX(0deg)',
-          transition: 'transform 0.2s ease',
+        }}>
+        {section.title}
+        <ChevronSvg
+          cssProps={{
+            marginLeft: 7,
+            transform: isActive ? 'rotateX(180deg)' : 'rotateX(0deg)',
+            transition: 'transform 0.2s ease',
 
-          [media.lessThan('small')]: {
-            display: 'none',
-          },
-        }}
-      />
-    </MetaTitle>
+            [media.lessThan('small')]: {
+              display: 'none',
+            },
+          }}
+        />
+      </MetaTitle>
+    </button>
     <ul
       css={{
         marginBottom: 10,