iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: port accessibility app from stackblitz to aio (#32377) 

Fixes #32320

PR Close #32377
This commit is contained in:
Kapunahele Wong 2019-08-27 15:17:04 -04:00 committed by Matias Niemelä
parent 544eb89198
commit 25d90dabbe
12 changed files with 134 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
aio/content/examples/accessibility/e2e/src/app.e2e-spec.ts Normal file
View File

@ -0,0 +1,21 @@
'use strict'; // necessary for es6 output in node
import { browser, element, by } from 'protractor';
describe('Accessibility example e2e tests', () => {
beforeEach(() => {
browser.get('');
});
it('should display Accessibility Example', function () {
expect(element(by.css('h1')).getText()).toEqual('Accessibility Example');
});
it('should take a number and change progressbar width', function () {
element(by.css('input')).sendKeys('16');
expect(element(by.css('input')).getAttribute('value')).toEqual('016');
expect(element(by.css('app-example-progressbar div')).getCssValue('width')).toBe('48px');
});
});

0
aio/content/examples/accessibility/example-config.json Normal file
View File

0
aio/content/examples/accessibility/src/app/app.component.css Executable file
View File

13
aio/content/examples/accessibility/src/app/app.component.html Executable file
View File

@ -0,0 +1,13 @@
<h1>Accessibility Example</h1>
<!-- #docregion template -->
<label>
Enter an example progress value
<input type="number" min="0" max="100"
[value]="progress" (input)="progress = $event.target.value">
</label>
<!-- The user of the progressbar sets an aria-label to communicate what the progress means. -->
<app-example-progressbar [value]="progress" aria-label="Example of a progress bar">
</app-example-progressbar>
<!-- #enddocregion template -->

10
aio/content/examples/accessibility/src/app/app.component.ts Executable file
View File

@ -0,0 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
progress = 0;
}

12
aio/content/examples/accessibility/src/app/app.module.ts Executable file
View File

@ -0,0 +1,12 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ExampleProgressbarComponent } from './progress-bar.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent, ExampleProgressbarComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }

12
aio/content/examples/accessibility/src/app/progress-bar.component.css Executable file
View File

@ -0,0 +1,12 @@
:host {
display: block;
width: 300px;
height: 25px;
border: 1px solid black;
margin-top: 16px;
}
.bar {
background: blue;
height: 100%;
}

28
aio/content/examples/accessibility/src/app/progress-bar.component.ts Executable file
View File

@ -0,0 +1,28 @@
// #docregion progressbar-component
import { Component, Input } from '@angular/core';
/**
* Example progressbar component.
*/
@Component({
selector: 'app-example-progressbar',
template: `<div class="bar" [style.width.%]="value"></div>`,
styleUrls: ['./progress-bar.component.css'],
host: {
// Sets the role for this component to "progressbar"
role: 'progressbar',
// Sets the minimum and maximum values for the progressbar role.
'aria-valuemin': '0',
'aria-valuemax': '100',
// Binding that updates the current value of the progressbar.
'[attr.aria-valuenow]': 'value',
}
})
export class ExampleProgressbarComponent {
/** Current value of the progressbar. */
@Input() value = 0;
}
// #enddocregion progressbar-component

14
aio/content/examples/accessibility/src/index.html Normal file
View File

@ -0,0 +1,14 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Accessibility Example</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>

11
aio/content/examples/accessibility/src/main.ts Normal file
View File

@ -0,0 +1,11 @@
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

10
aio/content/examples/accessibility/stackblitz.json Normal file
View File

@ -0,0 +1,10 @@
{
"description": "Accessibility",
"files": [
"!**/*.d.ts",
"!**/*.js",
"!**/*.[1,2].*"
],
"file": "src/app/app.component.ts",
"tags": ["Accessibility"]
}

39
aio/content/guide/accessibility.md
View File

@ -84,48 +84,15 @@ The following example shows how to make a simple progress bar accessible by usin
* The component defines an accessibility-enabled element with both the standard HTML attribute `role`, and ARIA attributes. The ARIA attribute `aria-valuenow` is bound to the user's input. * The component defines an accessibility-enabled element with both the standard HTML attribute `role`, and ARIA attributes. The ARIA attribute `aria-valuenow` is bound to the user's input.
```ts <code-example path="accessibility/src/app/progress-bar.component.ts" header="src/app/progress-bar.component.ts" region="progressbar-component"></code-example>
import { Component, Input } from '@angular/core';
/**
* Example progressbar component.
*/
@Component({
selector: 'example-progressbar',
template: `<div class="bar" [style.width.%]="value"></div>`,
styleUrls: ['./progress-bar.css'],
host: {
// Sets the role for this component to "progressbar"
role: 'progressbar',
// Sets the minimum and maximum values for the progressbar role.
'aria-valuemin': '0',
'aria-valuemax': '100',
// Binding that updates the current value of the progressbar.
'[attr.aria-valuenow]': 'value',
}
})
export class ExampleProgressbar {
/** Current value of the progressbar. */
@Input() value: number = 0;
}
```
* In the template, the `aria-label` attribute ensures that the control is accessible to screen readers. * In the template, the `aria-label` attribute ensures that the control is accessible to screen readers.
```html <code-example path="accessibility/src/app/app.component.html" header="src/app/app.component.html" region="template"></code-example>
<label>
Enter an example progress value
<input type="number" min="0" max="100"
[value]="progress" (input)="progress = $event.target.value">
</label>
<!-- The user of the progressbar sets an aria-label to communicate what the progress means. -->
<example-progressbar [value]="progress" aria-label="Example of a progress bar">
</example-progressbar>
```
[See the full example in StackBlitz](https://stackblitz.com/edit/angular-kn5jdi?file=src%2Fapp%2Fapp.component.html). To see the progress bar in a working example app, refer to the <live-example></live-example>.
## Routing and focus management ## Routing and focus management