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

Commit 76cca2d

Browse files
author
Marcy Sutton
committed
docs(): better accessibility in ng docs
1 parent f97f931 commit 76cca2d

20 files changed

+120
-107
lines changed

‎src/ng/directive/attrs.js

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@
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
@@ -144,7 +144,7 @@
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
@@ -180,7 +180,7 @@
180180
* @example
181181
<example>
182182
<file name="index.html">
183-
Click me to toggle: <input type="checkbox" ng-model="checked"><br/>
183+
<label>Click me to toggle: <input type="checkbox" ng-model="checked"></label><br/>
184184
<button ng-model="button" ng-disabled="checked">Button</button>
185185
</file>
186186
<file name="protractor.js" type="protractor">
@@ -215,8 +215,8 @@
215215
* @example
216216
<example>
217217
<file name="index.html">
218-
Check me to check both: <input type="checkbox" ng-model="master"><br/>
219-
<input id="checkSlave" type="checkbox" ng-checked="master">
218+
<label>Check me to check both: <input type="checkbox" ng-model="master"></label><br/>
219+
<input id="checkSlave" type="checkbox" ng-checked="master" aria-label="Slave input">
220220
</file>
221221
<file name="protractor.js" type="protractor">
222222
it('should check both checkBoxes', function() {
@@ -250,8 +250,8 @@
250250
* @example
251251
<example>
252252
<file name="index.html">
253-
Check me to make text readonly: <input type="checkbox" ng-model="checked"><br/>
254-
<input type="text" ng-readonly="checked" value="I'm Angular"/>
253+
<label>Check me to make text readonly: <input type="checkbox" ng-model="checked"></label><br/>
254+
<input type="text" ng-readonly="checked" value="I'm Angular" aria-label="Readonly field" />
255255
</file>
256256
<file name="protractor.js" type="protractor">
257257
it('should toggle readonly attr', function() {
@@ -286,8 +286,8 @@
286286
* @example
287287
<example>
288288
<file name="index.html">
289-
Check me to select: <input type="checkbox" ng-model="selected"><br/>
290-
<select>
289+
<label>Check me to select: <input type="checkbox" ng-model="selected"></label><br/>
290+
<select aria-label="ngSelected demo">
291291
<option>Hello!</option>
292292
<option id="greet" ng-selected="selected">Greetings!</option>
293293
</select>
@@ -323,7 +323,7 @@
323323
* @example
324324
<example>
325325
<file name="index.html">
326-
Check me check multiple: <input type="checkbox" ng-model="open"><br/>
326+
<label>Check me check multiple: <input type="checkbox" ng-model="open"></label><br/>
327327
<details id="details" ng-open="open">
328328
<summary>Show/Hide me</summary>
329329
</details>

‎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: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -156,17 +156,17 @@ function classDirective(name, selector) {
156156
<example>
157157
<file name="index.html">
158158
<p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
159-
<input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br>
160-
<input type="checkbox" ng-model="important"> important (apply "bold" class)<br>
161-
<input type="checkbox" ng-model="error"> error (apply "red" class)
159+
<label><input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)</label><br>
160+
<label><input type="checkbox" ng-model="important"> important (apply "bold" class)</label><br>
161+
<label><input type="checkbox" ng-model="error"> error (apply "red" class)</label>
162162
<hr>
163163
<p ng-class="style">Using String Syntax</p>
164-
<input type="text" ng-model="style" placeholder="Type: bold strike red">
164+
<label><input type="text" ng-model="style" placeholder="Type: bold strike red">
165165
<hr>
166166
<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
167-
<input ng-model="style1" placeholder="Type: bold, strike or red"><br>
168-
<input ng-model="style2" placeholder="Type: bold, strike or red"><br>
169-
<input ng-model="style3" placeholder="Type: bold, strike or red"><br>
167+
<input ng-model="style1" placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red"><br>
168+
<input ng-model="style2" placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 2"><br>
169+
<input ng-model="style3" placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 3"><br>
170170
</file>
171171
<file name="style.css">
172172
.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/>

‎src/ng/directive/ngOptions.js

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -147,37 +147,39 @@ var ngOptionsMinErr = minErr('ngOptions');
147147
<div ng-controller="ExampleController">
148148
<ul>
149149
<li ng-repeat="color in colors">
150-
Name: <input ng-model="color.name">
151-
<input type="checkbox" ng-model="color.notAnOption"> Disabled?
152-
[<a href ng-click="colors.splice($index, 1)">X</a>]
150+
<label>Name: <input ng-model="color.name"></label>
151+
<label><input type="checkbox" ng-model="color.notAnOption"> Disabled?</label>
152+
[<button ng-click="colors.splice($index, 1)" aria-label="remove">X</button>]
153153
</li>
154154
<li>
155-
[<a href ng-click="colors.push({})">add</a>]
155+
[<button ng-click="colors.push({})">add</button>]
156156
</li>
157157
</ul>
158158
<hr/>
159-
Color (null not allowed):
160-
<select ng-model="myColor" ng-options="color.name for color in colors"></select><br>
161-
162-
Color (null allowed):
159+
<label>Color (null not allowed):
160+
<select ng-model="myColor" ng-options="color.name for color in colors"></select><br>
161+
</label>
162+
<label>Color (null allowed):
163163
<span class="nullable">
164164
<select ng-model="myColor" ng-options="color.name for color in colors">
165165
<option value="">-- choose color --</option>
166166
</select>
167-
</span><br/>
167+
</span></label><br/>
168168
169-
Color grouped by shade:
170-
<select ng-model="myColor" ng-options="color.name group by color.shade for color in colors">
171-
</select><br/>
169+
<label>Color grouped by shade:
170+
<select ng-model="myColor" ng-options="color.name group by color.shade for color in colors">
171+
</select>
172+
</label><br/>
172173
173-
Color grouped by shade, with some disabled:
174-
<select ng-model="myColor"
175-
ng-options="color.name group by color.shade disable when color.notAnOption for color in colors">
176-
</select><br/>
174+
<label>Color grouped by shade, with some disabled:
175+
<select ng-model="myColor"
176+
ng-options="color.name group by color.shade disable when color.notAnOption for color in colors">
177+
</select>
178+
</label><br/>
177179
178180
179181
180-
Select <a href ng-click="myColor = { name:'not in list', shade: 'other' }">bogus</a>.<br>
182+
Select <button ng-click="myColor = { name:'not in list', shade: 'other' }">bogus</button>.<br>
181183
<hr/>
182184
Currently selected: {{ {selected_color:myColor} }}
183185
<div style="border:solid 1px black; height:20px"

‎src/ng/directive/ngPluralize.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -103,9 +103,9 @@
103103
}]);
104104
</script>
105105
<div ng-controller="ExampleController">
106-
Person 1:<input type="text" ng-model="person1" value="Igor" /><br/>
107-
Person 2:<input type="text" ng-model="person2" value="Misko" /><br/>
108-
Number of People:<input type="text" ng-model="personCount" value="1" /><br/>
106+
<label>Person 1:<input type="text" ng-model="person1" value="Igor" /></label><br/>
107+
<label>Person 2:<input type="text" ng-model="person2" value="Misko" /></label><br/>
108+
<label>Number of People:<input type="text" ng-model="personCount" value="1" /></label><br/>
109109
110110
<!--- Example with simple pluralization rules for en locale --->
111111
Without Offset:

‎src/ng/directive/ngRepeat.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,7 @@
216216
{name:'Samantha', age:60, gender:'girl'}
217217
]">
218218
I have {{friends.length}} friends. They are:
219-
<input type="search" ng-model="q" placeholder="filter friends..." />
219+
<input type="search" ng-model="q" placeholder="filter friends..." aria-label="filter friends" />
220220
<ul class="example-animate-container">
221221
<li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">
222222
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.

