docs(a11y-sweep): Apply baseline accessibility to the examples

angular · Jun 10, 2016 · bd3a864 · bd3a864
1 parent 21d74d5
commit bd3a864
Show file tree

Hide file tree

Showing 32 changed files with 260 additions and 130 deletions.
diff --git a/public/docs/_examples/toh-1/ts/app/app.component.ts b/public/docs/_examples/toh-1/ts/app/app.component.ts
@@ -13,10 +13,14 @@ export class Hero {
   template:`
     <h1>{{title}}</h1>
     <h2>{{hero.name}} details!</h2>
-    <div><label>id: </label>{{hero.id}}</div>
+    <dl>
+      <dt>id:</dt>
+      <dd>{{hero.id}}</dd>
+    </dl>
     <div>
-      <label>name: </label>
-      <input [(ngModel)]="hero.name" placeholder="name">
+      <label>name: 
+        <input [(ngModel)]="hero.name" placeholder="name">
+      </label>
     </div>
     `
 })

diff --git a/public/docs/_examples/toh-1/ts/demo.css b/public/docs/_examples/toh-1/ts/demo.css
@@ -0,0 +1,8 @@
+body{
+  color: #5E5E5E;
+}
+
+dt {
+  float: left;
+  clear: left;
+}
diff --git a/public/docs/_examples/toh-1/ts/index.html b/public/docs/_examples/toh-1/ts/index.html
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
-<html>
+<html lang="en-US">
   <head>
     <title>Angular 2 Tour of Heroes</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="demo.css">
 
     <!-- Polyfill(s) for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>

