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

Commit 27baeab

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

23 files changed

+203
-161
lines changed

‎src/ng/compile.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -602,8 +602,8 @@
602602
}]);
603603
</script>
604604
<div ng-controller="GreeterController">
605-
<input ng-model="name"> <br>
606-
<textarea ng-model="html"></textarea> <br>
605+
<input ng-model="name"> <br/>
606+
<textarea ng-model="html"></textarea> <br/>
607607
<div compile="html"></div>
608608
</div>
609609
</file>
@@ -640,7 +640,7 @@
640640
* * `cloneAttachFn` - If `cloneAttachFn` is provided, then the link function will clone the
641641
* `template` and call the `cloneAttachFn` function allowing the caller to attach the
642642
* cloned elements to the DOM document at the appropriate place. The `cloneAttachFn` is
643-
* called as: <br> `cloneAttachFn(clonedElement, scope)` where:
643+
* called as: <br/> `cloneAttachFn(clonedElement, scope)` where:
644644
*
645645
* * `clonedElement` - is a clone of the original `element` passed into the compiler.
646646
* * `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
@@ -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/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">
@@ -641,7 +642,7 @@ var inputType = {
641642
<form name="myForm" ng-controller="ExampleController">
642643
<label>Number:
643644
<input type="number" name="input" ng-model="example.value"
644-
min="0" max="99" required>
645+
min="0" max="99" required>
645646
</label>
646647
<div role="alert">
647648
<span class="error" ng-show="myForm.input.$error.required">
@@ -906,15 +907,15 @@ var inputType = {
906907
</script>
907908
<form name="myForm" ng-controller="ExampleController">
908909
<label>
909-
<input id="red" type="radio" ng-model="color.name" value="red">
910+
<input type="radio" ng-model="color.name" value="red">
910911
Red
911912
</label><br/>
912913
<label>
913-
<input id="green" type="radio" ng-model="color.name" ng-value="specialValue">
914+
<input type="radio" ng-model="color.name" ng-value="specialValue">
914915
Green
915916
</label><br/>
916917
<label>
917-
<input id="blue" type="radio" ng-model="color.name" value="blue">
918+
<input type="radio" ng-model="color.name" value="blue">
918919
Blue
919920
</label><br/>
920921
<tt>color = {{color.name | json}}</tt><br/>
@@ -969,7 +970,7 @@ var inputType = {
969970
</label><br/>
970971
<label>Value2:
971972
<input type="checkbox" ng-model="checkboxModel.value2"
972-
ng-true-value="'YES'" ng-false-value="'NO'">
973+
ng-true-value="'YES'" ng-false-value="'NO'">
973974
</label><br/>
974975
<tt>value1 = {{checkboxModel.value1}}</tt><br/>
975976
<tt>value2 = {{checkboxModel.value2}}</tt><br/>
@@ -1488,16 +1489,18 @@ function checkboxInputType(scope, element, attr, ctrl, $sniffer, $browser, $filt
14881489
</script>
14891490
<div ng-controller="ExampleController">
14901491
<form name="myForm">
1491-
<label>User name:
1492-
<input type="text" name="userName" ng-model="user.name" required>
1492+
<label>
1493+
User name:
1494+
<input type="text" name="userName" ng-model="user.name" required>
14931495
</label>
14941496
<div role="alert">
14951497
<span class="error" ng-show="myForm.userName.$error.required">
14961498
Required!</span>
14971499
</div>
1498-
<label>Last name:
1499-
<input type="text" name="lastName" ng-model="user.last"
1500-
ng-minlength="3" ng-maxlength="10">
1500+
<label>
1501+
Last name:
1502+
<input type="text" name="lastName" ng-model="user.last"
1503+
ng-minlength="3" ng-maxlength="10">
15011504
</label>
15021505
<div role="alert">
15031506
<span class="error" ng-show="myForm.lastName.$error.minlength">
@@ -1508,14 +1511,14 @@ function checkboxInputType(scope, element, attr, ctrl, $sniffer, $browser, $filt
15081511
</form>
15091512
<hr>
15101513
<tt>user = {{user}}</tt><br/>
1511-
<tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br>
1512-
<tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br>
1513-
<tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br>
1514-
<tt>myForm.lastName.$error = {{myForm.lastName.$error}}</tt><br>
1515-
<tt>myForm.$valid = {{myForm.$valid}}</tt><br>
1516-
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
1517-
<tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br>
1518-
<tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</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/>
15191522
</div>
15201523
</file>
15211524
<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: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -156,17 +156,30 @@ 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>
160+
<input type="checkbox" ng-model="deleted">
161+
deleted (apply "strike" class)
162+
</label><br/>
163+
<label>
164+
<input type="checkbox" ng-model="important">
165+
important (apply "bold" class)
166+
</label><br/>
167+
<label>
168+
<input type="checkbox" ng-model="error">
169+
error (apply "red" class)
170+
</label>
162171
<hr>
163172
<p ng-class="style">Using String Syntax</p>
164-
<input type="text" ng-model="style" placeholder="Type: bold strike red">
173+
<input type="text" ng-model="style"
174+
placeholder="Type: bold strike red" aria-label="Type: bold strike red">
165175
<hr>
166176
<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>
177+
<input ng-model="style1"
178+
placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red"><br/>
179+
<input ng-model="style2"
180+
placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 2"><br/>
181+
<input ng-model="style3"
182+
placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 3"><br/>
170183
</file>
171184
<file name="style.css">
172185
.strike {
@@ -219,7 +232,7 @@ function classDirective(name, selector) {
219232
<file name="index.html">
220233
<input id="setbtn" type="button" value="set" ng-click="myVar='my-class'">
221234
<input id="clearbtn" type="button" value="clear" ng-click="myVar=''">
222-
<br>
235+
<br/>
223236
<span class="base-class" ng-class="myVar">Sample Text</span>
224237
</file>
225238
<file name="style.css">

‎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)