Skip to content
This repository has been archived by the owner on Dec 4, 2017. It is now read-only.

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 110 additions & 0 deletions public/docs/_examples/style-guide/e2e-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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!');
});

});
Original file line number Diff line number Diff line change
@@ -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 {
}
14 changes: 14 additions & 0 deletions public/docs/_examples/style-guide/ts/11-01/app/index.avoid.html
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 12 additions & 0 deletions public/docs/_examples/style-guide/ts/11-01/app/index.html
Original file line number Diff line number Diff line change
@@ -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>
1 change: 1 addition & 0 deletions public/docs/_examples/style-guide/ts/11-01/app/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './app.component';
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
/* #docregion */
/* avoid */

:focus {
outline: 0;
}

/* or */

:focus {
outline: none;
}
/* #enddocregion */
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<label>Name:
<input [(ngModel)]="name">
</label>
<label>Surname:
<input [(ngModel)]="surname">
</label>
{{name}}{{surname}}
11 changes: 11 additions & 0 deletions public/docs/_examples/style-guide/ts/11-02/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -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;
}
1 change: 1 addition & 0 deletions public/docs/_examples/style-guide/ts/11-02/app/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './app.component';
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<!-- #docregion -->
<!--avoid-->

<div class="button" (click)="saveData()">Press me</div>
<!-- #enddocregion -->
11 changes: 11 additions & 0 deletions public/docs/_examples/style-guide/ts/11-03/app/app.component.css
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<!-- #docregion-->
<button (click)="saveData()">Press me</button>
<!-- #enddocregion -->
15 changes: 15 additions & 0 deletions public/docs/_examples/style-guide/ts/11-03/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -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.');
}

}
1 change: 1 addition & 0 deletions public/docs/_examples/style-guide/ts/11-03/app/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './app.component';
Original file line number Diff line number Diff line change
@@ -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 -->
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
dl dt {
float: left;
clear: left;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!-- #docregion-->
<dl>
<dt>Name:</dt>
<dd>{{hero.name}}</dd>
<dt>Power:</dt>
<dd>{{hero.power}}</dd>
</dl>
<!-- #enddocregion -->
17 changes: 17 additions & 0 deletions public/docs/_examples/style-guide/ts/11-05/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -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'};
}

}
1 change: 1 addition & 0 deletions public/docs/_examples/style-guide/ts/11-05/app/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './app.component';
Original file line number Diff line number Diff line change
@@ -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 -->
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
fieldset {
margin-bottom: 5px;
}
43 changes: 43 additions & 0 deletions public/docs/_examples/style-guide/ts/11-06/app/app.component.html
Original file line number Diff line number Diff line change
@@ -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 -->
26 changes: 26 additions & 0 deletions public/docs/_examples/style-guide/ts/11-06/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -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;
}

}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './shared';
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export class Hero {
id: number;
name: string;
power: string;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './hero.model';
2 changes: 2 additions & 0 deletions public/docs/_examples/style-guide/ts/11-06/app/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from './heroes';
export * from './app.component';
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<!-- #docregion -->
<!--avoid-->

<button (click)="gotoDestination()">Go to Angular!</button>

<!--or-->

<a (click)="alertUser()" href="#">Alert User</a>
<!-- #enddocregion -->
Loading