From 25d90dabbe9b60478ca381ffd0bfcc4563ce7204 Mon Sep 17 00:00:00 2001
From: Kapunahele Wong <kapunahelewong@gmail.com>
Date: Tue, 27 Aug 2019 15:17:04 -0400
Subject: [PATCH] docs: port accessibility app from stackblitz to aio (#32377)

Fixes #32320

PR Close #32377
---
 .../accessibility/e2e/src/app.e2e-spec.ts     | 21 ++++++++++
 .../accessibility/example-config.json         |  0
 .../accessibility/src/app/app.component.css   |  0
 .../accessibility/src/app/app.component.html  | 13 +++++++
 .../accessibility/src/app/app.component.ts    | 10 +++++
 .../accessibility/src/app/app.module.ts       | 12 ++++++
 .../src/app/progress-bar.component.css        | 12 ++++++
 .../src/app/progress-bar.component.ts         | 28 +++++++++++++
 .../examples/accessibility/src/index.html     | 14 +++++++
 .../examples/accessibility/src/main.ts        | 11 ++++++
 .../examples/accessibility/stackblitz.json    | 10 +++++
 aio/content/guide/accessibility.md            | 39 ++-----------------
 12 files changed, 134 insertions(+), 36 deletions(-)
 create mode 100644 aio/content/examples/accessibility/e2e/src/app.e2e-spec.ts
 create mode 100644 aio/content/examples/accessibility/example-config.json
 create mode 100755 aio/content/examples/accessibility/src/app/app.component.css
 create mode 100755 aio/content/examples/accessibility/src/app/app.component.html
 create mode 100755 aio/content/examples/accessibility/src/app/app.component.ts
 create mode 100755 aio/content/examples/accessibility/src/app/app.module.ts
 create mode 100755 aio/content/examples/accessibility/src/app/progress-bar.component.css
 create mode 100755 aio/content/examples/accessibility/src/app/progress-bar.component.ts
 create mode 100644 aio/content/examples/accessibility/src/index.html
 create mode 100644 aio/content/examples/accessibility/src/main.ts
 create mode 100644 aio/content/examples/accessibility/stackblitz.json

diff --git a/aio/content/examples/accessibility/e2e/src/app.e2e-spec.ts b/aio/content/examples/accessibility/e2e/src/app.e2e-spec.ts
new file mode 100644
index 0000000000..1df4834f8c
--- /dev/null
+++ b/aio/content/examples/accessibility/e2e/src/app.e2e-spec.ts
@@ -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');
+  });
+
+});
diff --git a/aio/content/examples/accessibility/example-config.json b/aio/content/examples/accessibility/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/aio/content/examples/accessibility/src/app/app.component.css b/aio/content/examples/accessibility/src/app/app.component.css
new file mode 100755
index 0000000000..e69de29bb2
diff --git a/aio/content/examples/accessibility/src/app/app.component.html b/aio/content/examples/accessibility/src/app/app.component.html
new file mode 100755
index 0000000000..4869298570
--- /dev/null
+++ b/aio/content/examples/accessibility/src/app/app.component.html
@@ -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 -->
+
diff --git a/aio/content/examples/accessibility/src/app/app.component.ts b/aio/content/examples/accessibility/src/app/app.component.ts
new file mode 100755
index 0000000000..dd635acc9c
--- /dev/null
+++ b/aio/content/examples/accessibility/src/app/app.component.ts
@@ -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;
+}
diff --git a/aio/content/examples/accessibility/src/app/app.module.ts b/aio/content/examples/accessibility/src/app/app.module.ts
new file mode 100755
index 0000000000..bce527d559
--- /dev/null
+++ b/aio/content/examples/accessibility/src/app/app.module.ts
@@ -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 { }
diff --git a/aio/content/examples/accessibility/src/app/progress-bar.component.css b/aio/content/examples/accessibility/src/app/progress-bar.component.css
new file mode 100755
index 0000000000..976ef61655
--- /dev/null
+++ b/aio/content/examples/accessibility/src/app/progress-bar.component.css
@@ -0,0 +1,12 @@
+    :host { 
+      display: block; 
+      width: 300px; 
+      height: 25px; 
+      border: 1px solid black; 
+      margin-top: 16px;
+    }
+    
+    .bar { 
+      background: blue; 
+      height: 100%; 
+    }
\ No newline at end of file
diff --git a/aio/content/examples/accessibility/src/app/progress-bar.component.ts b/aio/content/examples/accessibility/src/app/progress-bar.component.ts
new file mode 100755
index 0000000000..fe1f5d8c73
--- /dev/null
+++ b/aio/content/examples/accessibility/src/app/progress-bar.component.ts
@@ -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
diff --git a/aio/content/examples/accessibility/src/index.html b/aio/content/examples/accessibility/src/index.html
new file mode 100644
index 0000000000..8c4042ea2d
--- /dev/null
+++ b/aio/content/examples/accessibility/src/index.html
@@ -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>
diff --git a/aio/content/examples/accessibility/src/main.ts b/aio/content/examples/accessibility/src/main.ts
new file mode 100644
index 0000000000..a9ca1caf8c
--- /dev/null
+++ b/aio/content/examples/accessibility/src/main.ts
@@ -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);
diff --git a/aio/content/examples/accessibility/stackblitz.json b/aio/content/examples/accessibility/stackblitz.json
new file mode 100644
index 0000000000..f3ee46960b
--- /dev/null
+++ b/aio/content/examples/accessibility/stackblitz.json
@@ -0,0 +1,10 @@
+{
+  "description": "Accessibility",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1,2].*"
+  ],
+  "file": "src/app/app.component.ts",
+  "tags": ["Accessibility"]
+}
diff --git a/aio/content/guide/accessibility.md b/aio/content/guide/accessibility.md
index 4fa3a927cd..5cc3c52252 100644
--- a/aio/content/guide/accessibility.md
+++ b/aio/content/guide/accessibility.md
@@ -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.
 
-   ```ts
-  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',
+   <code-example path="accessibility/src/app/progress-bar.component.ts" header="src/app/progress-bar.component.ts" region="progressbar-component"></code-example>
 
-      // 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.
 
-   ```html
-   <label>
-      Enter an example progress value
-      <input type="number" min="0" max="100"
-         [value]="progress" (input)="progress = $event.target.value">
-   </label>
+   <code-example path="accessibility/src/app/app.component.html" header="src/app/app.component.html" region="template"></code-example>
 
-   <!-- 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