From 4c0cecc0c40a56b9d44be6dc6b1bc30edeb22990 Mon Sep 17 00:00:00 2001
From: AlmeroSteyn <almero.steyn@gmail.com>
Date: Fri, 8 Jul 2016 14:43:52 +0200
Subject: [PATCH] style-guide(add-a11y): Add accessibility quick wins

---
 public/docs/_examples/style-guide/e2e-spec.ts | 110 ++++++
 .../style-guide/ts/11-01/app/app.component.ts |   8 +
 .../style-guide/ts/11-01/app/index.avoid.html |  14 +
 .../style-guide/ts/11-01/app/index.html       |  12 +
 .../style-guide/ts/11-01/app/index.ts         |   1 +
 .../ts/11-02/app/app.component.avoid.css      |  13 +
 .../ts/11-02/app/app.component.html           |   7 +
 .../style-guide/ts/11-02/app/app.component.ts |  11 +
 .../style-guide/ts/11-02/app/index.ts         |   1 +
 .../ts/11-03/app/app.component.avoid.html     |   5 +
 .../ts/11-03/app/app.component.css            |  11 +
 .../ts/11-03/app/app.component.html           |   3 +
 .../style-guide/ts/11-03/app/app.component.ts |  15 +
 .../style-guide/ts/11-03/app/index.ts         |   1 +
 .../ts/11-05/app/app.component.avoid.html     |  11 +
 .../ts/11-05/app/app.component.css            |   4 +
 .../ts/11-05/app/app.component.html           |   8 +
 .../style-guide/ts/11-05/app/app.component.ts |  17 +
 .../style-guide/ts/11-05/app/index.ts         |   1 +
 .../ts/11-06/app/app.component.avoid.html     |  24 ++
 .../ts/11-06/app/app.component.css            |   3 +
 .../ts/11-06/app/app.component.html           |  43 +++
 .../style-guide/ts/11-06/app/app.component.ts |  26 ++
 .../style-guide/ts/11-06/app/heroes/index.ts  |   1 +
 .../ts/11-06/app/heroes/shared/hero.model.ts  |   5 +
 .../ts/11-06/app/heroes/shared/index.ts       |   1 +
 .../style-guide/ts/11-06/app/index.ts         |   2 +
 .../ts/11-07/app/app.component.avoid.html     |   9 +
 .../ts/11-07/app/app.component.html           |   7 +
 .../style-guide/ts/11-07/app/app.component.ts |  18 +
 .../style-guide/ts/11-07/app/index.ts         |   1 +
 .../ts/11-08/app/app.component.avoid.html     |  16 +
 .../ts/11-08/app/app.component.html           |  16 +
 .../style-guide/ts/11-08/app/app.component.ts |  27 ++
 .../style-guide/ts/11-08/app/heroes/index.ts  |   1 +
 .../ts/11-08/app/heroes/shared/hero.model.ts  |   5 +
 .../11-08/app/heroes/shared/hero.service.ts   |  17 +
 .../ts/11-08/app/heroes/shared/index.ts       |   2 +
 .../style-guide/ts/11-08/app/index.ts         |   2 +
 .../style-guide/ts/11-09/app/angular.png      | Bin 0 -> 4509 bytes
 .../ts/11-09/app/app.component.avoid.html     |   5 +
 .../ts/11-09/app/app.component.html           |   3 +
 .../style-guide/ts/11-09/app/app.component.ts |   9 +
 .../style-guide/ts/11-09/app/index.ts         |   1 +
 .../ts/11-11/app/app.component.avoid.html     |   5 +
 .../ts/11-11/app/app.component.css            |   5 +
 .../ts/11-11/app/app.component.html           |   3 +
 .../style-guide/ts/11-11/app/app.component.ts |  11 +
 .../style-guide/ts/11-11/app/index.ts         |   1 +
 .../style-guide/ts/app/app.routes.ts          |  18 +
 .../style-guide/ts/systemjs.custom.js         |  11 +-
 public/docs/ts/latest/guide/style-guide.jade  | 328 ++++++++++++++++++
 52 files changed, 878 insertions(+), 1 deletion(-)
 create mode 100644 public/docs/_examples/style-guide/ts/11-01/app/app.component.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-01/app/index.avoid.html
 create mode 100644 public/docs/_examples/style-guide/ts/11-01/app/index.html
 create mode 100644 public/docs/_examples/style-guide/ts/11-01/app/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-02/app/app.component.avoid.css
 create mode 100644 public/docs/_examples/style-guide/ts/11-02/app/app.component.html
 create mode 100644 public/docs/_examples/style-guide/ts/11-02/app/app.component.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-02/app/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-03/app/app.component.avoid.html
 create mode 100644 public/docs/_examples/style-guide/ts/11-03/app/app.component.css
 create mode 100644 public/docs/_examples/style-guide/ts/11-03/app/app.component.html
 create mode 100644 public/docs/_examples/style-guide/ts/11-03/app/app.component.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-03/app/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-05/app/app.component.avoid.html
 create mode 100644 public/docs/_examples/style-guide/ts/11-05/app/app.component.css
 create mode 100644 public/docs/_examples/style-guide/ts/11-05/app/app.component.html
 create mode 100644 public/docs/_examples/style-guide/ts/11-05/app/app.component.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-05/app/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-06/app/app.component.avoid.html
 create mode 100644 public/docs/_examples/style-guide/ts/11-06/app/app.component.css
 create mode 100644 public/docs/_examples/style-guide/ts/11-06/app/app.component.html
 create mode 100644 public/docs/_examples/style-guide/ts/11-06/app/app.component.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-06/app/heroes/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-06/app/heroes/shared/hero.model.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-06/app/heroes/shared/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-06/app/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-07/app/app.component.avoid.html
 create mode 100644 public/docs/_examples/style-guide/ts/11-07/app/app.component.html
 create mode 100644 public/docs/_examples/style-guide/ts/11-07/app/app.component.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-07/app/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-08/app/app.component.avoid.html
 create mode 100644 public/docs/_examples/style-guide/ts/11-08/app/app.component.html
 create mode 100644 public/docs/_examples/style-guide/ts/11-08/app/app.component.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-08/app/heroes/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-08/app/heroes/shared/hero.model.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-08/app/heroes/shared/hero.service.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-08/app/heroes/shared/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-08/app/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-09/app/angular.png
 create mode 100644 public/docs/_examples/style-guide/ts/11-09/app/app.component.avoid.html
 create mode 100644 public/docs/_examples/style-guide/ts/11-09/app/app.component.html
 create mode 100644 public/docs/_examples/style-guide/ts/11-09/app/app.component.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-09/app/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-11/app/app.component.avoid.html
 create mode 100644 public/docs/_examples/style-guide/ts/11-11/app/app.component.css
 create mode 100644 public/docs/_examples/style-guide/ts/11-11/app/app.component.html
 create mode 100644 public/docs/_examples/style-guide/ts/11-11/app/app.component.ts
 create mode 100644 public/docs/_examples/style-guide/ts/11-11/app/index.ts

diff --git a/public/docs/_examples/style-guide/e2e-spec.ts b/public/docs/_examples/style-guide/e2e-spec.ts
index c0fedf822e..f760d62270 100644
--- a/public/docs/_examples/style-guide/e2e-spec.ts
+++ b/public/docs/_examples/style-guide/e2e-spec.ts
@@ -206,4 +206,114 @@ describe('Style Guide', function () {
     let button = element(by.tagName('sg-app > toh-hero-button > button'));
     expect(button.getText()).toBe('OK');
   });