‎src/ng/directive/ngShowHide.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ var NG_HIDE_IN_PROGRESS_CLASS = 'ng-hide-animate';
9898
* @example
9999
<example module="ngAnimate" deps="angular-animate.js" animations="true">
100100
<file name="index.html">
101-
Click me: <input type="checkbox" ng-model="checked"><br/>
101+
Click me: <input type="checkbox" ng-model="checked" aria-label="toggle ngHide and ngShow"><br/>
102102
<div>
103103
Show:
104104
<div class="check-element animate-show" ng-show="checked">
@@ -263,7 +263,7 @@ var ngShowDirective = ['$animate', function($animate) {
263263
* @example
264264
<example module="ngAnimate" deps="angular-animate.js" animations="true">
265265
<file name="index.html">
266-
Click me: <input type="checkbox" ng-model="checked"><br/>
266+
Click me: <input type="checkbox" ng-model="checked" aria-label="toggle ngShow and ngHide"><br/>
267267
<div>
268268
Show:
269269
<div class="check-element animate-hide" ng-show="checked">

‎src/ng/directive/ngTransclude.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434
}]);
3535
</script>
3636
<div ng-controller="ExampleController">
37-
<input ng-model="title"> <br/>
38-
<textarea ng-model="text"></textarea> <br/>
37+
<input ng-model="title" aria-label="title"> <br/>
38+
<textarea ng-model="text" aria-label="text"></textarea> <br/>
3939
<pane title="{{title}}">{{text}}</pane>
4040
</div>
4141
</file>

