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

AlmeroSteyn · AlmeroSteyn · commit 8f918bbd5eeb · 2016-06-10T09:42:43.000+02:00
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>
