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

AlmeroSteyn · AlmeroSteyn · commit 51a166aed7ed · 2016-07-10T15:03:38.000+02:00
diff --git a/public/docs/_examples/style-guide/e2e-spec.ts b/public/docs/_examples/style-guide/e2e-spec.ts
@@ -206,4 +206,5 @@ describe('Style Guide', function () {
     let button = element(by.tagName('sg-app > toh-hero-button > button'));
     expect(button.getText()).toBe('OK');
   });
+
 });
diff --git a/public/docs/_examples/style-guide/ts/10-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/10-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/10-01/app/index.avoid.html b/public/docs/_examples/style-guide/ts/10-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/10-01/app/index.html b/public/docs/_examples/style-guide/ts/10-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/10-01/app/index.ts b/public/docs/_examples/style-guide/ts/10-01/app/index.ts
@@ -0,0 +1 @@
+export * from './app.component';
diff --git a/public/docs/_examples/style-guide/ts/10-02/app/app.component.avoid.css b/public/docs/_examples/style-guide/ts/10-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/10-02/app/app.component.html b/public/docs/_examples/style-guide/ts/10-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/10-02/app/app.component.ts b/public/docs/_examples/style-guide/ts/10-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/10-02/app/index.ts b/public/docs/_examples/style-guide/ts/10-02/app/index.ts
@@ -0,0 +1 @@
+export * from './app.component';
diff --git a/public/docs/_examples/style-guide/ts/10-03/app/app.component.avoid.html b/public/docs/_examples/style-guide/ts/10-03/app/app.component.avoid.html
@@ -0,0 +1,4 @@
+<!-- #docregion -->
+<!--avoid-->
+<div class="button" (click)="saveData()">Press me</div>
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/style-guide/ts/10-03/app/app.component.css b/public/docs/_examples/style-guide/ts/10-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/10-03/app/app.component.html b/public/docs/_examples/style-guide/ts/10-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/10-03/app/app.component.ts b/public/docs/_examples/style-guide/ts/10-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/10-03/app/index.ts b/public/docs/_examples/style-guide/ts/10-03/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
@@ -26,6 +26,9 @@ 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 S1001 } from '../10-01/app';
+import { AppComponent as S1002 } from '../10-02/app';
+import { AppComponent as S1003 } from '../10-03/app';
 
 const routes: RouterConfig = [
   { path: '01-01', component: S0101 },
@@ -54,6 +57,9 @@ const routes: RouterConfig = [
   { path: '07-03', component: S0703 },
   { path: '07-04', component: S0704 },
   { path: '09-01', component: S0901 },
+  { path: '10-01', component: S1001 },
+  { path: '10-02', component: S1002 },
+  { path: '10-03', component: S1003 },
 ];
 
 export const APP_ROUTER_PROVIDERS = [
diff --git a/public/docs/_examples/style-guide/ts/systemjs.custom.js b/public/docs/_examples/style-guide/ts/systemjs.custom.js
@@ -29,7 +29,10 @@
     '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',
+    '10-01', '10-01/app',
+    '10-02', '10-02/app',
+    '10-03', '10-03/app'
   ];
 
   var packages = {};
diff --git a/public/docs/ts/latest/guide/style-guide.jade b/public/docs/ts/latest/guide/style-guide.jade
