Merge pull request #663 from jdan/master

Improve a11y in homepage examples with some labels

content/home/examples/a-component-using-external-plugins.js

@@ -2,7 +2,7 @@ class MarkdownEditor extends React.Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
-    this.state = { value: 'Type some *markdown* here!' };
+    this.state = { value: 'Hello, **world**!' };
   }
 
   handleChange(e) {
@@ -18,7 +18,11 @@ class MarkdownEditor extends React.Component {
     return (
       <div className="MarkdownEditor">
         <h3>Input</h3>
+        <label htmlFor="markdown-content">
+          Enter some markdown
+        </label>
         <textarea
+          id="markdown-content"
           onChange={this.handleChange}
           defaultValue={this.state.value}
         />

content/home/examples/an-application.js

@@ -12,7 +12,11 @@ class TodoApp extends React.Component {
         <h3>TODO</h3>
         <TodoList items={this.state.items} />
         <form onSubmit={this.handleSubmit}>
+          <label htmlFor="new-todo">
+            What needs to be done?
+          </label>
           <input
+            id="new-todo"
             onChange={this.handleChange}
             value={this.state.text}
           />

src/components/CodeEditor/CodeEditor.js

@@ -257,9 +257,13 @@ class CodeEditor extends Component {
                       padding: '5px 10px',
                     },
 
+                    '& label': {
+                      display: 'block',
+                      marginTop: 10,
+                    },
+
                     '& textarea': {
                       width: '100%',
-                      marginTop: 10,
                       height: 60,
                       padding: 5,
                     },