From 017a36c6f9587977b9a13e9b8fb1adf0e101b269 Mon Sep 17 00:00:00 2001
From: Marcy Sutton <holla@marcysutton.com>
Date: Wed, 16 Nov 2016 14:32:42 -0800
Subject: [PATCH 1/2] fix(a11y): add missing labels to forms doc

Showing how to create a form without labeling inputs is an accessibility anti-pattern. This change adds labels to the examples to address that. Codepen may still need to be updated depending on how that example is created.
---
 docs/forms.md | 34 +++++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/docs/forms.md b/docs/forms.md
index fdab54095..005696fc0 100644
--- a/docs/forms.md
+++ b/docs/forms.md
@@ -13,8 +13,10 @@ HTML form elements work a little bit differently from other DOM elements in Reac
 
 ```html
 <form>
-  Name:
-  <input type="text" name="name" />
+  <label>
+    Name:
+    <input type="text" name="name" />
+  </label>
   <input type="submit" value="Submit" />
 </form>
 ```
@@ -51,8 +53,10 @@ class NameForm extends React.Component {
   render() {
     return (
       <form onSubmit={this.handleSubmit}>
-        Name:
-        <input type="text" value={this.state.value} onChange={this.handleChange} />
+        <label>
+          Name:
+          <input type="text" value={this.state.value} onChange={this.handleChange} />
+        </label>
         <input type="submit" value="Submit" />
       </form>
     );
@@ -108,8 +112,10 @@ class EssayForm extends React.Component {
   render() {
     return (
       <form onSubmit={this.handleSubmit}>
-        Name:
-        <textarea value={this.state.value} onChange={this.handleChange} />
+        <label>
+          Name:
+          <textarea value={this.state.value} onChange={this.handleChange} />
+        </label>
         <input type="submit" value="Submit" />
       </form>
     );
@@ -156,13 +162,15 @@ class FlavorForm extends React.Component {
   render() {
     return (
       <form onSubmit={this.handleSubmit}>
-        Pick your favorite La Croix flavor:
-        <select value={this.state.value} onChange={this.handleChange}>
-          <option value="grapefruit">Grapefruit</option>
-          <option value="lime">Lime</option>
-          <option value="coconut">Coconut</option>
-          <option value="mango">Mango</option>
-        </select>
+        <label>
+          Pick your favorite La Croix flavor:
+          <select value={this.state.value} onChange={this.handleChange}>
+            <option value="grapefruit">Grapefruit</option>
+            <option value="lime">Lime</option>
+            <option value="coconut">Coconut</option>
+            <option value="mango">Mango</option>
+          </select>
+        </label>
         <input type="submit" value="Submit" />
       </form>
     );

From aad104265ab9d32c27c3e7a634848155100654cb Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 17 Nov 2016 14:23:20 +0000
Subject: [PATCH 2/2] Tweak examples

---
 docs/forms.md                   | 10 +++++-----
 docs/uncontrolled-components.md | 24 ++++++++++++++----------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/docs/forms.md b/docs/forms.md
index 005696fc0..51cec75ad 100644
--- a/docs/forms.md
+++ b/docs/forms.md
@@ -31,7 +31,7 @@ We can combine the two by making the React state be the "single source of truth"
 
 For example, if we want to make the previous example log the name when it is submitted, we can write the form as a controlled component:
 
-```javascript{4,10-12,23}
+```javascript{4,10-12,24}
 class NameForm extends React.Component {
   constructor(props) {
     super(props);
@@ -64,7 +64,7 @@ class NameForm extends React.Component {
 }
 ```
 
-[Try it on CodePen.](https://codepen.io/lacker/pen/oYNzxY?editors=0010)
+[Try it on CodePen.](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
 
 Since the `value` attribute is set on our form element, the displayed value will always be `this.state.value`, making the React state the source of truth. Since `handleChange` runs on every keystroke to update the React state, the displayed value will update as the user types.
 
@@ -88,7 +88,7 @@ In HTML, a `<textarea>` element defines its text by its children:
 
 In React, a `<textarea>` uses a `value` attribute instead. This way, a form using a `<textarea>` can be written very similarly to a form that uses a single-line input:
 
-```javascript{4-6,12-14,25}
+```javascript{4-6,12-14,26}
 class EssayForm extends React.Component {
   constructor(props) {
     super(props);
@@ -140,7 +140,7 @@ In HTML, `<select>` creates a drop-down list. For example, this HTML creates a d
 
 Note that the Coconut option is initially selected, because of the `selected` attribute. React, instead of using this `selected` attribute, uses a `value` attribute on the root `select` tag. This is more convenient in a controlled component because you only need to update it in one place. For example:
 
-```javascript{4,10-12,23}
+```javascript{4,10-12,24}
 class FlavorForm extends React.Component {
   constructor(props) {
     super(props);
@@ -178,7 +178,7 @@ class FlavorForm extends React.Component {
 }
 ```
 
-[Try it on CodePen.](https://codepen.io/lacker/pen/QGWKQP?editors=0010)
+[Try it on CodePen.](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
 
 Overall, this makes it so that `<input type="text">`, `<textarea>`, and `<select>` all work very similarly - they all accept a `value` attribute that you can use to implement a controlled component.
 
diff --git a/docs/uncontrolled-components.md b/docs/uncontrolled-components.md
index d28c8b8da..e464f319e 100644
--- a/docs/uncontrolled-components.md
+++ b/docs/uncontrolled-components.md
@@ -10,7 +10,7 @@ To write an uncontrolled component, instead of writing an event handler for ever
 
 For example, this code accepts a single name in an uncontrolled component:
 
-```javascript{8,16}
+```javascript{8,17}
 class NameForm extends React.Component {
   constructor(props) {
     super(props);
@@ -25,8 +25,10 @@ class NameForm extends React.Component {
   render() {
     return (
       <form onSubmit={this.handleSubmit}>
-        Name:
-        <input type="text" ref={(input) => this.input = input} />
+        <label>
+          Name:
+          <input type="text" ref={(input) => this.input = input} />
+        </label>
         <input type="submit" value="Submit" />
       </form>
     );
@@ -34,7 +36,7 @@ class NameForm extends React.Component {
 }
 ```
 
-[Try it on CodePen.](https://codepen.io/lacker/pen/XNWjOj?editors=0010)
+[Try it on CodePen.](https://codepen.io/gaearon/pen/WooRWa?editors=0010)
 
 Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components.
 
@@ -42,15 +44,17 @@ Since an uncontrolled component keeps the source of truth in the DOM, it is some
 
 In the React rendering lifecycle, the `value` attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a `defaultValue` attribute instead of `value`.
 
-```javascript{6}
+```javascript{7}
 render() {
   return (
     <form onSubmit={this.handleSubmit}>
-      Name:
-      <input
-        defaultValue="Bob"
-        type="text"
-        ref={(input) => this.input = input} />
+      <label>
+        Name:
+        <input
+          defaultValue="Bob"
+          type="text"
+          ref={(input) => this.input = input} />
+      </label>
       <input type="submit" value="Submit" />
     </form>
   );