Improve a11y of docs

* Add placeholder/label to input on homepage demo
* Mark sections with aria-expanded

![screenshot of markup with aria-expanded for sections](https://user-images.githubusercontent.com/6820/36941651-2f851bee-1f15-11e8-8090-e93e596b3d11.png)

content/home/examples/an-application.js

@@ -13,6 +13,8 @@ class TodoApp extends React.Component {
         <TodoList items={this.state.items} />
         <form onSubmit={this.handleSubmit}>
           <input
+            aria-label="Add a new to-do item"
+            placeholder="Add a to-do..."
             onChange={this.handleChange}
             value={this.state.text}
           />

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;