8000 docs(guide/Accessibility): fix markdown errors, tweak layout · coderofsalvation/angular.js@d449ec8 · GitHub
[go: up one dir, main page]
Skip to content

Commit d449ec8

Browse files
NarretzNarretz
committed
docs(guide/Accessibility): fix markdown errors, tweak layout
1 parent ae0a716 commit d449ec8

File tree

1 file changed

+69
-69
lines changed

1 file changed

+69
-69
lines changed

‎docs/content/guide/accessibility.ngdoc‎

Lines changed: 69 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ The goal of ngAria is to improve Angular's default accessibility by enabling com
1010
[ARIA](http://www.w3.org/TR/wai-aria/) attributes that convey state or semantic information for
1111
assistive technologies used by persons with disabilities.
1212

13-
##Including ngAria
13+
## Including ngAria
1414

1515
Using {@link ngAria ngAria} is as simple as requiring the ngAria module in your application. ngAria hooks into
1616
standard AngularJS directives and quietly injects accessibility support into your application
@@ -20,7 +20,7 @@ at runtime.
2020
angular.module('myApp', ['ngAria'])...
2121
```
2222

23-
###Using ngAria
23+
### Using ngAria
2424
Most of what ngAria does is only visible "under the hood". To see the module in action, once you've
2525
added it as a dependency, you can test a few things:
2626
* Using your favorite element inspector, look for attributes added by ngAria in your own code.
@@ -60,11 +60,60 @@ attributes (if they have not been explicitly specified by the developer):
6060
* aria-required
6161
* aria-readonly
6262

63-
###Example
63+
### Example
6464

6565
<example module="ngAria_ngModelExample" deps="angular-aria.js">
66-
<file name="index.html">
67-
<style>
66+
<file name="index.html">
67+
<form ng-controller="formsController">
68+
<some-checkbox role="checkbox" ng-model="checked" ng-class="{active: checked}"
69+
ng-disabled="isDisabled" ng-click="toggleCheckbox()"
70+
aria-label="Custom Checkbox" show-attrs>
71+
<span class="icon" aria-hidden="true"></span>
72+
Custom Checkbox
73+
</some-checkbox>
74+
</form>
75+
</file>
76+
<file name="script.js">
77+
var app = angular.module('ngAria_ngModelExample', ['ngAria'])
78+
.controller('formsController', function($scope){
79+
$scope.checked = false;
80+
$scope.toggleCheckbox = function(){
81+
$scope.checked = !$scope.checked;
82+
}
83+
})
84+
.directive('someCheckbox', function(){
85+
return {
86+
restrict: 'E',
87+
link: function($scope, $el, $attrs) {
88+
$el.on('keypress', function(event){
89+
event.preventDefault();
90+
if(event.keyCode === 32 || event.keyCode === 13){
91+
$scope.toggleCheckbox();
92+
$scope.$apply();
93+
}
94+
});
95+
}
96+
}
97+
})
98+
.directive('showAttrs', function() {
99+
return function($scope, $el, $attrs) {
100+
var pre = document.createElement('pre');
101+
$el.after(pre);
102+
$scope.$watch(function() {
103+
var $attrs = {};
104+
Array.prototype.slice.call($el[0].attributes, 0).forEach(function(item) {
105+
if (item.name !== 'show-$attrs') {
106+
$attrs[item.name] = item.value;
107+
}
108+
});
109+
return $attrs;
110+
}, function(newAttrs, oldAttrs) {
111+
pre.textContent = JSON.stringify(newAttrs, null, 2);
112+
}, true);
113+
}
114+
});
115+
</file>
116+
<file name="style.css">
68117
[role=checkbox] {
69118
cursor: pointer;
70119
display: inline-block;
@@ -83,58 +132,7 @@ attributes (if they have not been explicitly specified by the developer):
83132
pre {
84133
white-space: pre-wrap;
85134
}
86-
</style>
87-
<div>
88-
<form ng-controller="formsController">
89-
<some-checkbox role="checkbox" ng-model="checked" ng-class="{active: checked}"
90-
ng-disabled="isDisabled" ng-click="toggleCheckbox()"
91-
aria-label="Custom Checkbox" show-attrs>
92-
<span class="icon" aria-hidden="true"></span>
93-
Custom Checkbox
94-
</some-checkbox>
95-
</form>
96-
</div>
97-
<script>
98-
var app = angular.module('ngAria_ngModelExample', ['ngAria'])
99-
.controller('formsController', function($scope){
100-
$scope.checked = false;
101-
$scope.toggleCheckbox = function(){
102-
$scope.checked = !$scope.checked;
103-
}
104-
})
105-
.directive('someCheckbox', function(){
106-
return {
107-
restrict: 'E',
108-
link: function($scope, $el, $attrs) {
109-
$el.on('keypress', function(event){
110-
event.preventDefault();
111-
if(event.keyCode === 32 || event.keyCode === 13){
112-
$scope.toggleCheckbox();
113-
$scope.$apply();
114-
}
115-
});
116-
}
117-
}
118-
})
119-
.directive('showAttrs', function() {
120-
return function($scope, $el, $attrs) {
121-
var pre = document.createElement('pre');
122-
$el.after(pre);
123-
$scope.$watch(function() {
124-
var $attrs = {};
125-
Array.prototype.slice.call($el[0].attributes, 0).forEach(function(item) {
126-
if (item.name !== 'show-$attrs') {
127-
$attrs[item.name] = item.value;
128-
}
129-
});
130-
return $attrs;
131-
}, function(newAttrs, oldAttrs) {
132-
pre.textContent = JSON.stringify(newAttrs, null, 2);
133-
}, true);
134-
}
135-
});
136-
</script>
137-
</file>
135+
</file>
138136
</example>
139137

140138
ngAria will also add `tabIndex`, ensuring custom elements with these roles will be reachable from
@@ -149,7 +147,7 @@ To ease the transition between native inputs and custom controls, ngAria now sup
149147
The original directives were created for native inputs only, so ngAria extends
150148
support to custom elements by managing `aria-checked` for accessibility.
151149

152-
###Example
150+
### Example
153151

154152
```html
155153
<custom-checkbox ng-checked="val"></custom-checkbox>
@@ -171,7 +169,7 @@ using ngAria with {@link ng.ngDisabled ngDisabled} will also
171169
add `aria-disabled`. This tells assistive technologies when a non-native input is disabled, helping
172170
custom controls to be more accessible.
173171

174-
###Example
172+
### Example
175173

176174
```html
177175
<md-checkbox ng-disabled="disabled"></md-checkbox>
@@ -183,8 +181,10 @@ Becomes:
183181
<md-checkbox disabled aria-disabled="true"></md-checkbox>
184182
```
185183

186-
>You can check whether a control is legitimately disabled for a screen reader by visiting
184+
<div class="alert alert-info">
185+
You can check whether a control is legitimately disabled for a screen reader by visiting
187186
[chrome://accessibility](chrome://accessibility) and inspecting [the accessibility tree](http://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/).
187+
</div>
188188

189189
<h2 id="ngrequired">ngRequired</h2>
190190

@@ -193,7 +193,7 @@ The boolean `required` attribute is only valid for native form controls such as
193193
as required, using ngAria with {@link ng.ngRequired ngRequired} will also add
194194
`aria-required`. This tells accessibility APIs when a custom control is required.
195195

196-
###Example
196+
### Example
197197

198198
```html
199199
<md-checkbox ng-required="val"></md-checkbox>
@@ -212,7 +212,7 @@ The boolean `readonly` attribute is only valid for native form controls such as
212212
as required, using ngAria with {@link ng.ngReadonly ngReadonly} will also add
213213
`aria-readonly`. This tells accessibility APIs when a custom control is read-only.
214214

215-
###Example
215+
### Example
216216

217217
```html
218218
<md-checkbox ng-readonly="val"></md-checkbox>
@@ -226,7 +226,7 @@ Becomes:
226226

227227
<h2 id="ngshow">ngShow</h2>
228228

229-
>The {@link ng.ngShow ngShow} directive shows or hides the
229+
The {@link ng.ngShow ngShow} directive shows or hides the
230230
given HTML element based on the expression provided to the `ngShow` attribute. The element is
231231
shown or hidden by removing or adding the `.ng-hide` CSS class onto the element.
232232

@@ -243,7 +243,7 @@ screen reader users won't accidentally focus on "mystery elements". Managing tab
243243
child control can be complex and affect performance, so it’s best to just stick with the default
244244
`display: none` CSS. See the [fourth rule of ARIA use](http://www.w3.org/TR/aria-in-html/#fourth-rule-of-aria-use).
245245

246-
###Example
246+
### Example
247247
```css
248248
.ng-hide {
249249
display: block;
@@ -263,7 +263,7 @@ Becomes:
263263

264264
<h2 id="nghide">ngHide</h2>
265265

266-
>The {@link ng.ngHide ngHide} directive shows or hides the
266+
The {@link ng.ngHide ngHide} directive shows or hides the
267267
given HTML element based on the expression provided to the `ngHide` attribute. The element is
268268
shown or hidden by removing or adding the `.ng-hide` CSS class onto the element.
269269

@@ -304,11 +304,11 @@ Becomes:
304304

305305
<h2 id="ngmessages">ngMessages</h2>
306306

307-
The new ngMessages module makes it easy to display form validation or other messages with priority
307+
The ngMessages module makes it easy to display form validation or other messages with priority
308308
sequencing and animation. To expose these visual messages to screen readers,
309309
ngAria injects `aria-live="assertive"`, causing them to be read aloud any time a message is shown,
310310
regardless of the user's focus location.
311-
###Example
311+
### Exam AA8D ple
312312

313313
```html
314314
<div ng-messages="myForm.myName.$error">
@@ -326,7 +326,7 @@ Becomes:
326326
</div>
327327
```
328328

329-
##Disabling attributes
329+
## Disabling attributes
330330
The attribute magic of ngAria may not work for every scenario. To disable individual attributes,
331331
you can use the {@link ngAria.$ariaProvider#config config} method. Just keep in mind this will
332332
tell ngAria to ignore the attribute globally.
@@ -364,7 +364,7 @@ tell ngAria to ignore the attribute globally.
364364
</file>
365365
</example>
366366

367-
##Common Accessibility Patterns
367+
## Common Accessibility Patterns
368368

369369
Accessibility best practices that apply to web apps in general also apply to Angular.
370370

0 commit comments

Comments
 (0)
0