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

AlmeroSteyn · AlmeroSteyn · commit 3cc9d8971610 · 2016-06-07T19:48:33.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,9 @@
+body, input[text], button {
+  color: #5E5E5E;
+  font-family: Cambria, Georgia;
+}
+
+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>