+
+  it('11-01', function () {
+    browser.get('#/11-01');
+
+    let div = element(by.tagName('sg-app div'));
+    expect(div.getText()).toBe('I am a page set to US English');
+  });
+
+  it('11-02', function () {
+    browser.get('#/11-02');
+
+    let labels = element.all(by.tagName('sg-app label'));
+    expect(labels.get(0).getText()).toBe('Name:');
+    expect(labels.get(1).getText()).toBe('Surname:');
+    let inputs = element.all(by.tagName('sg-app label input'));
+    expect(inputs.get(0).isPresent()).toBe(true);
+    expect(inputs.get(1).isPresent()).toBe(true);
+  });
+
+  it('11-03', function () {
+    browser.get('#/11-03');
+
+    let button = element(by.tagName('sg-app button'));
+    expect(button.getText()).toBe('Press me');
+  });
+
+  it('11-05', function () {
+    browser.get('#/11-05');
+
+    let dts = element.all(by.tagName('sg-app dt'));
+    expect(dts.get(0).getText()).toBe('Name:');
+    expect(dts.get(1).getText()).toBe('Power:');
+    let dds = element.all(by.tagName('sg-app dd'));
+    expect(dds.get(0).getText()).toBe('Windstorm');
+    expect(dds.get(1).getText()).toBe('Air');
+  });
+
+  it('11-06', function () {
+    browser.get('#/11-06');
+
+    let labels = element.all(by.tagName('sg-app label'));
+    expect(labels.get(0).getText()).toBe('Name:');
+    expect(labels.get(1).getText()).toBe('Air');
+    expect(labels.get(2).getText()).toBe('Fire');
+    expect(labels.get(3).getText()).toBe('Name:');
+    expect(labels.get(4).getText()).toBe('Air');
+    expect(labels.get(5).getText()).toBe('Fire');
+    let legends = element.all(by.tagName('fieldset legend'));
+    expect(legends.get(0).getText()).toBe('Power options');
+    expect(legends.get(1).getText()).toBe('Power options');
+    let inputs = element.all(by.css('sg-app input:not([type="radio"])'));
+    expect(inputs.get(0).isPresent()).toBe(true);
+    expect(inputs.get(1).isPresent()).toBe(true);
+    let radios = element.all(by.css('sg-app input[type="radio"]'));
+    expect(radios.get(0).isPresent()).toBe(true);
+    expect(radios.get(1).isPresent()).toBe(true);
+    expect(radios.get(2).isPresent()).toBe(true);
+    expect(radios.get(3).isPresent()).toBe(true);
+  });
+
+  it('11-07', function () {
+    browser.get('#/11-07');
+
+    let button = element(by.tagName('sg-app button'));
+    expect(button.getText()).toBe('Alert User');
+    let anchor = element(by.tagName('sg-app a'));
+    expect(anchor.getText()).toBe('Go to Angular!');
+  });
+
+  it('11-08', function () {
+    browser.get('#/11-08');
+
+    let ths = element.all(by.tagName('sg-app th'));
+    expect(ths.get(0).getText()).toBe('Hero Id');
+    expect(ths.get(1).getText()).toBe('Hero Name');
+    expect(ths.get(2).getText()).toBe('Delete Hero');
+    let trs = element.all(by.tagName('sg-app tr'));
+    let row1Tds = trs.get(0).all(by.tagName('td'));
+    expect(row1Tds.get(0).getText()).toBe('1');
+    expect(row1Tds.get(1).getText()).toBe('Windstorm');
+    let row2Tds = trs.get(1).all(by.tagName('td'));
+    expect(row2Tds.get(0).getText()).toBe('2');
+    expect(row2Tds.get(1).getText()).toBe('Bombasto');
+    let row3Tds = trs.get(2).all(by.tagName('td'));
+    expect(row3Tds.get(0).getText()).toBe('3');
+    expect(row3Tds.get(1).getText()).toBe('Magneta');
+    let row4Tds = trs.get(3).all(by.tagName('td'));
+    expect(row4Tds.get(0).getText()).toBe('4');
+    expect(row4Tds.get(1).getText()).toBe('Tornado');
+    let buttons = element.all(by.tagName('sg-app td button'));
+    expect(buttons.get(0).getText()).toBe('Delete Windstorm');
+    expect(buttons.get(1).getText()).toBe('Delete Bombasto');
+    expect(buttons.get(2).getText()).toBe('Delete Magneta');
+    expect(buttons.get(3).getText()).toBe('Delete Tornado');
+  });
+
+  it('11-09', function () {
+    browser.get('#/11-09');
+
+    let image = element(by.tagName('sg-app img'));
+    expect(image.getAttribute('alt')).toBe('Angular 2 logo');
+  });
+
+  it('11-11', function () {
+    browser.get('#/11-11');
+
+    let span = element(by.css('sg-app span.green-background'));
+    expect(span.getText()).toBe('Current status is OK!');
+  });
+
 });
