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.
Marcy Sutton committed
Nov 16, 2016 at 14:32 UTC
e08be27b0c20b06ace289a2c2a4ac875adb4c163
1 file changed
+21
-13
docs/docs/forms.md
+21
-13
@@ -13,8 +13,10 @@ HTML form elements work a little bit differently from other DOM elements in Reac
13
14
```html
15
<form>
16
- Name:
17
- <input type="text" name="name" />
16
+ <label>
17
+ Name:
18
+ <input type="text" name="name" />
19
+ </label>
20
<input type="submit" value="Submit" />
21
</form>
22
```
@@ -51,8 +53,10 @@ class NameForm extends React.Component {
53
render() {
54
return (
55
<form onSubmit={this.handleSubmit}>
54
- Name:
55
- <input type="text" value={this.state.value} onChange={this.handleChange} />
56
+ <label>
57
+ Name:
58
+ <input type="text" value={this.state.value} onChange={this.handleChange} />
59
+ </label>
60
<input type="submit" value="Submit" />
61
</form>
62
);
@@ -108,8 +112,10 @@ class EssayForm extends React.Component {
112
render() {
113
return (
114
<form onSubmit={this.handleSubmit}>
111
- Name:
112
- <textarea value={this.state.value} onChange={this.handleChange} />
115
+ <label>
116
+ Name:
117
+ <textarea value={this.state.value} onChange={this.handleChange} />
118
+ </label>
119
<input type="submit" value="Submit" />
120
</form>
121
);
@@ -156,13 +162,15 @@ class FlavorForm extends React.Component {
162
render() {
163
return (
164
<form onSubmit={this.handleSubmit}>
159
- Pick your favorite La Croix flavor:
160
- <select value={this.state.value} onChange={this.handleChange}>
161
- <option value="grapefruit">Grapefruit</option>
162
- <option value="lime">Lime</option>
163
- <option value="coconut">Coconut</option>
164
- <option value="mango">Mango</option>
165
- </select>
165
+ <label>
166
+ Pick your favorite La Croix flavor:
167
+ <select value={this.state.value} onChange={this.handleChange}>
168
+ <option value="grapefruit">Grapefruit</option>
169
+ <option value="lime">Lime</option>
170
+ <option value="coconut">Coconut</option>
171
+ <option value="mango">Mango</option>
172
+ </select>
173
+ </label>
174
<input type="submit" value="Submit" />
175
</form>
176
);