[WIP] docs(a11y-cookbook) add accessibility (a11y) cookbook

public/docs/_examples/cb-a11y/ts/.gitignore

@@ -0,0 +1,11 @@
+styles.css
+typings
+typings.json
+*.js.map
+package.json
+karma.conf.js
+karma-test-shim.js
+tsconfig.json
+npm-debug*.
+**/protractor.config.js
+

public/docs/_examples/cb-a11y/ts/a11y.css

@@ -0,0 +1,105 @@
+label {
+  color: #424242;
+  width: 100%;
+}
+
+hr {
+  border-top: 3px double #8c8b8b;
+}
+
+h3 {
+  outline: 0;
+}
+
+.hide-element {
+  display: none !important;
+}
+
+.btn {
+  margin-bottom: 15px;
+}
+
+.background-contrast {
+  background-color: #0143A3;
+  color: #fff;
+}
+
+nav a:visited, a:link {
+  color: darkblue;
+}
+
+.label-default {
+  background-color: #3F3F3F;
+}
+
+.skiplink {
+  min-height: 20px;
+}
+
+/* #docregion cb-a11y-managing-focus-skiplinks-style */
+.skiplink a {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  color: darkblue;
+}
+
+.skiplink a:active,
+.skiplink a:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+}
+
+/* #enddocregion */
+
+/* #docregion cb-a11y-managing-focus-custom-outline */
+.custom-outline:focus {
+  border-color: #7F0037;
+  outline: 0;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(127, 0, 55, .6);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(127, 0, 55, .6);
+}
+
+/* #enddocregion */
+
+/* #docregion cb-a11y-form-controls-visually-hidden-style*/
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+/* #enddocregion */
+
+.like-bootstrap {
+  display: block;
+  width: 100%;
+  height: 34px;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #555;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
+  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}

public/docs/_examples/cb-a11y/ts/app/a11y-index.component.html

@@ -0,0 +1,13 @@
+<nav role="navigation">
+  <ol>
+    <li>
+      <a [routerLink]="['FormControls']"><h2>Accessible form control labels</h2></a>
+    </li>
+    <li>
+      <a [routerLink]="['ManagingFocus']"><h2>Managing focus</h2></a>
+    </li>
+    <li>
+      <a [routerLink]="['ComponentRoles']"><h2>Roles for custom component widgets</h2></a>
+    </li>
+  </ol>
+</nav>

public/docs/_examples/cb-a11y/ts/app/a11y-index.component.ts

@@ -0,0 +1,11 @@
+import {Component} from "angular2/core";
+import {ROUTER_DIRECTIVES} from "angular2/router";
+
+@Component({
+    selector: 'a11y-index',
+    templateUrl: './app/a11y-index.component.html',
+    directives: [ROUTER_DIRECTIVES]
+})
+export class A11yIndex{
+
+}

public/docs/_examples/cb-a11y/ts/app/app.component.html

@@ -0,0 +1,6 @@
+<header role="banner" class="jumbotron well text-center background-contrast">
+    <h1 id="top">Angular 2 A11y Cookbook</h1>
+</header>
+<main role="main" class="container">
+    <router-outlet></router-outlet>
+</main>

public/docs/_examples/cb-a11y/ts/app/app.component.ts

@@ -0,0 +1,29 @@
+import {Component} from "angular2/core";
+import {ROUTER_DIRECTIVES, RouteConfig, ROUTER_PROVIDERS} from "angular2/router";
+import {A11yFormControls} from "./form-controls/a11y-form-controls.component";
+import {A11yIndex} from "./a11y-index.component";
+import {A11yHelper} from "./services/a11y-helper.service";
+import {A11yManagingFocus} from "./managing-focus/a11y-managing-focus.component";
+import {A11yComponentRoles} from "./component-roles/a11y-component-roles.component";
+
+@Component({
+  selector: 'app',
+  templateUrl: 'app/app.component.html',
+  directives:[
+    ROUTER_DIRECTIVES,
+    A11yIndex
+  ],
+  providers: [
+    ROUTER_PROVIDERS,
+    A11yHelper
+  ]
+})
+@RouteConfig([
+  {path:'/', name: 'Index', component: A11yIndex},
+  {path:'/form-controls', name: 'FormControls', component: A11yFormControls},
+  {path:'/managing-focus', name: 'ManagingFocus', component: A11yManagingFocus},
+  {path:'/component-roles', name: 'ComponentRoles', component: A11yComponentRoles}
+])
+export class AppComponent {
+
+}

public/docs/_examples/cb-a11y/ts/app/component-roles/a11y-component-roles.component.html

@@ -0,0 +1,47 @@
+<nav role="navigation" class="skiplink">
+  <a [href]="generateSkiplink('#templateroles')" >Go directly to roles in the template</a>
+  <a [href]="generateSkiplink('#hostroles')">Go directly roles of the host element</a>
+</nav>
+
+<article role="article">
+  <header class="row well">
+    <h2>Roles for custom component widgets</h2>
+  </header>
+
+  <section class="row well">
+    <header>
+      <h3 id="templateroles" tabindex="-1">Roles in the template</h3>
+      <hr>
+    </header>
+
+    <a11y-custom-control [(ngModel)]="inputDivModel">
+      I set the role in my template:
+    </a11y-custom-control>
+
+    <a11y-value-helper [displayValue]="inputDivModel"></a11y-value-helper>
+
+  </section>
+
+  <section class="row well">
+    <header>
+      <h3 id="hostroles" tabindex="-1">Roles of the host element</h3>
+      <hr>
+    </header>
+
+  <div class="row">
+    <div class="col-xs-12">
+      <!-- #docregion cb-a11y-custom-button-usage -->
+      <a11y-custom-button (click)="onClick()">Do something...</a11y-custom-button>
+      <!-- #enddocregion -->
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-xs-12">
+      <a11y-value-helper [displayValue]="generateButtonString()"></a11y-value-helper>
+    </div>
+  </div>
+
+  </section>
+
+</article>

public/docs/_examples/cb-a11y/ts/app/component-roles/a11y-component-roles.component.ts

@@ -0,0 +1,35 @@
+import {Component} from "angular2/core";
+import {A11yHelper} from "../services/a11y-helper.service";
+import {A11yCustomControl} from "../shared/a11y-custom-control.component";
+import {A11yValueHelper} from "../shared/a11y-value-helper.component";
+import {A11yCustomButton} from "../shared/a11y-custom-button.component";
+
+@Component({
+  selector: 'a11y-component-roles',
+  templateUrl: './app/component-roles/a11y-component-roles.component.html',
+  directives: [
+    A11yCustomControl,
+    A11yValueHelper,
+    A11yCustomButton
+  ]
+})
+export class A11yComponentRoles {
+
+  inputDivModel: string = '';
+  buttonClicks: number = 0;
+
+  constructor(private _a11yHelper: A11yHelper){}
+
+  onClick():void {
+    this.buttonClicks++;
+  }
+
+  generateSkiplink(hash:string){
+    return this._a11yHelper.getInternalLink(hash, 'ComponentRoles');
+  }
+
+  generateButtonString(): string{
+    return `Button has been clicked ${this.buttonClicks} times`;
+  }
+
+}