diff --git a/public/docs/_examples/toh-2/ts/app/app.component.ts b/public/docs/_examples/toh-2/ts/app/app.component.ts
@@ -13,25 +13,33 @@ export class Hero {
     <h2>My Heroes</h2>
     <ul class="heroes">
       <li *ngFor="let hero of heroes"
+        role="button"
         [class.selected]="hero === selectedHero"
-        (click)="onSelect(hero)">
+        [attr.aria-pressed]="hero === selectedHero"
+        (click)="onSelect(hero)"
+        (keydown.enter)="onSelect(hero)"
+        tabindex="0">
         <span class="badge">{{hero.id}}</span> {{hero.name}}
       </li>
     </ul>
     <div *ngIf="selectedHero">
-      <h2>{{selectedHero.name}} details!</h2>
-      <div><label>id: </label>{{selectedHero.id}}</div>
-      <div>
-        <label>name: </label>
-        <input [(ngModel)]="selectedHero.name" placeholder="name"/>
-      </div>
+    <h3>{{selectedHero.name}} details!</h3>
+    <dl>
+      <dt>id:</dt>
+      <dd>{{selectedHero.id}}</dd>
+    </dl>
+    <div>
+      <label>name: 
+        <input [(ngModel)]="selectedHero.name" placeholder="name">
+      </label>
+    </div>
     </div>
   `,
 // #docregion styles-1
   styles:[`
     .selected {
       background-color: #CFD8DC !important;
-      color: white;
+      color: black;
     }
     .heroes {
       margin: 0 0 2em 0;
@@ -49,13 +57,15 @@ export class Hero {
       height: 1.6em;
       border-radius: 4px;
     }
-    .heroes li.selected:hover {
+    .heroes li.selected:hover,
+    .heroes li.selected:focus{
       background-color: #BBD8DC !important;
-      color: white;
+      color: black;
     }
-    .heroes li:hover {
-      color: #607D8B;
-      background-color: #DDD;
+    .heroes li:hover,
+    .heroes li:focus{
+      color: white;
+      background-color: #6469dd;
       left: .1em;
     }
     .heroes .text {
@@ -67,7 +77,7 @@ export class Hero {
       font-size: small;
       color: white;
       padding: 0.8em 0.7em 0 0.7em;
-      background-color: #607D8B;
+      background-color: #4E6570;
       line-height: 1em;
       position: relative;
       left: -1px;

diff --git a/public/docs/_examples/toh-2/ts/demo.css b/public/docs/_examples/toh-2/ts/demo.css
@@ -0,0 +1,8 @@
+body{
+  color: #5E5E5E;
+}
+
+dt {
+  float: left;
+  clear: left;
+}
diff --git a/public/docs/_examples/toh-2/ts/index.html b/public/docs/_examples/toh-2/ts/index.html
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
-<html>
+<html lang="en-US">
   <head>
     <title>Angular 2 Tour of Heros</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="demo.css">
 
     <!-- Polyfill(s) for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>

diff --git a/public/docs/_examples/toh-3/ts/app/app.component.ts b/public/docs/_examples/toh-3/ts/app/app.component.ts
@@ -16,8 +16,12 @@ import { HeroDetailComponent } from './hero-detail.component';
     <h2>My Heroes</h2>
     <ul class="heroes">
       <li *ngFor="let hero of heroes"
+        role="button"
         [class.selected]="hero === selectedHero"
-        (click)="onSelect(hero)">
+        [attr.aria-pressed]="hero === selectedHero"
+        (click)="onSelect(hero)"
+        (keydown.enter)="onSelect(hero)"
+        tabindex="0">
         <span class="badge">{{hero.id}}</span> {{hero.name}}
       </li>
     </ul>
@@ -27,7 +31,7 @@ import { HeroDetailComponent } from './hero-detail.component';
   styles:[`
     .selected {
       background-color: #CFD8DC !important;
-      color: white;
+      color: black;
     }
     .heroes {
       margin: 0 0 2em 0;
@@ -45,13 +49,15 @@ import { HeroDetailComponent } from './hero-detail.component';
       height: 1.6em;
       border-radius: 4px;
     }
-    .heroes li.selected:hover {
+    .heroes li.selected:hover,
+    .heroes li.selected:focus{
       background-color: #BBD8DC !important;
-      color: white;
+      color: black;
     }
-    .heroes li:hover {
-      color: #607D8B;
-      background-color: #DDD;
+    .heroes li:hover,
+    .heroes li:focus{
+      color: white;
+      background-color: #6469dd;
       left: .1em;
     }
     .heroes .text {
@@ -63,7 +69,7 @@ import { HeroDetailComponent } from './hero-detail.component';
       font-size: small;
       color: white;
       padding: 0.8em 0.7em 0 0.7em;
-      background-color: #607D8B;
+      background-color: #4E6570;
       line-height: 1em;
       position: relative;
       left: -1px;

diff --git a/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts
@@ -15,24 +15,28 @@ import { Hero } from './hero';
   // #docregion template
   template: `
     <div *ngIf="hero">
-      <h2>{{hero.name}} details!</h2>
-      <div><label>id: </label>{{hero.id}}</div>
+      <h3>{{hero.name}} details!</h3>
+      <dl>
+        <dt>id:</dt>
+        <dd>{{hero.id}}</dd>
+      </dl>
       <div>
-        <label>name: </label>
-        <input [(ngModel)]="hero.name" placeholder="name"/>
+        <label>name: 
+          <input [(ngModel)]="hero.name" placeholder="name">
+        </label>
       </div>
     </div>
   `
   // #enddocregion template
-// #docregion v1  
+// #docregion v1
 })
 export class HeroDetailComponent {
 // #enddocregion v1
 // #docregion hero-input
-  @Input() 
-// #docregion hero  
+  @Input()
+// #docregion hero
   hero: Hero;
-// #enddocregion hero  
+// #enddocregion hero
 // #enddocregion hero-input
 // #docregion v1
 }

diff --git a/public/docs/_examples/toh-3/ts/demo.css b/public/docs/_examples/toh-3/ts/demo.css
@@ -0,0 +1,8 @@
+body{
+  color: #5E5E5E;
+}
+
+dt {
+  float: left;
+  clear: left;
+}
diff --git a/public/docs/_examples/toh-3/ts/index.html b/public/docs/_examples/toh-3/ts/index.html
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
-<html>
+<html lang="en-US">
   <head>
     <title>Angular 2 Tour of Heroes</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="demo.css">
 
     <!-- Polyfill(s) for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>

diff --git a/public/docs/_examples/toh-4/ts/app/app.component.ts b/public/docs/_examples/toh-4/ts/app/app.component.ts
@@ -16,8 +16,12 @@ import { HeroService } from './hero.service';
     <h2>My Heroes</h2>
     <ul class="heroes">
       <li *ngFor="let hero of heroes"
+         role="button"
         [class.selected]="hero === selectedHero"
-        (click)="onSelect(hero)">
+        [attr.aria-pressed]="hero === selectedHero"
+        (click)="onSelect(hero)"
+        (keydown.enter)="onSelect(hero)"
+        tabindex="0">
         <span class="badge">{{hero.id}}</span> {{hero.name}}
       </li>
     </ul>
@@ -27,7 +31,7 @@ import { HeroService } from './hero.service';
   styles: [`
     .selected {
       background-color: #CFD8DC !important;
-      color: white;
+      color: black;
     }
     .heroes {
       margin: 0 0 2em 0;
@@ -45,13 +49,15 @@ import { HeroService } from './hero.service';
       height: 1.6em;
       border-radius: 4px;
     }
-    .heroes li.selected:hover {
+    .heroes li.selected:hover,
+    .heroes li.selected:focus{
       background-color: #BBD8DC !important;
-      color: white;
+      color: black;
     }
-    .heroes li:hover {
-      color: #607D8B;
-      background-color: #DDD;
+    .heroes li:hover,
+    .heroes li:focus{
+      color: white;
+      background-color: #6469dd;
       left: .1em;
     }
     .heroes .text {
@@ -63,7 +69,7 @@ import { HeroService } from './hero.service';
       font-size: small;
       color: white;
       padding: 0.8em 0.7em 0 0.7em;
-      background-color: #607D8B;
+      background-color: #4E6570;
       line-height: 1em;
       position: relative;
       left: -1px;

diff --git a/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts
@@ -6,13 +6,15 @@ import { Hero } from './hero';
   selector: 'my-hero-detail',
   template: `
     <div *ngIf="hero">
-      <h2>{{hero.name}} details</h2>
+      <h3>{{hero.name}} details!</h3>
+      <dl>
+        <dt>id:</dt>
+        <dd>{{hero.id}}</dd>
+      </dl>
       <div>
-        <label>id: </label>{{hero.id}}
-      </div>
-      <div>
-        <label>name: </label>
-        <input [(ngModel)]="hero.name" placeholder="name"/>
+        <label>name: 
+          <input [(ngModel)]="hero.name" placeholder="name">
+        </label>
       </div>
     </div>
   `

diff --git a/public/docs/_examples/toh-4/ts/demo.css b/public/docs/_examples/toh-4/ts/demo.css
@@ -0,0 +1,8 @@
+body{
+  color: #5E5E5E;
+}
+
+dt {
+  float: left;
+  clear: left;
+}
diff --git a/public/docs/_examples/toh-4/ts/index.html b/public/docs/_examples/toh-4/ts/index.html
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
-<html>
+<html lang="en-US">
   <head>
     <title>Angular 2 Tour of Heroes</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="demo.css">
 
     <!-- Polyfill(s) for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>

diff --git a/public/docs/_examples/toh-5/ts/app/app.component.css b/public/docs/_examples/toh-5/ts/app/app.component.css
@@ -2,7 +2,7 @@
 /* #docregion css */
 h1 {
   font-size: 1.2em;
-  color: #999;
+  color: #747474;
   margin-bottom: 0;
 }
 h2 {
@@ -19,13 +19,14 @@ nav a {
   border-radius: 4px;
 }
 nav a:visited, a:link {
-  color: #607D8B;
-}
-nav a:hover {
-  color: #039be5;
-  background-color: #CFD8DC;
+  color: #44667d;
 }
 nav a.router-link-active {
-  color: #039be5;
+  color: #3953e5;
+}
+nav a:hover,
+nav a:focus {
+  color: #23338c;
+  background-color: #CFD8DC;
 }
 /* #enddocregion css */