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

Commit 2a156c2

Browse files
author
Marcy Sutton
committed
docs(): better accessibility in docs examples
Closes #11079
1 parent fe9cd9d commit 2a156c2

23 files changed

+327
-229
lines changed

‎src/ng/compile.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -621,8 +621,8 @@
621621
}]);
622622
</script>
623623
<div ng-controller="GreeterController">
624-
<input ng-model="name"> <br>
625-
<textarea ng-model="html"></textarea> <br>
624+
<input ng-model="name"> <br/>
625+
<textarea ng-model="html"></textarea> <br/>
626626
<div compile="html"></div>
627627
</div>
628628
</file>
@@ -659,7 +659,7 @@
659659
* * `cloneAttachFn` - If `cloneAttachFn` is provided, then the link function will clone the
660660
* `template` and call the `cloneAttachFn` function allowing the caller to attach the
661661
* cloned elements to the DOM document at the appropriate place. The `cloneAttachFn` is
662-
* called as: <br> `cloneAttachFn(clonedElement, scope)` where:
662+
* called as: <br/> `cloneAttachFn(clonedElement, scope)` where:
663663
*
664664
* * `clonedElement` - is a clone of the original `element` passed into the compiler.
665665
* * `scope` - is the current scope with which the linking function is working with.

‎src/ng/directive/attrs.js

