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

Commit a9c19fa

Browse files
author
Marcy Sutton
committed
docs(input): better accessibility in examples
1 parent 75725b4 commit a9c19fa

File tree

1 file changed

+90
-59
lines changed

1 file changed

+90
-59
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/>

0 commit comments

Comments
 (0)