style-guide(add-a11y): Add accessibility quick wins

Author: AlmeroSteyn

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!');
+  });
+
 });

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 {
+}

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>

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>

public/docs/_examples/style-guide/ts/11-01/app/index.ts

@@ -0,0 +1 @@
+export * from './app.component';

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 */

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}}

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;
+}

public/docs/_examples/style-guide/ts/11-02/app/index.ts

@@ -0,0 +1 @@
+export * from './app.component';

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

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;
+}

public/docs/_examples/style-guide/ts/11-03/app/app.component.html

@@ -0,0 +1,3 @@
+<!-- #docregion-->
+<button (click)="saveData()">Press me</button>
+<!-- #enddocregion -->

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.');
+  }
+
+}

public/docs/_examples/style-guide/ts/11-03/app/index.ts

@@ -0,0 +1 @@
+export * from './app.component';

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

public/docs/_examples/style-guide/ts/11-05/app/app.component.css

@@ -0,0 +1,4 @@
+dl dt {
+  float: left;
+  clear: left;
+}

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

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'};
+  }
+
+}

public/docs/_examples/style-guide/ts/11-05/app/index.ts

@@ -0,0 +1 @@
+export * from './app.component';

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

public/docs/_examples/style-guide/ts/11-06/app/app.component.css

@@ -0,0 +1,3 @@
+fieldset {
+  margin-bottom: 5px;
+}

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

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;
+  }
+
+}

public/docs/_examples/style-guide/ts/11-06/app/heroes/index.ts

@@ -0,0 +1 @@
+export * from './shared';

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;
+}

public/docs/_examples/style-guide/ts/11-06/app/heroes/shared/index.ts

@@ -0,0 +1 @@
+export * from './hero.model';

public/docs/_examples/style-guide/ts/11-06/app/index.ts

@@ -0,0 +1,2 @@
+export * from './heroes';
+export * from './app.component';

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