Merge pull request #659 from sophiebits/a11y

Improve a11y of docs

src/templates/components/Sidebar/Section.js

@@ -10,7 +10,10 @@ import isItemActive from 'utils/isItemActive';
 import MetaTitle from '../MetaTitle';
 import ChevronSvg from '../ChevronSvg';
 
-const Section = ({
+class Section extends React.Component {
+  state = {uid: ('' + Math.random()).replace(/\D/g, '')};
+  render() {
+    const {
       activeItemId,
       createLink,
       isActive,
@@ -19,9 +22,13 @@ const Section = ({
       onLinkClick,
       onSectionTitleClick,
       section,
-}) => (
+    } = this.props;
+    const uid = 'section_' + this.state.uid;
+    return (
       <div>
         <button
+          aria-expanded={isActive}
+          aria-controls={uid}
           css={{
             cursor: 'pointer',
             backgroundColor: 'transparent',
@@ -54,6 +61,7 @@ const Section = ({
           </MetaTitle>
         </button>
         <ul
+          id={uid}
           css={{
             marginBottom: 10,
 
@@ -98,6 +106,8 @@ const Section = ({
           ))}
         </ul>
       </div>
-);
+    );
+  }
+}
 
 export default Section;