‎src/ng/filter/filter.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
{name:'Julie', phone:'555-8765'},
6565
{name:'Juliette', phone:'555-5678'}]"></div>
6666
67-
Search: <input ng-model="searchText">
67+
<label>Search: <input ng-model="searchText"></label>
6868
<table id="searchTextResults">
6969
<tr><th>Name</th><th>Phone</th></tr>
7070
<tr ng-repeat="friend in friends | filter:searchText">
@@ -73,10 +73,10 @@
7373
</tr>
7474
</table>
7575
<hr>
76-
Any: <input ng-model="search.$"> <br>
77-
Name only <input ng-model="search.name"><br>
78-
Phone only <input ng-model="search.phone"><br>
79-
Equality <input type="checkbox" ng-model="strict"><br>
76+
<label>Any: <input ng-model="search.$"></label> <br>
77+
<label>Name only <input ng-model="search.name"></label><br>
78+
<label>Phone only <input ng-model="search.phone"></label><br>
79+
<label>Equality <input type="checkbox" ng-model="strict"></label><br>
8080
<table id="searchObjResults">
8181
<tr><th>Name</th><th>Phone</th></tr>
8282
<tr ng-repeat="friendObj in friends | filter:search:strict">

‎src/ng/filter/filters.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
}]);
2626
</script>
2727
<div ng-controller="ExampleController">
28-
<input type="number" ng-model="amount"> <br>
28+
<input type="number" ng-model="amount" aria-label="amount"> <br>
2929
default currency symbol ($): <span id="currency-default">{{amount | currency}}</span><br>
3030
custom currency identifier (USD$): <span id="currency-custom">{{amount | currency:"USD$"}}</span>
3131
no fractions (0): <span id="currency-no-fractions">{{amount | currency:"USD$":0}}</span>
@@ -100,7 +100,7 @@ function currencyFilter($locale) {
100100
}]);
101101
</script>
102102
<div ng-controller="ExampleController">
103-
Enter number: <input ng-model='val'><br>
103+
<label>Enter number: <input ng-model='val'></label><br>
104104
Default formatting: <span id='number-default'>{{val | number}}</span><br>
105105
No fractions: <span>{{val | number:0}}</span><br>
106106
Negative number: <span>{{-val | number:4}}</span>

‎src/ng/filter/limitTo.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,11 @@
3737
}]);
3838
</script>
3939
<div ng-controller="ExampleController">
40-
Limit {{numbers}} to: <input type="number" step="1" ng-model="numLimit">
40+
<label>Limit {{numbers}} to: <input type="number" step="1" ng-model="numLimit"></label>
4141
<p>Output numbers: {{ numbers | limitTo:numLimit }}</p>
42-
Limit {{letters}} to: <input type="number" step="1" ng-model="letterLimit">
42+
<label>Limit {{letters}} to: <input type="number" step="1" ng-model="letterLimit"></label>
4343
<p>Output letters: {{ letters | limitTo:letterLimit }}</p>
44-
Limit {{longNumber}} to: <input type="number" step="1" ng-model="longNumberLimit">
44+
<label>Limit {{longNumber}} to: <input type="number" step="1" ng-model="longNumberLimit"></label>
4545
<p>Output long number: {{ longNumber | limitTo:longNumberLimit }}</p>
4646
</div>
4747
</file>

‎src/ng/http.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -671,11 +671,11 @@ function $HttpProvider() {
671671
<example module="httpExample">
672672
<file name="index.html">
673673
<div ng-controller="FetchController">
674-
<select ng-model="method">
674+
<select ng-model="method" aria-label="HTTP method">
675675
<option>GET</option>
676676
<option>JSONP</option>
677677
</select>
678-
<input type="text" ng-model="url" size="80"/>
678+
<input type="text" ng-model="url" size="80" aria-label="URL" />
679679
<button id="fetchbtn" ng-click="fetch()">fetch</button><br>
680680
<button id="samplegetbtn" ng-click="updateModel('GET', 'http-hello.html')">Sample GET</button>
681681
<button id="samplejsonpbtn"

‎src/ng/interval.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ function $IntervalProvider() {
117117
*
118118
* <div>
119119
* <div ng-controller="ExampleController">
120-
* Date format: <input ng-model="format"> <hr/>
120+
* <label>Date format: <input ng-model="format"></label> <hr/>
121121
* Current time is: <span my-current-time="format"></span>
122122
* <hr/>
123123
* Blood 1 : <font color='red'>{{blood_1}}</font>

‎src/ng/log.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
<file name="index.html">
2727
<div ng-controller="LogController">
2828
<p>Reload this page with open console, enter text and hit the log button...</p>
29-
Message:
30-
<input type="text" ng-model="message"/>
29+
<label>Message:
30+
<input type="text" ng-model="message" /></label>
3131
<button ng-click="$log.log(message)">log</button>
3232
<button ng-click="$log.warn(message)">warn</button>
3333
<button ng-click="$log.info(message)">info</button>

0 commit comments

Comments
 (0)