+12-12
Original file line numberDiff line numberDiff line change
@@ -113,12 +113,12 @@
113113
*
114114
* The buggy way to write it:
115115
* ```html
116-
* <img src="http://www.gravatar.com/avatar/{{hash}}"/>
116+
* <img src="http://www.gravatar.com/avatar/{{hash}}" alt="Description"/>
117117
* ```
118118
*
119119
* The correct way to write it:
120120
* ```html
121-
* <img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>
121+
* <img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />
122122
* ```
123123
*
124124
* @element IMG
@@ -139,12 +139,12 @@
139139
*
140140
* The buggy way to write it:
141141
* ```html
142-
* <img srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/>
142+
* <img srcset="http://www.gravatar.com/avatar/{{hash}} 2x" alt="Description"/>
143143
* ```
144144
*
145145
* The correct way to write it:
146146
* ```html
147-
* <img ng-srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/>
147+
* <img ng-srcset="http://www.gravatar.com/avatar/{{hash}} 2x" alt="Description" />
148148
* ```
149149
*
150150
* @element IMG
@@ -181,7 +181,7 @@
181181
* @example
182182
<example>
183183
<file name="index.html">
184-
Click me to toggle: <input type="checkbox" ng-model="checked"><br/>
184+
<label>Click me to toggle: <input type="checkbox" ng-model="checked"></label><br/>
185185
<button ng-model="button" ng-disabled="checked">Button</button>
186186
</file>
187187
<file name="protractor.js" type="protractor">
@@ -216,8 +216,8 @@
216216
* @example
217217
<example>
218218
<file name="index.html">
219-
Check me to check both: <input type="checkbox" ng-model="master"><br/>
220-
<input id="checkSlave" type="checkbox" ng-checked="master">
219+
<label>Check me to check both: <input type="checkbox" ng-model="master"></label><br/>
220+
<input id="checkSlave" type="checkbox" ng-checked="master" aria-label="Slave input">
221221
</file>
222222
<file name="protractor.js" type="protractor">
223223
it('should check both checkBoxes', function() {
@@ -251,8 +251,8 @@
251251
* @example
252252
<example>
253253
<file name="index.html">
254-
Check me to make text readonly: <input type="checkbox" ng-model="checked"><br/>
255-
<input type="text" ng-readonly="checked" value="I'm Angular"/>
254+
<label>Check me to make text readonly: <input type="checkbox" ng-model="checked"></label><br/>
255+
<input type="text" ng-readonly="checked" value="I'm Angular" aria-label="Readonly field" />
256256
</file>
257257
<file name="protractor.js" type="protractor">
258258
it('should toggle readonly attr', function() {
@@ -287,8 +287,8 @@
287287
* @example
288288
<example>
289289
<file name="index.html">
290-
Check me to select: <input type="checkbox" ng-model="selected"><br/>
291-
<select>
290+
<label>Check me to select: <input type="checkbox" ng-model="selected"></label><br/>
291+
<select aria-label="ngSelected demo">
292292
<option>Hello!</option>
293293
<option id="greet" ng-selected="selected">Greetings!</option>
294294
</select>
@@ -324,7 +324,7 @@
324324
* @example
325325
<example>
326326
<file name="index.html">
327-
Check me check multiple: <input type="checkbox" ng-model="open"><br/>
327+
<label>Check me check multiple: <input type="checkbox" ng-model="open"></label><br/>
328328
<details id="details" ng-open="open">
329329
<summary>Show/Hide me</summary>
330330
</details>

‎src/ng/directive/input.js

+123-73
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,17 @@ 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"
438-
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>
445+
<label>Pick a date between in 2013:
446+
<input type="week" name="input" ng-model="example.value"
447+
placeholder="YYYY-W##" min="2012-W32"
448+
max="2013-W52" required />
449+
</label>
450+
<div role="alert">
451+
<span class="error" ng-show="myForm.input.$error.required">
452+
Required!</span>
453+
<span class="error" ng-show="myForm.input.$error.week">
454+
Not a valid date!</span>
455+
</div>
443456
<tt>value = {{example.value | date: "yyyy-Www"}}</tt><br/>
444457
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
445458
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -526,13 +539,15 @@ var inputType = {
526539
}]);
527540
</script>
528541
<form name="myForm" ng-controller="DateController as dateCtrl">
529-
Pick a month in 2013:
542+
<label for="exampleInput">Pick a month in 2013:</label>
530543
<input id="exampleInput" type="month" name="input" ng-model="example.value"
531544
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>
545+
<div role="alert">
546+
<span class="error" ng-show="myForm.input.$error.required">
547+
Required!</span>
548+
<span class="error" ng-show="myForm.input.$error.month">
549+
Not a valid month!</span>
550+
</div>
536551
<tt>value = {{example.value | date: "yyyy-MM"}}</tt><br/>
537552
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
538553
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -629,12 +644,16 @@ var inputType = {
629644
}]);
630645
</script>
631646
<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>
647+
<label>Number:
648+
<input type="number" name="input" ng-model="example.value"
649+
min="0" max="99" required>
650+
</label>
651+
<div role="alert">
652+
<span class="error" ng-show="myForm.input.$error.required">
653+
Required!</span>
654+
<span class="error" ng-show="myForm.input.$error.number">
655+
Not valid number!</span>
656+
</div>
638657
<tt>value = {{example.value}}</tt><br/>
639658
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
640659
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -719,11 +738,15 @@ var inputType = {
719738
}]);
720739
</script>
721740
<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>
741+
<label>URL:
742+
<input type="url" name="input" ng-model="url.text" required>
743+
<label>
744+
<div role="alert">
745+
<span class="error" ng-show="myForm.input.$error.required">
746+
Required!</span>
747+
<span class="error" ng-show="myForm.input.$error.url">
748+
Not valid url!</span>
749+
</div>
727750
<tt>text = {{url.text}}</tt><br/>
728751
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
729752
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -810,11 +833,15 @@ var inputType = {
810833
}]);
811834
</script>
812835
<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>
836+
<label>Email:
837+
<input type="email" name="input" ng-model="email.text" required>
838+
</label>
839+
<div role="alert">
840+
<span class="error" ng-show="myForm.input.$error.required">
841+
Required!</span>
842+
<span class="error" ng-show="myForm.input.$error.email">
843+
Not valid email!</span>
844+
</div>
818845
<tt>text = {{email.text}}</tt><br/>
819846
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
820847
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
@@ -883,9 +910,18 @@ var inputType = {
883910
}]);
884911
</script>
885912
<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/>
913+
<label>
914+
<input type="radio" ng-model="color.name" value="red">
915+
Red
916+
</label><br/>
917+
<label>
918+
<input type="radio" ng-model="color.name" ng-value="specialValue">
919+
Green
920+
</label><br/>
921+
<label>
922+
<input type="radio" ng-model="color.name" value="blue">
923+
Blue
924+
</label><br/>
889925
<tt>color = {{color.name | json}}</tt><br/>
890926
</form>
891927
Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.
@@ -933,9 +969,13 @@ var inputType = {
933969
}]);
934970
</script>
935971
<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/>
972+
<label>Value1:
973+
<input type="checkbox" ng-model="checkboxModel.value1">
974+
</label><br/>
975+
<label>Value2:
976+
<input type="checkbox" ng-model="checkboxModel.value2"
977+
ng-true-value="'YES'" ng-false-value="'NO'">
978+
</label><br/>
939979
<tt>value1 = {{checkboxModel.value1}}</tt><br/>
940980
<tt>value2 = {{checkboxModel.value2}}</tt><br/>
941981
</form>
@@ -1452,26 +1492,36 @@ function checkboxInputType(scope, element, attr, ctrl, $sniffer, $browser, $filt
14521492
</script>
14531493
<div ng-controller="ExampleController">
14541494
<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"
1459-
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>
1495+
<label>
1496+
User name:
1497+
<input type="text" name="userName" ng-model="user.name" required>
1498+
</label>
1499+
<div role="alert">
1500+
<span class="error" ng-show="myForm.userName.$error.required">
1501+
Required!</span>
1502+
</div>
1503+
<label>
1504+
Last name:
1505+
<input type="text" name="lastName" ng-model="user.last"
1506+
ng-minlength="3" ng-maxlength="10">
1507+
</label>
1508+
<div role="alert">
1509+
<span class="error" ng-show="myForm.lastName.$error.minlength">
1510+
Too short!</span>
1511+
<span class="error" ng-show="myForm.lastName.$error.maxlength">
1512+
Too long!</span>
1513+
</div>
14641514
</form>
14651515
<hr>
14661516
<tt>user = {{user}}</tt><br/>
1467-
<tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br>
1468-
<tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br>
1469-
<tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br>
1470-
<tt>myForm.lastName.$error = {{myForm.lastName.$error}}</tt><br>
1471-
<tt>myForm.$valid = {{myForm.$valid}}</tt><br>
1472-
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
1473-
<tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br>
1474-
<tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br>
1517+
<tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br/>
1518+
<tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br/>
1519+
<tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br/>
1520+
<tt>myForm.lastName.$error = {{myForm.lastName.$error}}</tt><br/>
1521+
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
1522+
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
1523+
<tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br/>
1524+
<tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br/>
14751525
</div>
14761526
</file>
14771527
<file name="protractor.js" type="protractor">

0 commit comments

Comments
 (0)