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

Commit 8da30b0

Browse files
author
Marcy Sutton
committed
docs(): better accessibility in form examples
1 parent fe9cd9d commit 8da30b0

File tree

2 files changed

+139
-83
lines changed

2 files changed

+139
-83
lines changed

‎src/ng/directive/input.js

Lines changed: 110 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -68,13 +68,16 @@ 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>Single word:
72+
<input type="text" name="input" ng-model="example.text"
73+
ng-pattern="example.word" required ng-trim="false">
74+
</label>
75+
<div role="alert">
76+
<span class="error" ng-show="myForm.input.$error.required">
77+
Required!</span>
78+
<span class="error" ng-show="myForm.input.$error.pattern">
79+
Single word only!</span>
80+
</div>
7881
<tt>text = {{example.text}}</tt><br/>
7982
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
8083
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -153,13 +156,15 @@ var inputType = {
153156
}]);
154157
</script>
155158
<form name="myForm" ng-controller="DateController as dateCtrl">
156-
Pick a date in 2013:
159+
<label for="exampleInput">Pick a date in 2013:</label>
157160
<input type="date" id="exampleInput" name="input" ng-model="example.value"
158161
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>
162+
<div role="alert">
163+
<span class="error" ng-show="myForm.input.$error.required">
164+
Required!</span>
165+
<span class="error" ng-show="myForm.input.$error.date">
166+
Not a valid date!</span>
167+
</div>
163168
<tt>value = {{example.value | date: "yyyy-MM-dd"}}</tt><br/>
164169
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
165170
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -246,13 +251,15 @@ var inputType = {
246251
}]);
247252
</script>
248253
<form name="myForm" ng-controller="DateController as dateCtrl">
249-
Pick a date between in 2013:
254+
<label for="exampleInput">Pick a date between in 2013:</label>
250255
<input type="datetime-local" id="exampleInput" name="input" ng-model="example.value"
251256
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>
257+
<div role="alert">
258+
<span class="error" ng-show="myForm.input.$error.required">
259+
Required!</span>
260+
<span class="error" ng-show="myForm.input.$error.datetimelocal">
261+
Not a valid date!</span>
262+
</div>
256263
<tt>value = {{example.value | date: "yyyy-MM-ddTHH:mm:ss"}}</tt><br/>
257264
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
258265
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -340,13 +347,15 @@ var inputType = {
340347
}]);
341348
</script>
342349
<form name="myForm" ng-controller="DateController as dateCtrl">
343-
Pick a between 8am and 5pm:
350+
<label for="exampleInput">Pick a between 8am and 5pm:</label>
344351
<input type="time" id="exampleInput" name="input" ng-model="example.value"
345352
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>
353+
<div role="alert">
354+
<span class="error" ng-show="myForm.input.$error.required">
355+
Required!</span>
356+
<span class="error" ng-show="myForm.input.$error.time">
357+
Not a valid date!</span>
358+
</div>
350359
<tt>value = {{example.value | date: "HH:mm:ss"}}</tt><br/>
351360
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
352361
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -433,13 +442,16 @@ var inputType = {
433442
}]);
434443
</script>
435444
<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"
445+
<label>Pick a date between in 2013:
446+
<input type="week" name="input" ng-model="example.value"
438447
placeholder="YYYY-W##" min="2012-W32" max="2013-W52" required />
439-
<span class="error" ng-show="myForm.input.$error.required">
440-
Required!</span>
441-
<span class="error" ng-show="myForm.input.$error.week">
442-
Not a valid date!</span>
448+
</label>
449+
<div role="alert">
450+
<span class="error" ng-show="myForm.input.$error.required">
451+
Required!</span>
452+
<span class="error" ng-show="myForm.input.$error.week">
453+
Not a valid date!</span>
454+
</div>
443455
<tt>value = {{example.value | date: "yyyy-Www"}}</tt><br/>
444456
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
445457
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -526,13 +538,15 @@ var inputType = {
526538
}]);
527539
</script>
528540
<form name="myForm" ng-controller="DateController as dateCtrl">
529-
Pick a month in 2013:
541+
<label for="exampleInput">Pick a month in 2013:</label>
530542
<input id="exampleInput" type="month" name="input" ng-model="example.value"
531543
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>
544+
<div role="alert">
545+
<span class="error" ng-show="myForm.input.$error.required">
546+
Required!</span>
547+
<span class="error" ng-show="myForm.input.$error.month">
548+
Not a valid month!</span>
549+
</div>
536550
<tt>value = {{example.value | date: "yyyy-MM"}}</tt><br/>
537551
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
538552
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -629,12 +643,16 @@ var inputType = {
629643
}]);
630644
</script>
631645
<form name="myForm" ng-controller="ExampleController">
632-
Number: <input type="number" name="input" ng-model="example.value"
633-
min="0" max="99" required>
634-
<span class="error" ng-show="myForm.input.$error.required">
635-
Required!</span>
636-
<span class="error" ng-show="myForm.input.$error.number">
637-
Not valid number!</span>
646+
<label>Number:
647+
<input type="number" name="input" ng-model="example.value"
648+
min="0" max="99" required>
649+
</label>
650+
<div role="alert">
651+
<span class="error" ng-show="myForm.input.$error.required">
652+
Required!</span>
653+
<span class="error" ng-show="myForm.input.$error.number">
654+
Not valid number!</span>
655+
</div>
638656
<tt>value = {{example.value}}</tt><br/>
639657
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
640658
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -719,11 +737,15 @@ var inputType = {
719737
}]);
720738
</script>
721739
<form name="myForm" ng-controller="ExampleController">
722-
URL: <input type="url" name="input" ng-model="url.text" required>
723-
<span class="error" ng-show="myForm.input.$error.required">
724-
Required!</span>
725-
<span class="error" ng-show="myForm.input.$error.url">
726-
Not valid url!</span>
740+
<label>URL:
741+
<input type="url" name="input" ng-model="url.text" required>
742+
<label>
743+
<div role="alert">
744+
<span class="error" ng-show="myForm.input.$error.required">
745+
Required!</span>
746+
<span class="error" ng-show="myForm.input.$error.url">
747+
Not valid url!</span>
748+
</div>
727749
<tt>text = {{url.text}}</tt><br/>
728750
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
729751
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -810,11 +832,15 @@ var inputType = {
810832
}]);
811833
</script>
812834
<form name="myForm" ng-controller="ExampleController">
813-
Email: <input type="email" name="input" ng-model="email.text" required>
814-
<span class="error" ng-show="myForm.input.$error.required">
815-
Required!</span>
816-
<span class="error" ng-show="myForm.input.$error.email">
817-
Not valid email!</span>
835+
<label>Email:
836+
<input type="email" name="input" ng-model="email.text" required>
837+
</label>
838+
<div role="alert">
839+
<span class="error" ng-show="myForm.input.$error.required">
840+
Required!</span>
841+
<span class="error" ng-show="myForm.input.$error.email">
842+
Not valid email!</span>
843+
</div>
818844
<tt>text = {{email.text}}</tt><br/>
819845
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
820846
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -883,9 +909,18 @@ var inputType = {
883909
}]);
884910
</script>
885911
<form name="myForm" ng-controller="ExampleController">
886-
<input type="radio" ng-model="color.name" value="red"> Red <br/>
887-
<input type="radio" ng-model="color.name" ng-value="specialValue"> Green <br/>
888-
<input type="radio" ng-model="color.name" value="blue"> Blue <br/>
912+
<label>
913+
<input id="red" type="radio" ng-model="color.name" value="red">
914+
Red
915+
</label><br/>
916+
<label>
917+
<input id="green" type="radio" ng-model="color.name" ng-value="specialValue">
918+
Green
919+
</label><br/>
920+
<label>
921+
<input id="blue" type="radio" ng-model="color.name" value="blue">
922+
Blue
923+
</label><br/>
889924
<tt>color = {{color.name | json}}</tt><br/>
890925
</form>
891926
Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.
@@ -933,9 +968,13 @@ var inputType = {
933968
}]);
934969
</script>
935970
<form name="myForm" ng-controller="ExampleController">
936-
Value1: <input type="checkbox" ng-model="checkboxModel.value1"> <br/>
937-
Value2: <input type="checkbox" ng-model="checkboxModel.value2"
938-
ng-true-value="'YES'" ng-false-value="'NO'"> <br/>
971+
<label>Value1:
972+
<input type="checkbox" ng-model="checkboxModel.value1">
973+
</label><br/>
974+
<label>Value2:
975+
<input type="checkbox" ng-model="checkboxModel.value2"
976+
ng-true-value="'YES'" ng-false-value="'NO'">
977+
</label><br/>
939978
<tt>value1 = {{checkboxModel.value1}}</tt><br/>
940979
<tt>value2 = {{checkboxModel.value2}}</tt><br/>
941980
</form>
@@ -1452,15 +1491,23 @@ function checkboxInputType(scope, element, attr, ctrl, $sniffer, $browser, $filt
14521491
</script>
14531492
<div ng-controller="ExampleController">
14541493
<form name="myForm">
1455-
User name: <input type="text" name="userName" ng-model="user.name" required>
1456-
<span class="error" ng-show="myForm.userName.$error.required">
1457-
Required!</span><br>
1458-
Last name: <input type="text" name="lastName" ng-model="user.last"
1494+
<label>User name:
1495+
<input type="text" name="userName" ng-model="user.name" required>
1496+
</label>
1497+
<div role="alert">
1498+
<span class="error" ng-show="myForm.userName.$error.required">
1499+
Required!</span>
1500+
</div>
1501+
<label>Last name:
1502+
<input type="text" name="lastName" ng-model="user.last"
14591503
ng-minlength="3" ng-maxlength="10">
1460-
<span class="error" ng-show="myForm.lastName.$error.minlength">
1461-
Too short!</span>
1462-
<span class="error" ng-show="myForm.lastName.$error.maxlength">
1463-
Too long!</span><br>
1504+
</label>
1505+
<div role="alert">
1506+
<span class="error" ng-show="myForm.lastName.$error.minlength">
1507+
Too short!</span>
1508+
<span class="error" ng-show="myForm.lastName.$error.maxlength">
1509+
Too long!</span>
1510+
</div>
14641511
</form>
14651512
<hr>
14661513
<tt>user = {{user}}</tt><br/>

‎src/ng/directive/ngModel.js

Lines changed: 29 additions & 20 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 id="inputLabel1">With $rollbackViewValue()</p>
478+
* <input name="myInput1" aria-labelledby="inputLabel1" 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 id="inputLabel2">Without $rollbackViewValue()</p>
483+
* <input name="myInput2" aria-labelledby="inputLabel2" ng-model="myValue"
484+
* ng-keydown="resetWithoutCancel($event)"><br/>
483485
* myValue: "{{ myValue }}"
484486
* </form>
485487
* </div>
@@ -943,10 +945,13 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
943945
background: red;
944946
}
945947
</style>
946-
Update input to see transitions when valid/invalid.
947-
Integer is a valid value.
948+
<p id="inputDescription">
949+
Update input to see transitions when valid/invalid.
950+
Integer is a valid value.
951+
</p>
948952
<form name="testForm" ng-controller="ExampleController">
949-
<input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input" />
953+
<input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input"
954+
aria-labelledby="inputDescription" />
950955
</form>
951956
</file>
952957
* </example>
@@ -976,10 +981,11 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
976981
<file name="index.html">
977982
<div ng-controller="ExampleController">
978983
<form name="userForm">
979-
Name:
980-
<input type="text" name="userName"
984+
<label>Name:
985+
<input type="text" name="userName"
981986
ng-model="user.name"
982987
ng-model-options="{ getterSetter: true }" />
988+
</label>
983989
</form>
984990
<pre>user.name = <span ng-bind="user.name()"></span></pre>
985991
</div>
@@ -1115,14 +1121,15 @@ var DEFAULT_REGEXP = /(\s+|^)default(\s+|$)/;
11151121
<file name="index.html">
11161122
<div ng-controller="ExampleController">
11171123
<form name="userForm">
1118-
Name:
1119-
<input type="text" name="userName"
1124+
<label>Name:
1125+
<input type="text" name="userName"
11201126
ng-model="user.name"
11211127
ng-model-options="{ updateOn: 'blur' }"
1122-
ng-keyup="cancel($event)" /><br />
1123-
1124-
Other data:
1125-
<input type="text" ng-model="user.data" /><br />
1128+
ng-keyup="cancel($event)" />
1129+
</label><br />
1130+
<label>Other data:
1131+
<input type="text" ng-model="user.data" />
1132+
</label><br />
11261133
</form>
11271134
<pre>user.name = <span ng-bind="user.name"></span></pre>
11281135
</div>
@@ -1170,10 +1177,11 @@ var DEFAULT_REGEXP = /(\s+|^)default(\s+|$)/;
11701177
<file name="index.html">
11711178
<div ng-controller="ExampleController">
11721179
<form name="userForm">
1173-
Name:
1174-
<input type="text" name="userName"
1180+
<label>Name:
1181+
<input type="text" name="userName"
11751182
ng-model="user.name"
11761183
ng-model-options="{ debounce: 1000 }" />
1184+
</label>
11771185
<button ng-click="userForm.userName.$rollbackViewValue(); user.name=''">Clear</button><br />
11781186
</form>
11791187
<pre>user.name = <span ng-bind="user.name"></span></pre>
@@ -1193,10 +1201,11 @@ var DEFAULT_REGEXP = /(\s+|^)default(\s+|$)/;
11931201
<file name="index.html">
11941202
<div ng-controller="ExampleController">
11951203
<form name="userForm">
1196-
Name:
1197-
<input type="text" name="userName"
1204+
<label>Name:
1205+
<input type="text" name="userName"
11981206
ng-model="user.name"
11991207
ng-model-options="{ getterSetter: true }" />
1208+
</label>
12001209
</form>
12011210
<pre>user.name = <span ng-bind="user.name()"></span></pre>
12021211
</div>

0 commit comments

Comments
 (0)