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

Commit 448b3b5

Browse files
author
Marcy Sutton
committed
docs(): better accessibility in ng docs
1 parent 8da30b0 commit 448b3b5

23 files changed

+204
-162
lines changed

‎src/ng/compile.js

Lines changed: 3 additions & 3 deletions
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

Lines changed: 12 additions & 12 deletions
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/%7B%7Bhash%7D%7D"/>
116+
* <img src="http://www.gravatar.com/avatar/%7B%7Bhash%7D%7D" alt="Description"/>
117117
* ```
118118
*
119119
* The correct way to write it:
120120
* ```html
121-
* <img ng-src="http://www.gravatar.com/avatar/%7B%7Bhash%7D%7D"/>
121+
* <img ng-src="http://www.gravatar.com/avatar/%7B%7Bhash%7D%7D" alt="Description" />
122122
* ```
123123
*
124124
* @element IMG
@@ -139,12 +139,12 @@
139139
*
140140
* The buggy way to write it:
141141
* ```html
142-
* <img srcset="https://github.com/service/https://github.com/service/http://www.gravatar.com/avatar/%7B%7Bhash%7D%7D%202x "/>
142+
* <img srcset="https://github.com/service/https://github.com/service/http://www.gravatar.com/avatar/%7B%7Bhash%7D%7D%202x " alt="Description"/>
143143
* ```
144144
*
145145
* The correct way to write it:
146146
* ```html
147-
* <img ng-srcset="https://github.com/service/https://github.com/service/http://www.gravatar.com/avatar/%7B%7Bhash%7D%7D%202x "/>
147+
* <img ng-srcset="https://github.com/service/https://github.com/service/http://www.gravatar.com/avatar/%7B%7Bhash%7D%7D%202x " 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

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ var inputType = {
7070
<form name="myForm" ng-controller="ExampleController">
7171
<label>Single word:
7272
<input type="text" name="input" ng-model="example.text"
73-
ng-pattern="example.word" required ng-trim="false">
73+
ng-pattern="example.word" required ng-trim="false">
7474
</label>
7575
<div role="alert">
7676
<span class="error" ng-show="myForm.input.$error.required">
@@ -444,7 +444,8 @@ var inputType = {
444444
<form name="myForm" ng-controller="DateController as dateCtrl">
445445
<label>Pick a date between in 2013:
446446
<input type="week" name="input" ng-model="example.value"
447-
placeholder="YYYY-W##" min="2012-W32" max="2013-W52" required />
447+
placeholder="YYYY-W##" min="2012-W32"
448+
max="2013-W52" required />
448449
</label>
449450
<div role="alert">
450451
<span class="error" ng-show="myForm.input.$error.required">
@@ -645,7 +646,7 @@ var inputType = {
645646
<form name="myForm" ng-controller="ExampleController">
646647
<label>Number:
647648
<input type="number" name="input" ng-model="example.value"
648-
min="0" max="99" required>
649+
min="0" max="99" required>
649650
</label>
650651
<div role="alert">
651652
<span class="error" ng-show="myForm.input.$error.required">
@@ -910,15 +911,15 @@ var inputType = {
910911
</script>
911912
<form name="myForm" ng-controller="ExampleController">
912913
<label>
913-
<input id="red" type="radio" ng-model="color.name" value="red">
914+
<input type="radio" ng-model="color.name" value="red">
914915
Red
915916
</label><br/>
916917
<label>
917-
<input id="green" type="radio" ng-model="color.name" ng-value="specialValue">
918+
<input type="radio" ng-model="color.name" ng-value="specialValue">
918919
Green
919920
</label><br/>
920921
<label>
921-
<input id="blue" type="radio" ng-model="color.name" value="blue">
922+
<input type="radio" ng-model="color.name" value="blue">
922923
Blue
923924
</label><br/>
924925
<tt>color = {{color.name | json}}</tt><br/>
@@ -973,7 +974,7 @@ var inputType = {
973974
</label><br/>
974975
<label>Value2:
975976
<input type="checkbox" ng-model="checkboxModel.value2"
976-
ng-true-value="'YES'" ng-false-value="'NO'">
977+
ng-true-value="'YES'" ng-false-value="'NO'">
977978
</label><br/>
978979
<tt>value1 = {{checkboxModel.value1}}</tt><br/>
979980
<tt>value2 = {{checkboxModel.value2}}</tt><br/>
@@ -1491,16 +1492,18 @@ function checkboxInputType(scope, element, attr, ctrl, $sniffer, $browser, $filt
14911492
</script>
14921493
<div ng-controller="ExampleController">
14931494
<form name="myForm">
1494-
<label>User name:
1495-
<input type="text" name="userName" ng-model="user.name" required>
1495+
<label>
1496+
User name:
1497+
<input type="text" name="userName" ng-model="user.name" required>
14961498
</label>
14971499
<div role="alert">
14981500
<span class="error" ng-show="myForm.userName.$error.required">
14991501
Required!</span>
15001502
</div>
1501-
<label>Last name:
1502-
<input type="text" name="lastName" ng-model="user.last"
1503-
ng-minlength="3" ng-maxlength="10">
1503+
<label>
1504+
Last name:
1505+
<input type="text" name="lastName" ng-model="user.last"
1506+
ng-minlength="3" ng-maxlength="10">
15041507
</label>
15051508
<div role="alert">
15061509
<span class="error" ng-show="myForm.lastName.$error.minlength">
@@ -1511,14 +1514,14 @@ function checkboxInputType(scope, element, attr, ctrl, $sniffer, $browser, $filt
15111514
</form>
15121515
<hr>
15131516
<tt>user = {{user}}</tt><br/>
1514-
<tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br>
1515-
<tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br>
1516-
<tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br>
1517-
<tt>myForm.lastName.$error = {{myForm.lastName.$error}}</tt><br>
1518-
<tt>myForm.$valid = {{myForm.$valid}}</tt><br>
1519-
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
1520-
<tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br>
1521-
<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/>
15221525
</div>
15231526
</file>
15241527
<file name="protractor.js" type="protractor">

‎src/ng/directive/ngBind.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
}]);
3636
</script>
3737
<div ng-controller="ExampleController">
38-
Enter name: <input type="text" ng-model="name"><br>
38+
<label>Enter name: <input type="text" ng-model="name"></label><br>
3939
Hello <span ng-bind="name"></span>!
4040
</div>
4141
</file>
@@ -96,8 +96,8 @@ var ngBindDirective = ['$compile', function($compile) {
9696
}]);
9797
</script>
9898
<div ng-controller="ExampleController">
99-
Salutation: <input type="text" ng-model="salutation"><br>
100-
Name: <input type="text" ng-model="name"><br>
99+
<label>Salutation: <input type="text" ng-model="salutation"></label><br>
100+
<label>Name: <input type="text" ng-model="name"></label><br>
101101
<pre ng-bind-template="{{salutation}} {{name}}!"></pre>
102102
</div>
103103
</file>

‎src/ng/directive/ngClass.js

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -161,21 +161,34 @@ function classDirective(name, selector) {
161161
<example>
162162
<file name="index.html">
163163
<p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
164-
<input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br>
165-
<input type="checkbox" ng-model="important"> important (apply "bold" class)<br>
166-
<input type="checkbox" ng-model="error"> error (apply "red" class)
164+
<label>
165+
<input type="checkbox" ng-model="deleted">
166+
deleted (apply "strike" class)
167+
</label><br>
168+
<label>
169+
<input type="checkbox" ng-model="important">
170+
important (apply "bold" class)
171+
</label><br>
172+
<label>
173+
<input type="checkbox" ng-model="error">
174+
error (apply "red" class)
175+
</label>
167176
<hr>
168177
<p ng-class="style">Using String Syntax</p>
169-
<input type="text" ng-model="style" placeholder="Type: bold strike red">
178+
<input type="text" ng-model="style"
179+
placeholder="Type: bold strike red" aria-label="Type: bold strike red">
170180
<hr>
171181
<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
172-
<input ng-model="style1" placeholder="Type: bold, strike or red"><br>
173-
<input ng-model="style2" placeholder="Type: bold, strike or red"><br>
174-
<input ng-model="style3" placeholder="Type: bold, strike or red"><br>
182+
<input ng-model="style1"
183+
placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red"><br>
184+
<input ng-model="style2"
185+
placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 2"><br>
186+
<input ng-model="style3"
187+
placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 3"><br>
175188
<hr>
176189
<p ng-class="[style4, {orange: warning}]">Using Array and Map Syntax</p>
177-
<input ng-model="style4" placeholder="Type: bold, strike"><br>
178-
<input type="checkbox" ng-model="warning"> warning (apply "orange" class)
190+
<input ng-model="style4" placeholder="Type: bold, strike" aria-label="Type: bold, strike"><br>
191+
<label><input type="checkbox" ng-model="warning"> warning (apply "orange" class)</label>
179192
</file>
180193
<file name="style.css">
181194
.strike {

‎src/ng/directive/ngController.js

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -64,20 +64,20 @@
6464
* <example name="ngControllerAs" module="controllerAsExample">
6565
* <file name="index.html">
6666
* <div id="ctrl-as-exmpl" ng-controller="SettingsController1 as settings">
67-
* Name: <input type="text" ng-model="settings.name"/>
68-
* [ <a href="" ng-click="settings.greet()">greet</a> ]<br/>
67+
* <label>Name: <input type="text" ng-model="settings.name"/></label>
68+
* <button ng-click="settings.greet()">greet</button><br/>
6969
* Contact:
7070
* <ul>
7171
* <li ng-repeat="contact in settings.contacts">
72-
* <select ng-model="contact.type">
72+
* <select ng-model="contact.type" aria-label="Contact method" id="select_{{$index}}">
7373
* <option>phone</option>
7474
* <option>email</option>
7575
* </select>
76-
* <input type="text" ng-model="contact.value"/>
77-
* [ <a href="" ng-click="settings.clearContact(contact)">clear</a>
78-
* | <a href="" ng-click="settings.removeContact(contact)">X</a> ]
76+
* <input type="text" ng-model="contact.value" aria-labelledby="select_{{$index}}" />
77+
* <button ng-click="settings.clearContact(contact)">clear</button>
78+
* <button ng-click="settings.removeContact(contact)" aria-label="Remove">X</button>
7979
* </li>
80-
* <li>[ <a href="" ng-click="settings.addContact()">add</a> ]</li>
80+
* <li><button ng-click="settings.addContact()">add</button></li>
8181
* </ul>
8282
* </div>
8383
* </file>
@@ -147,20 +147,20 @@
147147
* <example name="ngController" module="controllerExample">
148148
* <file name="index.html">
149149
* <div id="ctrl-exmpl" ng-controller="SettingsController2">
150-
* Name: <input type="text" ng-model="name"/>
151-
* [ <a href="" ng-click="greet()">greet</a> ]<br/>
150+
* <label>Name: <input type="text" ng-model="name"/></label>
151+
* <button ng-click="greet()">greet</button><br/>
152152
* Contact:
153153
* <ul>
154154
* <li ng-repeat="contact in contacts">
155-
* <select ng-model="contact.type">
155+
* <select ng-model="contact.type" id="select_{{$index}}">
156156
* <option>phone</option>
157157
* <option>email</option>
158158
* </select>
159-
* <input type="text" ng-model="contact.value"/>
160-
* [ <a href="" ng-click="clearContact(contact)">clear</a>
161-
* | <a href="" ng-click="removeContact(contact)">X</a> ]
159+
* <input type="text" ng-model="contact.value" aria-labelledby="select_{{$index}}" />
160+
* <button ng-click="clearContact(contact)">clear</button>
161+
* <button ng-click="removeContact(contact)">X</button>
162162
* </li>
163-
* <li>[ <a href="" ng-click="addContact()">add</a> ]</li>
163+
* <li>[ <button ng-click="addContact()">add</button> ]</li>
164164
* </ul>
165165
* </div>
166166
* </file>

‎src/ng/directive/ngIf.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
* @example
4747
<example module="ngAnimate" deps="angular-animate.js" animations="true">
4848
<file name="index.html">
49-
Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
49+
<label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>
5050
Show when checked:
5151
<span ng-if="checked" class="animate-if">
5252
This is removed when the checkbox is unchecked.

‎src/ng/directive/ngList.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,11 @@
3030
* </file>
3131
* <file name="index.html">
3232
* <form name="myForm" ng-controller="ExampleController">
33-
* List: <input name="namesInput" ng-model="names" ng-list required>
34-
* <span class="error" ng-show="myForm.namesInput.$error.required">
33+
* <label>List: <input name="namesInput" ng-model="names" ng-list required></label>
34+
* <span role="alert">
35+
* <span class="error" ng-show="myForm.namesInput.$error.required">
3536
* Required!</span>
37+
* </span>
3638
* <br>
3739
* <tt>names = {{names}}</tt><br/>
3840
* <tt>myForm.namesInput.$valid = {{myForm.namesInput.$valid}}</tt><br/>

0 commit comments

Comments
 (0)