Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit f102135

Browse files
author
Marcy Sutton
committed
docs(): better accessibility in form examples
1 parent d7ec5f3 commit f102135

File tree

2 files changed

+109
-75
lines changed

2 files changed

+109
-75
lines changed

‎src/ng/directive/input.js‎

Lines changed: 90 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -68,13 +68,15 @@ var inputType = {
6868
}]);
6969
</script>
7070
<form name="myForm" ng-controller="ExampleController">
71-
Single word: <input type="text" name="input" ng-model="example.text"
72-
ng-pattern="example.word" required ng-trim="false">
73-
<span class="error" ng-show="myForm.input.$error.required">
74-
Required!</span>
75-
<span class="error" ng-show="myForm.input.$error.pattern">
76-
Single word only!</span>
77-
71+
<label for="input">Single word:</label>
72+
<input id="input" type="text" name="input" ng-model="example.text"
73+
ng-pattern="example.word" required ng-trim="false">
74+
<span role="alert">
75+
<span class="error" ng-show="myForm.input.$error.required">
76+
Required!</span>
77+
<span class="error" ng-show="myForm.input.$error.pattern">
78+
Single word only!</span>
79+
</span><br>
7880
<tt>text = {{example.text}}</tt><br/>
7981
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
8082
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -153,13 +155,15 @@ var inputType = {
153155
}]);
154156
</script>
155157
<form name="myForm" ng-controller="DateController as dateCtrl">
156-
Pick a date in 2013:
158+
<label for="exampleInput">Pick a date in 2013:</label>
157159
<input type="date" id="exampleInput" name="input" ng-model="example.value"
158160
placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />
159-
<span class="error" ng-show="myForm.input.$error.required">
160-
Required!</span>
161-
<span class="error" ng-show="myForm.input.$error.date">
162-
Not a valid date!</span>
161+
<span role="alert">
162+
<span class="error" ng-show="myForm.input.$error.required">
163+
Required!</span>
164+
<span class="error" ng-show="myForm.input.$error.date">
165+
Not a valid date!</span>
166+
</span><br>
163167
<tt>value = {{example.value | date: "yyyy-MM-dd"}}</tt><br/>
164168
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
165169
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -246,13 +250,15 @@ var inputType = {
246250
}]);
247251
</script>
248252
<form name="myForm" ng-controller="DateController as dateCtrl">
249-
Pick a date between in 2013:
253+
<label for="exampleInput">Pick a date between in 2013:</label>
250254
<input type="datetime-local" id="exampleInput" name="input" ng-model="example.value"
251255
placeholder="yyyy-MM-ddTHH:mm:ss" min="2001-01-01T00:00:00" max="2013-12-31T00:00:00" required />
252-
<span class="error" ng-show="myForm.input.$error.required">
253-
Required!</span>
254-
<span class="error" ng-show="myForm.input.$error.datetimelocal">
255-
Not a valid date!</span>
256+
<span role="alert">
257+
<span class="error" ng-show="myForm.input.$error.required">
258+
Required!</span>
259+
<span class="error" ng-show="myForm.input.$error.datetimelocal">
260+
Not a valid date!</span>
261+
</span><br>
256262
<tt>value = {{example.value | date: "yyyy-MM-ddTHH:mm:ss"}}</tt><br/>
257263
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
258264
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -340,13 +346,15 @@ var inputType = {
340346
}]);
341347
</script>
342348
<form name="myForm" ng-controller="DateController as dateCtrl">
343-
Pick a between 8am and 5pm:
349+
<label for="exampleInput">Pick a between 8am and 5pm:</label>
344350
<input type="time" id="exampleInput" name="input" ng-model="example.value"
345351
placeholder="HH:mm:ss" min="08:00:00" max="17:00:00" required />
346-
<span class="error" ng-show="myForm.input.$error.required">
347-
Required!</span>
348-
<span class="error" ng-show="myForm.input.$error.time">
349-
Not a valid date!</span>
352+
<span role="alert">
353+
<span class="error" ng-show="myForm.input.$error.required">
354+
Required!</span>
355+
<span class="error" ng-show="myForm.input.$error.time">
356+
Not a valid date!</span>
357+
</span><br>
350358
<tt>value = {{example.value | date: "HH:mm:ss"}}</tt><br/>
351359
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
352360
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -433,9 +441,10 @@ var inputType = {
433441
}]);
434442
</script>
435443
<form name="myForm" ng-controller="DateController as dateCtrl">
436-
Pick a date between in 2013:
437-
<input id="exampleInput" type="week" name="input" ng-model="example.value"
444+
<label for="input">Pick a date between in 2013:</label>
445+
<input id="input" type="week" name="input" ng-model="example.value"
438446
placeholder="YYYY-W##" min="2012-W32" max="2013-W52" required />
447+
439448
<span class="error" ng-show="myForm.input.$error.required">
440449
Required!</span>
441450
<span class="error" ng-show="myForm.input.$error.week">
@@ -526,13 +535,15 @@ var inputType = {
526535
}]);
527536
</script>
528537
<form name="myForm" ng-controller="DateController as dateCtrl">
529-
Pick a month in 2013:
538+
<label for="exampleInput">Pick a month in 2013:</label>
530539
<input id="exampleInput" type="month" name="input" ng-model="example.value"
531540
placeholder="yyyy-MM" min="2013-01" max="2013-12" required />
532-
<span class="error" ng-show="myForm.input.$error.required">
533-
Required!</span>
534-
<span class="error" ng-show="myForm.input.$error.month">
535-
Not a valid month!</span>
541+
<span role="alert">
542+
<span class="error" ng-show="myForm.input.$error.required">
543+
Required!</span>
544+
<span class="error" ng-show="myForm.input.$error.month">
545+
Not a valid month!</span>
546+
</span><br>
536547
<tt>value = {{example.value | date: "yyyy-MM"}}</tt><br/>
537548
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
538549
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -625,12 +636,15 @@ var inputType = {
625636
}]);
626637
</script>
627638
<form name="myForm" ng-controller="ExampleController">
628-
Number: <input type="number" name="input" ng-model="example.value"
629-
min="0" max="99" required>
630-
<span class="error" ng-show="myForm.input.$error.required">
631-
Required!</span>
632-
<span class="error" ng-show="myForm.input.$error.number">
633-
Not valid number!</span>
639+
<label for="exampleInput">Number:</label>
640+
<input id="exampleInput" type="number" name="input" ng-model="example.value"
641+
min="0" max="99" required>
642+
<span role="alert">
643+
<span class="error" ng-show="myForm.input.$error.required">
644+
Required!</span>
645+
<span class="error" ng-show="myForm.input.$error.number">
646+
Not valid number!</span>
647+
</span><br>
634648
<tt>value = {{example.value}}</tt><br/>
635649
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
636650
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -715,11 +729,14 @@ var inputType = {
715729
}]);
716730
</script>
717731
<form name="myForm" ng-controller="ExampleController">
718-
URL: <input type="url" name="input" ng-model="url.text" required>
719-
<span class="error" ng-show="myForm.input.$error.required">
720-
Required!</span>
721-
<span class="error" ng-show="myForm.input.$error.url">
722-
Not valid url!</span>
732+
<label for="input">URL:<label>
733+
<input id="input" type="url" name="input" ng-model="url.text" required>
734+
<span role="alert">
735+
<span class="error" ng-show="myForm.input.$error.required">
736+
Required!</span>
737+
<span class="error" ng-show="myForm.input.$error.url">
738+
Not valid url!</span>
739+
</span><br>
723740
<tt>text = {{url.text}}</tt><br/>
724741
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
725742
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -806,11 +823,14 @@ var inputType = {
806823
}]);
807824
</script>
808825
<form name="myForm" ng-controller="ExampleController">
809-
Email: <input type="email" name="input" ng-model="email.text" required>
810-
<span class="error" ng-show="myForm.input.$error.required">
811-
Required!</span>
812-
<span class="error" ng-show="myForm.input.$error.email">
813-
Not valid email!</span>
826+
<label for="exampleInput">Email:</label>
827+
<input id="exampleInput" type="email" name="input" ng-model="email.text" required>
828+
<span role="alert">
829+
<span class="error" ng-show="myForm.input.$error.required">
830+
Required!</span>
831+
<span class="error" ng-show="myForm.input.$error.email">
832+
Not valid email!</span>
833+
</span><br>
814834
<tt>text = {{email.text}}</tt><br/>
815835
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
816836
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -879,9 +899,12 @@ var inputType = {
879899
}]);
880900
</script>
881901
<form name="myForm" ng-controller="ExampleController">
882-
<input type="radio" ng-model="color.name" value="red"> Red <br/>
883-
<input type="radio" ng-model="color.name" ng-value="specialValue"> Green <br/>
884-
<input type="radio" ng-model="color.name" value="blue"> Blue <br/>
902+
<input id="red" type="radio" ng-model="color.name" value="red">
903+
<label for="red">Red</label><br/>
904+
<input id="green" type="radio" ng-model="color.name" ng-value="specialValue">
905+
<label for="green">Green</label><br/>
906+
<input id="blue" type="radio" ng-model="color.name" value="blue">
907+
<label for="blue">Blue</label><br/>
885908
<tt>color = {{color.name | json}}</tt><br/>
886909
</form>
887910
Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.
@@ -929,9 +952,11 @@ var inputType = {
929952
}]);
930953
</script>
931954
<form name="myForm" ng-controller="ExampleController">
932-
Value1: <input type="checkbox" ng-model="checkboxModel.value1"> <br/>
933-
Value2: <input type="checkbox" ng-model="checkboxModel.value2"
934-
ng-true-value="'YES'" ng-false-value="'NO'"> <br/>
955+
<label for="checkbox1">Value1:</label>
956+
<input id="checkbox1" type="checkbox" ng-model="checkboxModel.value1"> <br/>
957+
<label for="checkbox2">Value2:</label>
958+
<input id="checkbox2" type="checkbox" ng-model="checkboxModel.value2"
959+
ng-true-value="'YES'" ng-false-value="'NO'"> <br/>
935960
<tt>value1 = {{checkboxModel.value1}}</tt><br/>
936961
<tt>value2 = {{checkboxModel.value2}}</tt><br/>
937962
</form>
@@ -1449,15 +1474,21 @@ function checkboxInputType(scope, element, attr, ctrl, $sniffer, $browser, $filt
14491474
</script>
14501475
<div ng-controller="ExampleController">
14511476
<form name="myForm">
1452-
User name: <input type="text" name="userName" ng-model="user.name" required>
1453-
<span class="error" ng-show="myForm.userName.$error.required">
1454-
Required!</span><br>
1455-
Last name: <input type="text" name="lastName" ng-model="user.last"
1477+
<label for="userName">User name:</label>
1478+
<input id="userName" type="text" name="userName" ng-model="user.name" required>
1479+
<span role="alert">
1480+
<span class="error" ng-show="myForm.userName.$error.required">
1481+
Required!</span>
1482+
</span><br>
1483+
<label for="lastName">Last name:</label>
1484+
<input id="lastName" type="text" name="lastName" ng-model="user.last"
14561485
ng-minlength="3" ng-maxlength="10">
1457-
<span class="error" ng-show="myForm.lastName.$error.minlength">
1458-
Too short!</span>
1459-
<span class="error" ng-show="myForm.lastName.$error.maxlength">
1460-
Too long!</span><br>
1486+
<span role="alert">
1487+
<span class="error" ng-show="myForm.lastName.$error.minlength">
1488+
Too short!</span>
1489+
<span class="error" ng-show="myForm.lastName.$error.maxlength">
1490+
Too long!</span>
1491+
</span><br>
14611492
</form>
14621493
<hr>
14631494
<tt>user = {{user}}</tt><br/>

‎src/ng/directive/ngModel.js‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ is set to `true`. The parse error is stored in `ngModel.$error.parse`.
192192
required>Change me!</div>
193193
<span ng-show="myForm.myWidget.$error.required">Required!</span>
194194
<hr>
195-
<textarea ng-model="userContent"></textarea>
195+
<textarea ng-model="userContent" aria-label="Dynamic textarea"></textarea>
196196
</form>
197197
</file>
198198
<file name="protractor.js" type="protractor">
@@ -474,12 +474,14 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
474474
* <p>Now see what happens if you start typing then press the Escape key</p>
475475
*
476476
* <form name="myForm" ng-model-options="{ updateOn: 'blur' }">
477-
* <p>With $rollbackViewValue()</p>
478-
* <input name="myInput1" ng-model="myValue" ng-keydown="resetWithCancel($event)"><br/>
477+
* <p><label for="myInput1">With $rollbackViewValue()</label></p>
478+
* <input name="myInput1" id="myInput1" ng-model="myValue"
479+
* ng-keydown="resetWithCancel($event)"><br/>
479480
* myValue: "{{ myValue }}"
480481
*
481-
* <p>Without $rollbackViewValue()</p>
482-
* <input name="myInput2" ng-model="myValue" ng-keydown="resetWithoutCancel($event)"><br/>
482+
* <p><label for="myInput2">Without $rollbackViewValue()</label></p>
483+
* <input name="myInput2" id="myInput2" ng-model="myValue"
484+
* ng-keydown="resetWithoutCancel($event)"><br/>
483485
* myValue: "{{ myValue }}"
484486
* </form>
485487
* </div>
@@ -943,7 +945,8 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
943945
Update input to see transitions when valid/invalid.
944946
Integer is a valid value.
945947
<form name="testForm" ng-controller="ExampleController">
946-
<input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input" />
948+
<label for="my-input">My input</label>
949+
<input id="my-input" ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input" />
947950
</form>
948951
</file>
949952
* </example>
@@ -973,8 +976,8 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
973976
<file name="index.html">
974977
<div ng-controller="ExampleController">
975978
<form name="userForm">
976-
Name:
977-
<input type="text" name="userName"
979+
<label for="userName">Name:</label>
980+
<input type="text" name="userName" id="userName"
978981
ng-model="user.name"
979982
ng-model-options="{ getterSetter: true }" />
980983
</form>
@@ -1110,14 +1113,14 @@ var DEFAULT_REGEXP = /(\s+|^)default(\s+|$)/;
11101113
<file name="index.html">
11111114
<div ng-controller="ExampleController">
11121115
<form name="userForm">
1113-
Name:
1114-
<input type="text" name="userName"
1116+
<label for="userName">Name:</label>
1117+
<input type="text" name="userName" id="userName"
11151118
ng-model="user.name"
11161119
ng-model-options="{ updateOn: 'blur' }"
11171120
ng-keyup="cancel($event)" /><br />
11181121
1119-
Other data:
1120-
<input type="text" ng-model="user.data" /><br />
1122+
<label for="otherData">Other data:</label>
1123+
<input type="text" ng-model="user.data" id="otherData" /><br />
11211124
</form>
11221125
<pre>user.name = <span ng-bind="user.name"></span></pre>
11231126
</div>
@@ -1165,8 +1168,8 @@ var DEFAULT_REGEXP = /(\s+|^)default(\s+|$)/;
11651168
<file name="index.html">
11661169
<div ng-controller="ExampleController">
11671170
<form name="userForm">
1168-
Name:
1169-
<input type="text" name="userName"
1171+
<label for="userName">Name:</label>
1172+
<input type="text" name="userName" id="userName"
11701173
ng-model="user.name"
11711174
ng-model-options="{ debounce: 1000 }" />
11721175
<button ng-click="userForm.userName.$rollbackViewValue(); user.name=''">Clear</button><br />
@@ -1188,8 +1191,8 @@ var DEFAULT_REGEXP = /(\s+|^)default(\s+|$)/;
11881191
<file name="index.html">
11891192
<div ng-controller="ExampleController">
11901193
<form name="userForm">
1191-
Name:
1192-
<input type="text" name="userName"
1194+
<label for="userName">Name:</label>
1195+
<input type="text" name="userName" id="userName"
11931196
ng-model="user.name"
11941197
ng-model-options="{ getterSetter: true }" />
11951198
</form>

0 commit comments

Comments
 (0)