diff --git a/public/docs/_examples/style-guide/ts/11-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/11-01/app/app.component.ts
new file mode 100644
index 0000000000..3aea82a610
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-01/app/app.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sg-app',
+  template: `<div>I am a page set to US English</div>`
+})
+export class AppComponent {
+}
diff --git a/public/docs/_examples/style-guide/ts/11-01/app/index.avoid.html b/public/docs/_examples/style-guide/ts/11-01/app/index.avoid.html
new file mode 100644
index 0000000000..fb5755307d
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-01/app/index.avoid.html
@@ -0,0 +1,14 @@
+<!-- avoid -->
+
+<!DOCTYPE html>
+<!-- #docregion page-lang-->
+<html>
+<!-- #enddocregion page-lang-->
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<!--Some content-->
+</body>
+</html>
diff --git a/public/docs/_examples/style-guide/ts/11-01/app/index.html b/public/docs/_examples/style-guide/ts/11-01/app/index.html
new file mode 100644
index 0000000000..be3562da68
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-01/app/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<!-- #docregion page-lang-->
+<html lang="en-US">
+<!-- #enddocregion page-lang -->
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+</head>
+<body>
+<!--Some content-->
+</body>
+</html>
diff --git a/public/docs/_examples/style-guide/ts/11-01/app/index.ts b/public/docs/_examples/style-guide/ts/11-01/app/index.ts
new file mode 100644
index 0000000000..df2f2075c8
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-01/app/index.ts
@@ -0,0 +1 @@
+export * from './app.component';
diff --git a/public/docs/_examples/style-guide/ts/11-02/app/app.component.avoid.css b/public/docs/_examples/style-guide/ts/11-02/app/app.component.avoid.css
new file mode 100644
index 0000000000..44e200ba76
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-02/app/app.component.avoid.css
@@ -0,0 +1,13 @@
+/* #docregion */
+/* avoid */
+
+:focus {
+  outline: 0;
+}
+
+/* or */
+
+:focus {
+  outline: none;
+}
+/* #enddocregion */
diff --git a/public/docs/_examples/style-guide/ts/11-02/app/app.component.html b/public/docs/_examples/style-guide/ts/11-02/app/app.component.html
new file mode 100644
index 0000000000..b231b9aa5b
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-02/app/app.component.html
@@ -0,0 +1,7 @@
+<label>Name:
+  <input [(ngModel)]="name">
+</label>
+<label>Surname:
+  <input [(ngModel)]="surname">
+</label>
+{{name}}{{surname}}
diff --git a/public/docs/_examples/style-guide/ts/11-02/app/app.component.ts b/public/docs/_examples/style-guide/ts/11-02/app/app.component.ts
new file mode 100644
index 0000000000..9f97daf2e7
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-02/app/app.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html'
+})
+export class AppComponent {
+  name: string;
+  surname: string;
+}
diff --git a/public/docs/_examples/style-guide/ts/11-02/app/index.ts b/public/docs/_examples/style-guide/ts/11-02/app/index.ts
new file mode 100644
index 0000000000..df2f2075c8
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-02/app/index.ts
@@ -0,0 +1 @@
+export * from './app.component';
diff --git a/public/docs/_examples/style-guide/ts/11-03/app/app.component.avoid.html b/public/docs/_examples/style-guide/ts/11-03/app/app.component.avoid.html
new file mode 100644
index 0000000000..df41149bc2
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-03/app/app.component.avoid.html
@@ -0,0 +1,5 @@
+<!-- #docregion -->
+<!--avoid-->
+
+<div class="button" (click)="saveData()">Press me</div>
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-03/app/app.component.css b/public/docs/_examples/style-guide/ts/11-03/app/app.component.css
new file mode 100644
index 0000000000..afa3ac490e
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-03/app/app.component.css
@@ -0,0 +1,11 @@
+.button {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  margin-bottom: 5px;
+  width: 75px;
+  cursor: pointer;
+  cursor: hand;
+}
diff --git a/public/docs/_examples/style-guide/ts/11-03/app/app.component.html b/public/docs/_examples/style-guide/ts/11-03/app/app.component.html
new file mode 100644
index 0000000000..2fcbec9a8a
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-03/app/app.component.html
@@ -0,0 +1,3 @@
+<!-- #docregion-->
+<button (click)="saveData()">Press me</button>
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-03/app/app.component.ts b/public/docs/_examples/style-guide/ts/11-03/app/app.component.ts
new file mode 100644
index 0000000000..f4ab150a38
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-03/app/app.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css']
+})
+export class AppComponent {
+
+  saveData() {
+    alert('Button pressed.');
+  }
+
+}
diff --git a/public/docs/_examples/style-guide/ts/11-03/app/index.ts b/public/docs/_examples/style-guide/ts/11-03/app/index.ts
new file mode 100644
index 0000000000..df2f2075c8
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-03/app/index.ts
@@ -0,0 +1 @@
+export * from './app.component';
diff --git a/public/docs/_examples/style-guide/ts/11-05/app/app.component.avoid.html b/public/docs/_examples/style-guide/ts/11-05/app/app.component.avoid.html
new file mode 100644
index 0000000000..40092d1ea9
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-05/app/app.component.avoid.html
@@ -0,0 +1,11 @@
+<!-- #docregion -->
+<!--avoid-->
+
+<div><label>Name: </label>{{hero.name}}</div>
+<div><label>Power: </label>{{hero.power}}</div>
+
+<!--or-->
+
+<div><span>Name: </span>{{hero.name}}</div>
+<div><span>Power: </span>{{hero.power}}</div>
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-05/app/app.component.css b/public/docs/_examples/style-guide/ts/11-05/app/app.component.css
new file mode 100644
index 0000000000..b5b1eec59f
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-05/app/app.component.css
@@ -0,0 +1,4 @@
+dl dt {
+  float: left;
+  clear: left;
+}
diff --git a/public/docs/_examples/style-guide/ts/11-05/app/app.component.html b/public/docs/_examples/style-guide/ts/11-05/app/app.component.html
new file mode 100644
index 0000000000..2119ba9670
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-05/app/app.component.html
@@ -0,0 +1,8 @@
+<!-- #docregion-->
+<dl>
+  <dt>Name:</dt>
+  <dd>{{hero.name}}</dd>
+  <dt>Power:</dt>
+  <dd>{{hero.power}}</dd>
+</dl>
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-05/app/app.component.ts b/public/docs/_examples/style-guide/ts/11-05/app/app.component.ts
new file mode 100644
index 0000000000..dbe0e4218a
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-05/app/app.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css']
+})
+export class AppComponent {
+
+  hero: any;
+
+  constructor() {
+    this.hero = {name: 'Windstorm', power: 'Air'};
+  }
+
+}
diff --git a/public/docs/_examples/style-guide/ts/11-05/app/index.ts b/public/docs/_examples/style-guide/ts/11-05/app/index.ts
new file mode 100644
index 0000000000..df2f2075c8
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-05/app/index.ts
@@ -0,0 +1 @@
+export * from './app.component';
diff --git a/public/docs/_examples/style-guide/ts/11-06/app/app.component.avoid.html b/public/docs/_examples/style-guide/ts/11-06/app/app.component.avoid.html
new file mode 100644
index 0000000000..ab80320836
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-06/app/app.component.avoid.html
@@ -0,0 +1,24 @@
+<!-- #docregion -->
+<!--avoid-->
+
+<label>Name:</label>
+<input [(ngModel)]="hero.name">
+
+<!--and-->
+
+<span>Name:</span>
+<input [(ngModel)]="hero.name">
+
+<!--and-->
+
+<label >Power options</label>
+<input type="radio"
+       name="hero_power"
+       (click)="hero.power = 'Air'"
+       [checked]="hero.power === 'Air'">
+<input type="radio"
+       name="hero_power_2"
+       (click)="hero.power = 'Fire'"
+       [checked]="hero.power === 'Fire'">
+
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-06/app/app.component.css b/public/docs/_examples/style-guide/ts/11-06/app/app.component.css
new file mode 100644
index 0000000000..1ddc75914c
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-06/app/app.component.css
@@ -0,0 +1,3 @@
+fieldset {
+  margin-bottom: 5px;
+}
diff --git a/public/docs/_examples/style-guide/ts/11-06/app/app.component.html b/public/docs/_examples/style-guide/ts/11-06/app/app.component.html
new file mode 100644
index 0000000000..a556d73d00
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-06/app/app.component.html
@@ -0,0 +1,43 @@
+<!-- #docregion-->
+<label>Name:
+  <input [(ngModel)]="hero.name">
+</label>
+
+<fieldset>
+  <legend>Power options</legend>
+  <label>Air
+    <input type="radio"
+           name="hero_power"
+           (click)="assignPower('Air')"
+           [checked]="checkPower('Air')">
+  </label>
+  <label>Fire
+    <input type="radio"
+           name="hero_power"
+           (click)="assignPower('Fire')"
+           [checked]="checkPower('Fire')">
+  </label>
+</fieldset>
+
+<!--or-->
+
+<label for="hero_name_id">Name:</label>
+<input id="hero_name_id" [(ngModel)]="hero.name">
+
+<fieldset>
+  <legend>Power options</legend>
+  <label for="radio_air_id">Air</label>
+  <input type="radio"
+         id="radio_air_id"
+         name="hero_power_2"
+         (click)="assignPower('Air')"
+         [checked]="checkPower('Air')">
+  <label for="radio_fire_id">Fire</label>
+  <input type="radio"
+         id="radio_fire_id"
+         name="hero_power_2"
+         (click)="assignPower('Fire')"
+         [checked]="checkPower('Fire')">
+</fieldset>
+
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-06/app/app.component.ts b/public/docs/_examples/style-guide/ts/11-06/app/app.component.ts
new file mode 100644
index 0000000000..2af5e4ec08
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-06/app/app.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { Hero } from './heroes';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css']
+})
+export class AppComponent {
+
+  hero: Hero;
+
+  constructor() {
+    this.hero = new Hero();
+  }
+
+  assignPower(power: string) {
+    this.hero.power = power;
+  }
+
+  checkPower(power: string): boolean {
+    return this.hero.power === power;
+  }
+
+}
diff --git a/public/docs/_examples/style-guide/ts/11-06/app/heroes/index.ts b/public/docs/_examples/style-guide/ts/11-06/app/heroes/index.ts
new file mode 100644
index 0000000000..c3da79f741
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-06/app/heroes/index.ts
@@ -0,0 +1 @@
+export * from './shared';
diff --git a/public/docs/_examples/style-guide/ts/11-06/app/heroes/shared/hero.model.ts b/public/docs/_examples/style-guide/ts/11-06/app/heroes/shared/hero.model.ts
new file mode 100644
index 0000000000..d4aac7c559
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-06/app/heroes/shared/hero.model.ts
@@ -0,0 +1,5 @@
+export class Hero {
+  id: number;
+  name: string;
+  power: string;
+}
diff --git a/public/docs/_examples/style-guide/ts/11-06/app/heroes/shared/index.ts b/public/docs/_examples/style-guide/ts/11-06/app/heroes/shared/index.ts
new file mode 100644
index 0000000000..0dceb684c4
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-06/app/heroes/shared/index.ts
@@ -0,0 +1 @@
+export * from './hero.model';
diff --git a/public/docs/_examples/style-guide/ts/11-06/app/index.ts b/public/docs/_examples/style-guide/ts/11-06/app/index.ts
new file mode 100644
index 0000000000..fe8300f1dd
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-06/app/index.ts
@@ -0,0 +1,2 @@
+export * from './heroes';
+export * from './app.component';
diff --git a/public/docs/_examples/style-guide/ts/11-07/app/app.component.avoid.html b/public/docs/_examples/style-guide/ts/11-07/app/app.component.avoid.html
new file mode 100644
index 0000000000..774beb0de3
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-07/app/app.component.avoid.html
@@ -0,0 +1,9 @@
+<!-- #docregion -->
+<!--avoid-->
+
+<button (click)="gotoDestination()">Go to Angular!</button>
+
+<!--or-->
+
+<a (click)="alertUser()" href="#">Alert User</a>
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-07/app/app.component.html b/public/docs/_examples/style-guide/ts/11-07/app/app.component.html
new file mode 100644
index 0000000000..7b515d2f41
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-07/app/app.component.html
@@ -0,0 +1,7 @@
+<!-- #docregion-->
+<button (click)="alertUser()">Alert User</button>
+
+<!--and-->
+
+<a [attr.href]="destinationUrl">Go to Angular!</a>
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-07/app/app.component.ts b/public/docs/_examples/style-guide/ts/11-07/app/app.component.ts
new file mode 100644
index 0000000000..4f46aa5971
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-07/app/app.component.ts
@@ -0,0 +1,18 @@
+// #docregion
+
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html'
+})
+export class AppComponent {
+
+  destinationUrl: string = 'http://angular.io';
+
+  alertUser() {
+    alert('You have been alerted!');
+  }
+
+}
diff --git a/public/docs/_examples/style-guide/ts/11-07/app/index.ts b/public/docs/_examples/style-guide/ts/11-07/app/index.ts
new file mode 100644
index 0000000000..df2f2075c8
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-07/app/index.ts
@@ -0,0 +1 @@
+export * from './app.component';
diff --git a/public/docs/_examples/style-guide/ts/11-08/app/app.component.avoid.html b/public/docs/_examples/style-guide/ts/11-08/app/app.component.avoid.html
new file mode 100644
index 0000000000..b13d5898db
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-08/app/app.component.avoid.html
@@ -0,0 +1,16 @@
+<table>
+  <thead>
+  <th>Hero Id</th>
+  <th>Hero Name</th>
+  <th>Delete Hero</th>
+  </thead>
+  <!--#docregion-->
+  <tr *ngFor="let hero of heroes">
+    <td>{{hero.id}}</td>
+    <td>{{hero.name}}</td>
+    <td>
+      <button (click)="deleteHero(hero)">Delete</button>
+    </td>
+  </tr>
+  <!--#enddocregion-->
+</table>
diff --git a/public/docs/_examples/style-guide/ts/11-08/app/app.component.html b/public/docs/_examples/style-guide/ts/11-08/app/app.component.html
new file mode 100644
index 0000000000..411b4e458f
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-08/app/app.component.html
@@ -0,0 +1,16 @@
+<table>
+  <thead>
+  <th>Hero Id</th>
+  <th>Hero Name</th>
+  <th>Delete Hero</th>
+  </thead>
+  <!--#docregion-->
+  <tr *ngFor="let hero of heroes">
+    <td>{{hero.id}}</td>
+    <td>{{hero.name}}</td>
+    <td>
+      <button (click)="deleteHero(hero)">Delete {{hero.name}}</button>
+    </td>
+  </tr>
+  <!--#enddocregion-->
+</table>
diff --git a/public/docs/_examples/style-guide/ts/11-08/app/app.component.ts b/public/docs/_examples/style-guide/ts/11-08/app/app.component.ts
new file mode 100644
index 0000000000..dc4369c878
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-08/app/app.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Hero, HeroService } from './heroes';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  providers: [HeroService]
+})
+export class AppComponent implements OnInit {
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) {
+  }
+
+  deleteHero(hero: Hero) {
+    this.heroes = this.heroes.filter((element) => {
+      return element.id !== hero.id;
+    });
+  }
+
+  ngOnInit() {
+    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
+  }
+
+}
diff --git a/public/docs/_examples/style-guide/ts/11-08/app/heroes/index.ts b/public/docs/_examples/style-guide/ts/11-08/app/heroes/index.ts
new file mode 100644
index 0000000000..c3da79f741
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-08/app/heroes/index.ts
@@ -0,0 +1 @@
+export * from './shared';
diff --git a/public/docs/_examples/style-guide/ts/11-08/app/heroes/shared/hero.model.ts b/public/docs/_examples/style-guide/ts/11-08/app/heroes/shared/hero.model.ts
new file mode 100644
index 0000000000..8f7cc205c8
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-08/app/heroes/shared/hero.model.ts
@@ -0,0 +1,5 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/public/docs/_examples/style-guide/ts/11-08/app/heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/11-08/app/heroes/shared/hero.service.ts
new file mode 100644
index 0000000000..b5aba5d00c
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-08/app/heroes/shared/hero.service.ts
@@ -0,0 +1,17 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { Http, Response } from '@angular/http';
+
+import { Hero } from './hero.model';
+
+@Injectable()
+// #docregion example
+export class HeroService {
+  constructor(private http: Http) { }
+
+  getHeroes() {
+    return this.http.get('api/heroes')
+      .map((response: Response) => <Hero[]>response.json().data);
+  }
+}
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/11-08/app/heroes/shared/index.ts b/public/docs/_examples/style-guide/ts/11-08/app/heroes/shared/index.ts
new file mode 100644
index 0000000000..dbb150d3f8
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-08/app/heroes/shared/index.ts
@@ -0,0 +1,2 @@
+export * from './hero.model';
+export * from './hero.service';
diff --git a/public/docs/_examples/style-guide/ts/11-08/app/index.ts b/public/docs/_examples/style-guide/ts/11-08/app/index.ts
new file mode 100644
index 0000000000..fe8300f1dd
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-08/app/index.ts
@@ -0,0 +1,2 @@
+export * from './heroes';
+export * from './app.component';
diff --git a/public/docs/_examples/style-guide/ts/11-09/app/angular.png b/public/docs/_examples/style-guide/ts/11-09/app/angular.png
new file mode 100644
index 0000000000000000000000000000000000000000..a1d9790bc342c674c37a5f4183b5700c22568488
GIT binary patch
literal 4509
zcma)Ac{r5a`<Id}jCW*7GiJz^&@1~sW`qc#MYfcE-(_UqW)x|8Um@F+wK5blcB#lZ
zs2Ix_Vlb7Ru^Zn<{r-Ia_+8hTd9HKMeeV17`J8j#&$$L`X>P>Bb&89Hg@wn&7-a=K
zcMd-s$ANFm{7oI;ArfMEBgER@EhOAI$dv`*;(yx}X5#DY?rP=g>=F^!>8j1b!mnq7
zLfG6LozK1OV?QX8-1q5<L5}9%zDEX)-Co*soo)L^|0gTa4U3cdp;~t8g~EG>$+vRc
z%=$Qp9(O_c=qSfq-vEKCa;3s^8D3@J5>c*yr5tZuMs*MKp6&m%xc^+lU7IjR&Dth4
z&CNxek=r}-WQ7s2m%B?PZ}JMWaO54~J;H)J`kw=)$?~7$|KZL;Bk67Esqc^z^n_=O
zKN(_?AYJaGFT^*pXwxpMR~$7fr4H);z4zQy*RB29?5op~D0aOW1+`CttwgisWcnKn
z{epP3cvRYp6#68Af|L(>xU{hw25S1}(*5<&^s~4Gt@wPOk?fMk;%K?vH~SjtN;qU-
zP`*cp&bQwD1%q`dM)LX+TnCpBRYy$pYHBv;!x616B;LjF{tU_#y=}peAmZo?Us~Ka
zRzMK+<H%A&KZZ9o6>#!>ln3G)C`_0H%g>DuRh|LjuWframt%N~TP%B>2Xa7DaP+sJ
zSBYLw3^iKU0+T{-?RHS@D$I7r5lw$jJA74a)^4m{17eSR*S$&cio;O5+PAg8NYr=7
z&q2%CWYAy(ZB+QBMYmGb@AZ^CELCB@8vY5n{``*y-MZ1dfbmi<h1pr}3AhqNspC(_
zb{pQ^J%^SX6#Su)Z?xV_3)8f@Z~r?@lXq(q=O8HR^I8PpJ#p1f5vhW*_$PW4G}R`L
zmaxfDVjHx)f4i^0V4JK)?&+NweAY~<X@40bKLo-H6jHRP=l>R5j9xT(SMNW5u6f<<
z^~CgxMt(P0*180qL3H8X2)mp7c6p5QD#x4;f70EeST_GIomO;n?_}2WY@S|Y?Mh$1
znXY$5ZthG01wooi;90p8*QqlaMAi8;I^Nasf$iO9-1oE?rdMF+-U9v3>8A_d>_~I3
zFpEPG;UR@LiT9?Z`LdSwXEyDaWB=S~QSKHa1qOtbxUq7sT!MB(LQ99_KVoU&l5dIP
zkMGZCaN?1TkBx%B<%|yMYNg2b`iJxbe}$3em@J>^Lb*n6U=fFT>5%m1-iqOct^3nj
z%$8s7?!9`_`7<yEsd@$WNlxSJW^G-tg^EFqZbtkAd#hiG_Fng2>)%Om!$@Cl<iaf}
zgcquroj57mLD{E(Au)YZ-TrO%1yzV%^)QJZtJWZP#&o`d_*eU4w6sgMbwO1!SkJtn
zgdY0rUSm8hEF<15oA!Z<Oqgx9{;Y8;OxXAJia~f;lK=RVvS!lFN~AYJiib-%%%nJ?
zuwo%_QaIoR3%4;s>J{w+^O18f{ZWc~KwL$j5Na+tM$njhGK_LW`$A_NcSzdOcW)5X
zD#O#i)fFMN;~??z^m~>-#JcG{k<|QIGe#v@9jsHmL_sDr5GLOSER{`*%4(k<&@c*r
zhP23C+*L`AVFdG@nWO*AsDG6jT^=(aZ4nGRYBz1R9@}v<!z6+A@?CEVwnD2&1X3^C
z@e&bt@gc5TslqIzusw+W(2rZm)3Sim+gAb&TMstzB|}&<M?nrEtaZA>o0E_7xRg9Q
zP<jFD9PH|`H4CZqOk2Jv4vo;RQSXVqA_8nk6+9mNa&goGU@zNmdEXW1-6~0dR>^J`
z&zD#P6zDjO+1%2(Sdrx|;PNGdm8a%LA32rVe`@)SSCXRP=4thn(n|;_#yafLp4MmR
zOzdW?oLZ_2F7iQ|saHd5k*bvD+z+<P!M*Wjr>qK`%Xb@!9sbItHF2-1t4)Mekcw3O
z$;#kyq|ZqgtCl*;0%x3DWlw#F4CPzd2c{pFa&(1fCJJAr@TJP(P>HmB?^6RhFN{0Y
zTuby5=u!H@nHz0gWw0m5*-jk{RbRk~HD8r{U<${_oBjN8lr7t=b~V<JETw6!lcfDy
zrxkDc24LFsQMvEk?^P{BN+)kv1bnC58>`dI9Bph>8Hn)e<`uY_VX{AqjBC%S=|OEe
zXUhq?T${*KA@`BWo1ko`09JG^4<Q%7p66<0YLvwSL#96<oyz@k(bwY=lQHwKH%75H
zYld&GN9ell(34!&v^DQ6?BZ&eX&vm{-p)vGj3as)QbR7%|A<;j{YWe~TPJu{T+Oh3
zh0j)`Hq>q}9W)0FQ0yHCHJXgiv}78o`#Sr$=3(;;(p-Z?7eMAN{^F0pU2X4@`Ns!6
zqi1Wq5XGTmes^{i*iJ!vF!b^F8&P-0nASDqoz*YT>ul{tnG-^ps_`1~95WP$j|!>K
zeQP^f95$ORE4R2Vt?c(Q`s^t;oK^>sM8CY2b3K!g7_eY0BmK~LXiB$O6Raa~#p(7}
zg^t&x=N9`qWC5fGm$F}l^V!Pu!u^kO-T0QAok(Tk606?)6qJO8t^x70>wYTxH@qbL
z+Hl;q$}wX+<5sTF&P~ED%4D;Ne7~6NyF0t#P<3D)my9Jvpi6ukZX=3Ey!#s4t}nJ2
z*%y?Fqr-5f)HRt7T0{jjFs?YAK2p|3^d&dE9HM&nrMewNP21~`Onp^QeWbx>*OJ2!
zv-d~tXBpInp;iy<YfCqD#pV0$4MU`M(me!S68mCy8}bh3r%e6Jn=?7MmCZs>6X{_H
zH=<+YtR8+m<{=(9QVyWY!X*wFwo$wHCh&m{D^@um+qm}58oMBdhx~~L6)DZ)wCwGU
z5}|Juxu*E2mF22$6U2~P@{CRGdo%lKH2aw-$vI}Qk(f2lj=igoE7hb#rbhq+qzRpE
z9QF3xn2_y<p{38Z`j3@V6Bp1yUj7pjvi&w72*EsfCjNmj)q;bZo*0z9AHE2{Y2aVC
zwo~R-`oPonTdjz4Bg=xiM0zDQ3~|w*)(^d4`>5L|Tdio4R~gd`Ze`x;M$DLc?E}Ty
zuh4%iy6jCVeH=`y36bsSkjSW^*O2p0E-)Lky)-6SFGB_zN(84a)$Z0w+c@FLfDB(*
zXP6D=S9@Gaaas*-rV3&;{g*C`vSp>cVQfAO%_X?Y_Ed|5w+iK!UPZ5QROwH9*|syV
zP>PM-`Zv$3ox2M)?##%iyGvFDoXhs(KWb9x8cL;m)?TNYHeP!Od9XGDdl+TOXB0Gk
z*x~JRvw9cyO(n0bS=q(1WozO#&Cgr-UOAAh$y%$6;RPgsS1#<jq8^@>?U;{T#;g*e
zR5$yOk-O28bbc;?FG4ag;oh?BzL;aDM54D*!vS>I1`k7j0xC06l+9;Mjkwfht+UL^
zgL8)`mJk554`cKlZahZFK&HQTD@0HV?Z_VP(SKUKLaWzz<M&SoVM>E{q7$v5Pwit8
zfGbjrMYISbI9snwcL3?SGDG~<5=S#u$)fAI;5Ji;<S#YcO7Q7zmC!kIDIbo!_tc&U
z18e39d3a%{dXBm^h7B<AQK*wwLn@u$JVcZ&OL(~!DEfz2))UOuhKn_Ea+6nu-Cw}K
z;5<POj_IA5<u~QmH`AwsZXRr1D-f~E!i%F(#)yk+ao8$xi_k)Sa0&gS81*FuaU7?0
z9U$uxU~>7&x=FKVyG;F>h3}*I2ebQ=w~Yvkc>*2^a5M_^;Rkrxw~#+d=()K{5ezwg
zRjjNHZ3$FYJ=EN(#3kEEXYd!M!l-v7xO27g=TWe;oYDY9vHu&$0Sh!H64b0Xf?^%z
z;|d)>9*|5BQevkS`oG=NNRHG2H_d+|d@(>=^gGEYYK#1^@84H%OLgCT6qeEsRh4Lo
zuwtkb=}%8WJR13%Xx*X?!ovH(tKBA<RO{_`d^Y&pZtE-F6Z=(zn|qAdzw^gy-1dj}
zJXVl{vgi0*_B?3(<bP-CTz)Yx5Ekpz8D~xa>WM?UZgDT{wrJffSeZ335O70(y2wEU
zI_j<TzAvInr7coy+3F~K?dnAz0hd+uu^>keJulmUN_}fYNO45w*v48bM0&x!=I_DC
z657`s0Fi^@j*c<HjrNth9G_*xK|X^&Ux5vik?w&+`P}(zseDInjk@&_6@ELr?|5Wm
zHBzG(eHtgUbMzR2O9`G7urSOqa~h~${&8p$lO--K-pm6|A@ubb$VjUPumfj$?8UX$
z^quew&c74K2vI~(mj+-y1(++PZx73K7;_LcFNikM$&c4UJPDpt`f;;oaqL?TPeB!Z
zWl%?%&nUiy$*!X!J`{u$4O9UUEqpHEL5t(VK=bHH$6%_YUL@alLR9njq@ct=g3MHz
z{AwjiG&}<f|G#u5lGmW5XKK3IxovaUyaVO@FZr`oKx+qZC+_Y?QIv4u1&_&2XF{(7
z@;)=D^|c-cu(M@9Uy{3ySdXm?%_#+}VLpjLqHptcTjP1m*6s5iz{x$F-`A@IyDsOE
z-U&u>4je@&l#Sf|Wc2`GztE6mX?{j=*-8{=2g|JfdJ!Qt1VFbdv`=TtK8qXsyu&cH
z1Ck;CB+I;W*xEPBMwr|_I!yK1Kd$C%fJ%1l8`gHf-QYIB5yEF$Xb-%5o$^RiyC~ug
zWbh(lc7u=$@*CSYgnZ-hSZWVpsPS*&PrxapVXm2TLLML;qt}UWV6PGbAjLbjTA$l*
zA7<MwWG0@lV-tx3`Gvnu3fkaO&WzF~McR6Wqlj=??<-TlJ;QSGNvC@+lYNowM8VQk
z&3W#<q)q2I3JXIlqU$;`@sX>|_{dmoO@fk>^DkZ&vye96CYkvVo2RC$lPmcY%dB2e
zKEkG0rZ#jM+!R};`*d&h7i~IX2o4?>SCkUNOMPujr?+uA`E}^FW}`w3iw%Rs<nV}8
zs`%br<W}I23~m!q1ivf!)S^^i>bfjH(`B_=uG1(><v!g3_GI@5YB{(t>UL2^ix+me
zcWo0sbRO7C>a$6F@($;}1_xY!4a3n~RCZrX^VO}l@Ji&mmRXK|yeewKb}JAZcq@he
zoy`|RwcV0A+JG_4?1Z@VC(}m~AD*qeZ@E61po;2Kh`dml!{xArK?$`wUEn_kcsDJ(
zg74lE!qUG=;R<*LB88%>1DU$%bjK^6&r`13wqdAg%i=rvX8Lgs1-Ncnv^L=kWPp*B
z?_stDM};qH+e>XJzY-Xzap4oM<VJ-6Xow1pKGRJ+^Q<6;Vl{*)ZceH(GcNZt?)nK}
zA|%s@S-gB}u8^)&$2kfb7x^yzfITkP2nVi)*S~wKB{m!Z(**n?C4eBgC+1HJ{Rt8&
z-54B~`{GX!cG#hwS5OlMHSoJhSL5k$PQ8KQFPRcTO+&*ti+5*1IyNKRJo8+Fxd5dX
z0*-_=@FR@w_;9g=I?hNIh+GtK0a{8AV(zP(XyOt&6)U^1970dw{m^}ldh=Fh!XJ1L
zrMwn9&iQkx=75s@Da++?xsn4VJODoA#D{KGN6AWSK?hO`Km_tMNlY#3c-W;wBAPT<
zqt8qv*ZhuvgVdn}NYdPr1ACax?>LjO%YAAuiSV6QX|m~)7+ziuC%@+{`8I#;+fQpZ
zwhtJF1XyeZe*Iq6FM`59;}Da3K%acI40cO-Uy(ppK>|o7-z+OW`}e&c`+!<J0ktfo
zeiOqR-Q6rQT!TFX3MyEh!5<%T+P-&CZ!5=NeT3y$8%qic%fONU93TkGe~y78FiWQ5
bdzS2HwKD>VPwj#KTUbmC%~2Hwx8nZ?l$XZ=

literal 0
HcmV?d00001

diff --git a/public/docs/_examples/style-guide/ts/11-09/app/app.component.avoid.html b/public/docs/_examples/style-guide/ts/11-09/app/app.component.avoid.html
new file mode 100644
index 0000000000..e66ea7caa6
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-09/app/app.component.avoid.html
@@ -0,0 +1,5 @@
+<!-- #docregion -->
+<!--avoid-->
+
+<img src="./11-09/app/angular.png">
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-09/app/app.component.html b/public/docs/_examples/style-guide/ts/11-09/app/app.component.html
new file mode 100644
index 0000000000..9182b27dcc
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-09/app/app.component.html
@@ -0,0 +1,3 @@
+<!-- #docregion-->
+<img src="./11-09/app/angular.png" alt="Angular 2 logo">
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-09/app/app.component.ts b/public/docs/_examples/style-guide/ts/11-09/app/app.component.ts
new file mode 100644
index 0000000000..2d5a33ed4d
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-09/app/app.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html'
+})
+export class AppComponent {
+}
diff --git a/public/docs/_examples/style-guide/ts/11-09/app/index.ts b/public/docs/_examples/style-guide/ts/11-09/app/index.ts
new file mode 100644
index 0000000000..df2f2075c8
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-09/app/index.ts
@@ -0,0 +1 @@
+export * from './app.component';
diff --git a/public/docs/_examples/style-guide/ts/11-11/app/app.component.avoid.html b/public/docs/_examples/style-guide/ts/11-11/app/app.component.avoid.html
new file mode 100644
index 0000000000..f492b0543c
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-11/app/app.component.avoid.html
@@ -0,0 +1,5 @@
+<!-- #docregion -->
+<!--avoid-->
+
+<span class="green-background">Current status indicator</span>
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-11/app/app.component.css b/public/docs/_examples/style-guide/ts/11-11/app/app.component.css
new file mode 100644
index 0000000000..a66a0598d6
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-11/app/app.component.css
@@ -0,0 +1,5 @@
+/*#docregion*/
+.green-background {
+  background-color: #00DD00;
+  color: black;
+}
diff --git a/public/docs/_examples/style-guide/ts/11-11/app/app.component.html b/public/docs/_examples/style-guide/ts/11-11/app/app.component.html
new file mode 100644
index 0000000000..0956810314
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-11/app/app.component.html
@@ -0,0 +1,3 @@
+<!-- #docregion-->
+<span class="green-background">Current status is OK!</span>
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/11-11/app/app.component.ts b/public/docs/_examples/style-guide/ts/11-11/app/app.component.ts
new file mode 100644
index 0000000000..9a12130466
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-11/app/app.component.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css']
+})
+export class AppComponent {
+}
diff --git a/public/docs/_examples/style-guide/ts/11-11/app/index.ts b/public/docs/_examples/style-guide/ts/11-11/app/index.ts
new file mode 100644
index 0000000000..df2f2075c8
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/11-11/app/index.ts
@@ -0,0 +1 @@
+export * from './app.component';
diff --git a/public/docs/_examples/style-guide/ts/app/app.routes.ts b/public/docs/_examples/style-guide/ts/app/app.routes.ts
index 644e86bffd..da4bf2a556 100644
--- a/public/docs/_examples/style-guide/ts/app/app.routes.ts
+++ b/public/docs/_examples/style-guide/ts/app/app.routes.ts
@@ -26,6 +26,15 @@ import { AppComponent as S0701 } from '../07-01/app';
 import { AppComponent as S0703 } from '../07-03/app';
 import { AppComponent as S0704 } from '../07-04/app';
 import { AppComponent as S0901 } from '../09-01/app';
+import { AppComponent as S1101 } from '../11-01/app';
+import { AppComponent as S1102 } from '../11-02/app';
+import { AppComponent as S1103 } from '../11-03/app';
+import { AppComponent as S1105 } from '../11-05/app';
+import { AppComponent as S1106 } from '../11-06/app';
+import { AppComponent as S1107 } from '../11-07/app';
+import { AppComponent as S1108 } from '../11-08/app';
+import { AppComponent as S1109 } from '../11-09/app';
+import { AppComponent as S1111 } from '../11-11/app';
 
 const routes: RouterConfig = [
   { path: '', redirectTo: '/01-01', pathMatch: 'full' },
@@ -55,6 +64,15 @@ const routes: RouterConfig = [
   { path: '07-03', component: S0703 },
   { path: '07-04', component: S0704 },
   { path: '09-01', component: S0901 },
+  { path: '11-01', component: S1101 },
+  { path: '11-02', component: S1102 },
+  { path: '11-03', component: S1103 },
+  { path: '11-05', component: S1105 },
+  { path: '11-06', component: S1106 },
+  { path: '11-07', component: S1107 },
+  { path: '11-08', component: S1108 },
+  { path: '11-09', component: S1109 },
+  { path: '11-11', component: S1111 },
 ];
 
 export const appRouterProviders = [
diff --git a/public/docs/_examples/style-guide/ts/systemjs.custom.js b/public/docs/_examples/style-guide/ts/systemjs.custom.js
index 10f13fe801..c829a24522 100644
--- a/public/docs/_examples/style-guide/ts/systemjs.custom.js
+++ b/public/docs/_examples/style-guide/ts/systemjs.custom.js
@@ -29,7 +29,16 @@
     '07-01', '07-01/app', '07-01/app/heroes', '07-01/app/heroes/shared',
     '07-03', '07-03/app', '07-03/app/heroes', '07-03/app/heroes/hero-list', '07-03/app/heroes/shared',
     '07-04', '07-04/app', '07-04/app/heroes', '07-04/app/heroes/shared',
-    '09-01', '09-01/app', '09-01/app/heroes', '09-01/app/heroes/shared', '09-01/app/heroes/shared/hero-button'
+    '09-01', '09-01/app', '09-01/app/heroes', '09-01/app/heroes/shared', '09-01/app/heroes/shared/hero-button',
+    '11-01', '11-01/app',
+    '11-02', '11-02/app',
+    '11-03', '11-03/app',
+    '11-05', '11-05/app',
+    '11-06', '11-06/app','11-06/app/heroes', '11-06/app/heroes/shared',
+    '11-07', '11-07/app',
+    '11-08', '11-08/app', '11-08/app/heroes', '11-08/app/heroes/shared',
+    '11-09', '11-09/app',
+    '11-11', '11-11/app'
   ];
 
   var packages = {};
diff --git a/public/docs/ts/latest/guide/style-guide.jade b/public/docs/ts/latest/guide/style-guide.jade
index 0feeb5f8f8..8cecd0b6fa 100644
--- a/public/docs/ts/latest/guide/style-guide.jade
+++ b/public/docs/ts/latest/guide/style-guide.jade
@@ -56,6 +56,7 @@ a(id='toc')
     1. [Services](#services)
     1. [Data Services](#data-services)
     1. [Lifecycle Hooks](#lifecycle-hooks)
+    1. [Accessibility](#accessibility)
     1. [Appendix](#appendix)
 
 .l-main-section
@@ -1869,7 +1870,334 @@ a(href="#toc") Back to top
 
 +makeExample('style-guide/ts/09-01/app/heroes/shared/hero-button/hero-button.component.ts', 'example', 'app/heroes/shared/hero-button/hero-button.component.ts')
 :marked
+  
+a(href="#toc") Back to top
+
+.l-main-section
+:marked
+  ## Accessibility
+
+  Make your applications accessible to all method of navigation, including keyboard-only navigation and assistive 
+  technologies.  
+
+  ### <a id="11-01"></a>Provide a page language code
+  #### <a href="#01-01">Style 11-01</a>
+.s-rule.do
+  :marked
+    **Do** provide a `lang` attribute on your `html` tag.
+
+.s-why
+  :marked
+    **Why?** Assistive technologies, such as screen readers, need to know the language of the page.
+    
+.s-why
+  :marked
+    **Why?** Language tools, such as spell checkers and translators adapt to the given language.
+
+.s-why.s-why-last
+  :marked
+    **Why?** This enables styling and font selection based on the page language.    
+
+:marked
++makeExample('style-guide/ts/11-01/app/index.avoid.html', 'page-lang', 'index.html')(avoid=1)
+
+:marked
+  Provide the ISO language code as well the country code (where appropriate).
+  
++makeExample('style-guide/ts/11-01/app/index.html', 'page-lang', 'index.html')  
+
+.l-main-section
+:marked
+  ### <a id="11-02"></a>Never remove the browser focus outline 
+  #### <a href="#11-02">Style 11-02</a>
+.s-rule.do
+  :marked
+    **Do** keep the `outline` css property intact.
+
+.s-rule.consider
+  :marked
+    **Consider** only removing it if absolutely required and an alternate `:focus` style is provided.
+
+.s-rule.avoid
+  :marked
+    **Avoid** completely removing the focus outline on your page.
+
+.s-why
+  :marked
+    **Why?** Sighted keyboard-only users fully rely on a visual indication of focus for navigation.
+
+.s-why.s-why-last
+  :marked
+    **Why?** Removing it renders a page immediately inaccessible.
+
+:marked
+  Never add one of the following styles without providing an alternate `:focus` outline style.
+
++makeExample('style-guide/ts/11-02/app/app.component.avoid.css', '', 'app.component.css')(avoid=1)    
+
+:marked
+.l-main-section
+:marked
+  ### <a id="11-03"></a>If you can use a native HTML element, then do so.
+  #### <a href="#11-03">Style 11-03</a>
+.s-rule.do
+  :marked
+    **Do** use native HTML elements where possible.
+
+.s-rule.avoid
+  :marked
+    **Avoid** recreating elements such as `input`, `button` and `a` with `div` and `span`.
+
+.s-why
+  :marked
+    **Why?** Native HTML elements contain a lot of built in functionality, i.e. accepting keyboard focus and exposing the correct interaction events.
+
+.s-why
+  :marked
+    **Why?** Native HTML elements are instantly understood by all browsers and assistive technologies, such as screen readers.
+    
+.s-why.s-why-last
+  :marked
+    **Why?** Native HTML elements automatically follow expected interaction patterns.   
+
+:marked
++makeExample('style-guide/ts/11-03/app/app.component.avoid.html', '', 'app.component.html')(avoid=1)
+
+:marked
++makeExample('style-guide/ts/11-03/app/app.component.html', '', 'app.component.html')
+
+.l-main-section
+:marked
+  ### <a id="11-04"></a>Always support and test keyboard navigation.
+  #### <a href="#11-04">Style 11-04</a>
+.s-rule.do
+  :marked
+    **Do** unplug your mouse and test if all functionality on your page can be reached and activated with `TAB`, 
+    `SHIFT+TAB`, `ENTER`, `SPACE` and `the arrow keys` alone.
+
+.s-rule.avoid
+  :marked
+    **Avoid** any functional areas that cannot be reached this way.
+
+.s-why
+  :marked
+    **Why?** People who cannot use a mouse due to disability or injury navigate with the keyboard alone or other 
+    related technologies.
+
+.s-why.s-why-last
+  :marked
+    **Why?** People with visual disabilities requiring the assistance of screen readers also exclusively navigate with 
+    the keyboard alone or other related technologies.
+    
+.l-main-section
+:marked
+  ### <a id="11-05"></a>Use `dl` to display the read-only state of interactive controls / form controls.
+  #### <a href="#11-05">Style 11-05</a>
+.s-rule.do
+  :marked
+    **Do** display read only key-value data as a `definition list`.
+
+.s-rule.avoid
+  :marked
+    **Avoid** using the `label` tag without a related interactive control / form control. 
+
+.s-rule.avoid
+  :marked
+    **Avoid** using only `div` and `span` to display related key-value data.    
+    
+.s-why
+  :marked
+    **Why?** Assistive technologies, such as screen readers, recognize the `dl` as containing related key-value pairs.
+
+.s-why.s-why-last
+  :marked
+    **Why?** Unrelated `label` tags are considered invalid HTML and not recognized by assistive technologies.    
+
+:marked
++makeExample('style-guide/ts/11-05/app/app.component.avoid.html', '', 'app.component.html')(avoid=1)
+
+:marked
++makeExample('style-guide/ts/11-05/app/app.component.html', '', 'app.component.html')    
+    
+.l-main-section
+:marked
+  ### <a id="11-06"></a>Provide a label for all interactive controls / form controls and groups of controls.
+  #### <a href="#11-06">Style 11-06</a>
+.s-rule.do
+  :marked
+    **Do** associate a `label` element with every interactive control / form control.
+    
+.s-rule.do
+  :marked
+    **Do** place groups of related interactive controls / form controls in a `fieldset` and label with `legend`.    
+
+.s-rule.avoid
+  :marked
+    **Avoid** unlabelled interactive controls / form controls. 
+
+.s-rule.avoid
+  :marked
+    **Avoid** any unassociated labels.    
+
+.s-why
+  :marked
+    **Why?** All users need to know the meaning of every interactive control / form control.
+
+.s-why
+  :marked
+    **Why?** Users with visual disabilities are unable to assume this meaning based on visual position.
+    
+.s-why.s-why-last
+  :marked
+    **Why?** Associated labels also become clickable making it easier to select interactive controls / form controls.    
+
+:marked
++makeExample('style-guide/ts/11-06/app/app.component.avoid.html', '', 'app.component.html')(avoid=1)
+
+:marked
++makeExample('style-guide/ts/11-06/app/app.component.html', '', 'app.component.html')
+
+.l-main-section
+:marked
+  ### <a id="11-07"></a>Use links for navigation and buttons for activation.
+  #### <a href="#11-07">Style 11-07</a>
+.s-rule.do
+  :marked
+    **Do** use `a` tag links to navigate to other pages.
+
+.s-rule.do
+  :marked
+    **Do** use `buttons` to activate user actions requiring a response.    
+
+.s-rule.avoid
+  :marked
+    **Avoid** mixing these elements and functions. 
+
+.s-why
+  :marked
+    **Why?** Links are recognised by assistive technologies, expected to trigger a navigation and to be activated with `ENTER` alone.
+
+.s-why.s-why-last
+  :marked
+    **Why?** Buttons are recognised by assistive technologies, expected to trigger a user action and to be activated with either `ENTER` or `SPACE`.
+
+:marked
++makeExample('style-guide/ts/11-07/app/app.component.avoid.html', '', 'app.component.html')(avoid=1)
+
+:marked
++makeTabs(
+`style-guide/ts/11-07/app/app.component.html,
+style-guide/ts/11-07/app/app.component.ts`, 
+'', 
+`app.component.html, 
+app.component.ts`)    
+    
+.l-main-section
+:marked
+  ### <a id="11-08"></a>Provide descriptive text for your HTML elements.
+  #### <a href="#11-08">Style 11-08</a>
+.s-rule.do
+  :marked
+    **Do** provide descriptive text for elements such as `buttons` describing the purpose of the element.
+
+.s-rule.avoid
+  :marked
+    **Avoid** possible repetitive text for your elements as repetition causes confusion.
+
+.s-why
+  :marked
+    **Why?** Due to functionality such as `*ngFor` it is possible to create multiple instances of one HTML partial. 
+    A button stating *Save Rubberman* is then clearer than *Save Hero*.    
+    
+.s-why.s-why-last
+  :marked
+    **Why?** This severly impacts users relying on screen readers where multiple occurances of elements with the same 
+    text can cause the page to become unusable as the visual context cannot be seen.
+
+:marked
++makeExample('style-guide/ts/11-08/app/app.component.avoid.html', '', 'app.component.html')(avoid=1)
+
+:marked
++makeExample('style-guide/ts/11-08/app/app.component.html', '', 'app.component.html')    
+    
+.l-main-section
+:marked
+  ### <a id="11-09"></a>Provide alternative text for all your images.
+  #### <a href="#11-09">Style 11-09</a>
+.s-rule.do
+  :marked
+    **Do** provide descriptive text for all images using the `alt` attribute.
+
+.s-rule.avoid
+  :marked
+    **Avoid** any images not described by text.
+
+.s-why.s-why-last
+  :marked
+    **Why?** Users with visual disabilites will be unable to discern the meaning of images without an alternative textual description.
+
+:marked
++makeExample('style-guide/ts/11-09/app/app.component.avoid.html', '', 'app.component.html')(avoid=1)
+
+:marked
++makeExample('style-guide/ts/11-09/app/app.component.html', '', 'app.component.html')
+
+.l-main-section
+:marked
+  ### <a id="11-10"></a>Provide good textual color contrast
+  #### <a href="#11-10">Style 11-10</a>
+.s-rule.do
+  :marked
+    **Do** provide a color contrast ratio of at least `4.5:1` between the text color and the text background color for small text .
+
+.s-rule.do
+  :marked
+    **Do** provide a color contrast ratio of at least `3:1` between the text color and the text background color for large text.   
+    
+.s-rule.do
+  :marked
+    **Do** use one of many freely available color contrast test tools to achieve this.      
+
+.s-rule.avoid
+  :marked
+    **Avoid** providing textual contrast below these levels.
+
+.s-why
+  :marked
+    **Why?** Users with limited vision, who are not reliant on screen readers, may be unable to read text not conforming to these contrast ratios.
+
+.s-why.s-why-last
+  :marked
+    **Why?** These ratios provide an enhanced reading experience for all users in a larger range of ambient light conditions.  
 
+.l-main-section
+:marked
+  ### <a id="11-11"></a>Avoid full reliance on color alone to convey meaning.
+  #### <a href="#11-11">Style 11-11</a>
+.s-rule.do
+  :marked
+    **Do** provide readable text to convey all application-critical information.
+
+.s-rule.avoid
+  :marked
+    **Avoid** using only color to convey application-critical information, i.e. *"Click on the green button"*.
+
+.s-why.s-why-last
+  :marked
+    **Why?** Users with visual disabilites will be unable to recognize this important application information and therefore be unable to use it.
+
+:marked
++makeExample('style-guide/ts/11-11/app/app.component.avoid.html', '', 'app.component.html')(avoid=1)
+
+:marked
++makeTabs(
+`style-guide/ts/11-11/app/app.component.html,
+style-guide/ts/11-11/app/app.component.css,
+style-guide/ts/11-11/app/app.component.ts`, 
+'', 
+`app.component.html, app.component.css, 
+app.component.ts`)    
+    
 a(href="#toc") Back to top
 
 .l-main-section