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

Commit f97f931

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

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/>
@@ -625,12 +639,16 @@ var inputType = {
625639
}]);
626640
</script>
627641
<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>
642+
<label>Number:
643+
<input type="number" name="input" ng-model="example.value"
644+
min="0" max="99" required>
645+
</label>
646+
<div role="alert">
647+
<span class="error" ng-show="myForm.input.$error.required">
648+
Required!</span>
649+
<span class="error" ng-show="myForm.input.$error.number">
650+
Not valid number!</span>
651+
</div>
634652
<tt>value = {{example.value}}</tt><br/>
635653
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
636654
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -715,11 +733,15 @@ var inputType = {
715733
}]);
716734
</script>
717735
<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>
736+
<label>URL:
737+
<input type="url" name="input" ng-model="url.text" required>
738+
<label>
739+
<div role="alert">
740+
<span class="error" ng-show="myForm.input.$error.required">
741+
Required!</span>
742+
<span class="error" ng-show="myForm.input.$error.url">
743+
Not valid url!</span>
744+
</div>
723745
<tt>text = {{url.text}}</tt><br/>
724746
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
725747
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -806,11 +828,15 @@ var inputType = {
806828
}]);
807829
</script>
808830
<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>
831+
<label>Email:
832+
<input type="email" name="input" ng-model="email.text" required>
833+
</label>
834+
<div role="alert">
835+
<span class="error" ng-show="myForm.input.$error.required">
836+
Required!</span>
837+
<span class="error" ng-show="myForm.input.$error.email">
838+
Not valid email!</span>
839+
</div>
814840
<tt>text = {{email.text}}</tt><br/>
815841
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
816842
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -879,9 +905,18 @@ var inputType = {
879905
}]);
880906
</script>
881907
<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/>
908+
<label>
909+
<input id="red" type="radio" ng-model="color.name" value="red">
910+
Red
911+
</label><br/>
912+
<label>
913+
<input id="green" type="radio" ng-model="color.name" ng-value="specialValue">
914+
Green
915+
</label><br/>
916+
<label>
917+
<input id="blue" type="radio" ng-model="color.name" value="blue">
918+
Blue
919+
</label><br/>
885920
<tt>color = {{color.name | json}}</tt><br/>
886921
</form>
887922
Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.
@@ -929,9 +964,13 @@ var inputType = {
929964
}]);
930965
</script>
931966
<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/>
967+
<label>Value1:
968+
<input type="checkbox" ng-model="checkboxModel.value1">
969+
</label><br/>
970+
<label>Value2:
971+
<input type="checkbox" ng-model="checkboxModel.value2"
972+
ng-true-value="'YES'" ng-false-value="'NO'">
973+
</label><br/>
935974
<tt>value1 = {{checkboxModel.value1}}</tt><br/>
936975
<tt>value2 = {{checkboxModel.value2}}</tt><br/>
937976
</form>
@@ -1449,15 +1488,23 @@ function checkboxInputType(scope, element, attr, ctrl, $sniffer, $browser, $filt
14491488
</script>
14501489
<div ng-controller="ExampleController">
14511490
<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"
1491+
<label>User name:
1492+
<input type="text" name="userName" ng-model="user.name" required>
1493+
</label>
1494+
<div role="alert">
1495+
<span class="error" ng-show="myForm.userName.$error.required">
1496+
Required!</span>
1497+
</div>
1498+
<label>Last name:
1499+
<input type="text" name="lastName" ng-model="user.last"
14561500
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>
1501+
</label>
1502+
<div role="alert">
1503+
<span class="error" ng-show="myForm.lastName.$error.minlength">
1504+
Too short!</span>
1505+
<span class="error" ng-show="myForm.lastName.$error.maxlength">
1506+
Too long!</span>
1507+
</div>
14611508
</form>
14621509
<hr>
14631510
<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>
@@ -940,10 +942,13 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
940942
background: red;
941943
}
942944
</style>
943-
Update input to see transitions when valid/invalid.
944-
Integer is a valid value.
945+
<p id="inputDescription">
946+
Update input to see transitions when valid/invalid.
947+
Integer is a valid value.
948+
</p>
945949
<form name="testForm" ng-controller="ExampleController">
946-
<input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input" />
950+
<input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input"
951+
aria-labelledby="inputDescription" />
947952
</form>
948953
</file>
949954
* </example>
@@ -973,10 +978,11 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
973978
<file name="index.html">
974979
<div ng-controller="ExampleController">
975980
<form name="userForm">
976-
Name:
977-
<input type="text" name="userName"
981+
<label>Name:
982+
<input type="text" name="userName"
978983
ng-model="user.name"
979984
ng-model-options="{ getterSetter: true }" />
985+
</label>
980986
</form>
981987
<pre>user.name = <span ng-bind="user.name()"></span></pre>
982988
</div>
@@ -1110,14 +1116,15 @@ var DEFAULT_REGEXP = /(\s+|^)default(\s+|$)/;
11101116
<file name="index.html">
11111117
<div ng-controller="ExampleController">
11121118
<form name="userForm">
1113-
Name:
1114-
<input type="text" name="userName"
1119+
<label>Name:
1120+
<input type="text" name="userName"
11151121
ng-model="user.name"
11161122
ng-model-options="{ updateOn: 'blur' }"
1117-
ng-keyup="cancel($event)" /><br />
1118-
1119-
Other data:
1120-
<input type="text" ng-model="user.data" /><br />
1123+
ng-keyup="cancel($event)" />
1124+
</label><br />
1125+
<label>Other data:
1126+
<input type="text" ng-model="user.data" />
1127+
</label><br />
11211128
</form>
11221129
<pre>user.name = <span ng-bind="user.name"></span></pre>
11231130
</div>
@@ -1165,10 +1172,11 @@ var DEFAULT_REGEXP = /(\s+|^)default(\s+|$)/;
11651172
<file name="index.html">
11661173
<div ng-controller="ExampleController">
11671174
<form name="userForm">
1168-
Name:
1169-
<input type="text" name="userName"
1175+
<label>Name:
1176+
<input type="text" name="userName"
11701177
ng-model="user.name"
11711178
ng-model-options="{ debounce: 1000 }" />
1179+
</label>
11721180
<button ng-click="userForm.userName.$rollbackViewValue(); user.name=''">Clear</button><br />
11731181
</form>
11741182
<pre>user.name = <span ng-bind="user.name"></span></pre>
@@ -1188,10 +1196,11 @@ var DEFAULT_REGEXP = /(\s+|^)default(\s+|$)/;
11881196
<file name="index.html">
11891197
<div ng-controller="ExampleController">
11901198
<form name="userForm">
1191-
Name:
1192-
<input type="text" name="userName"
1199+
<label>Name:
1200+
<input type="text" name="userName"
11931201
ng-model="user.name"
11941202
ng-model-options="{ getterSetter: true }" />
1203+
</label>
11951204
</form>
11961205
<pre>user.name = <span ng-bind="user.name()"></span></pre>
11971206
</div>

0 commit comments

Comments
 (0)