Merge pull request #659 from sophiebits/a11y

Improve a11y of docs

content/home/examples/an-application.js

@@ -60,4 +60,4 @@ class TodoList extends React.Component {
   }
 }
 
-ReactDOM.render(<TodoApp />, mountNode);
+ReactDOM.render(<TodoApp />, mountNode);

src/templates/components/Sidebar/Section.js

@@ -10,94 +10,104 @@ import isItemActive from 'utils/isItemActive';
 import MetaTitle from '../MetaTitle';
 import ChevronSvg from '../ChevronSvg';
 
-const Section = ({
-  activeItemId,
-  createLink,
-  isActive,
-  isScrollSync,
-  location,
-  onLinkClick,
-  onSectionTitleClick,
-  section,
-}) => (
-  <div>
-    <button
-      css={{
-        cursor: 'pointer',
-        backgroundColor: 'transparent',
-        border: 0,
-        marginTop: 10,
-      }}
-      onClick={onSectionTitleClick}>
-      <MetaTitle
-        cssProps={{
-          [media.greaterThan('small')]: {
-            color: isActive ? colors.text : colors.subtle,
-
-            ':hover': {
-              color: colors.text,
-            },
-          },
-        }}>
-        {section.title}
-        <ChevronSvg
-          cssProps={{
-            marginLeft: 7,
-            transform: isActive ? 'rotateX(180deg)' : 'rotateX(0deg)',
-            transition: 'transform 0.2s ease',
-
-            [media.lessThan('small')]: {
-              display: 'none',
-            },
+class Section extends React.Component {
+  state = {uid: ('' + Math.random()).replace(/\D/g, '')};
+  render() {
+    const {
+      activeItemId,
+      createLink,
+      isActive,
+      isScrollSync,
+      location,
+      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',
+            border: 0,
+            marginTop: 10,
           }}
-        />
-      </MetaTitle>
-    </button>
-    <ul
-      css={{
-        marginBottom: 10,
+          onClick={onSectionTitleClick}>
+          <MetaTitle
+            cssProps={{
+              [media.greaterThan('small')]: {
+                color: isActive ? colors.text : colors.subtle,
+
+                ':hover': {
+                  color: colors.text,
+                },
+              },
+            }}>
+            {section.title}
+            <ChevronSvg
+              cssProps={{
+                marginLeft: 7,
+                transform: isActive ? 'rotateX(180deg)' : 'rotateX(0deg)',
+                transition: 'transform 0.2s ease',
 
-        [media.greaterThan('small')]: {
-          display: isActive ? 'block' : 'none',
-        },
-      }}>
-      {section.items.map(item => (
-        <li
-          key={item.id}
+                [media.lessThan('small')]: {
+                  display: 'none',
+                },
+              }}
+            />
+          </MetaTitle>
+        </button>
+        <ul
+          id={uid}
           css={{
-            marginTop: 5,
+            marginBottom: 10,
+
+            [media.greaterThan('small')]: {
+              display: isActive ? 'block' : 'none',
+            },
           }}>
-          {createLink({
-            isActive: isScrollSync
-              ? activeItemId === item.id
-              : isItemActive(location, item),
-            item,
-            location,
-            onLinkClick,
-            section,
-          })}
+          {section.items.map(item => (
+            <li
+              key={item.id}
+              css={{
+                marginTop: 5,
+              }}>
+              {createLink({
+                isActive: isScrollSync
+                  ? activeItemId === item.id
+                  : isItemActive(location, item),
+                item,
+                location,
+                onLinkClick,
+                section,
+              })}
 
-          {item.subitems && (
-            <ul css={{marginLeft: 20}}>
-              {item.subitems.map(subitem => (
-                <li key={subitem.id}>
-                  {createLink({
-                    isActive: isScrollSync
-                      ? activeItemId === subitem.id
-                      : isItemActive(location, subitem),
-                    item: subitem,
-                    location,
-                    onLinkClick,
-                    section,
-                  })}
-                </li>
-              ))}
-            </ul>
-          )}
-        </li>
-      ))}
-    </ul>
-  </div>
-);
+              {item.subitems && (
+                <ul css={{marginLeft: 20}}>
+                  {item.subitems.map(subitem => (
+                    <li key={subitem.id}>
+                      {createLink({
+                        isActive: isScrollSync
+                          ? activeItemId === subitem.id
+                          : isItemActive(location, subitem),
+                        item: subitem,
+                        location,
+                        onLinkClick,
+                        section,
+                      })}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+}
 
 export default Section;