docs(cb-a11y): Content - Form controls

Author: AlmeroSteyn

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

@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+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";
@@ -7,8 +7,15 @@ import {A11yHelper} from "./services/a11y-helper.service";
 @Component({
   selector: 'app',
   templateUrl: 'app/app.component.html',
-  directives:[ROUTER_DIRECTIVES, A11yFormControls, A11yIndex],
-  providers: [ROUTER_PROVIDERS, A11yHelper]
+  directives:[
+    ROUTER_DIRECTIVES,
+    A11yFormControls,
+    A11yIndex
+  ],
+  providers: [
+    ROUTER_PROVIDERS,
+    A11yHelper
+  ]
 })
 @RouteConfig([
   {path:'/', name: 'Index', component: A11yIndex},

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

@@ -51,7 +51,7 @@ <h3>Labeling custom controls</h3>
             <hr>
         </header>
     </section>
-
+<a href="" [routerLink]="['Index']">Back to index...</a>
 </article>
 
 

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

@@ -8,13 +8,15 @@ import {A11ySelect} from "./a11y-select.component";
 import {A11yTextarea} from "./a11y-textarea.component";
 import {A11yHiddenLabels} from "./a11y-hidden-labels.component";
 import {A11yHelper} from "../services/a11y-helper.service";
+import {ROUTER_DIRECTIVES} from "angular2/router";
 
 @Component({
     selector: 'a11y-form-controls',
     templateUrl: './app/form-controls/a11y-form-controls.component.html',
     directives: [
         CORE_DIRECTIVES,
         FORM_DIRECTIVES,
+        ROUTER_DIRECTIVES,
         A11yInput,
         A11yInputExplicit,
         A11yCheckboxes,

public/docs/ts/latest/cookbook/a11y.jade

@@ -1,11 +1,11 @@
 include ../_util-fns
 
 :marked
-    Welcome, you are about to learn some key concepts that will make your Angular 2 application accessible for
+    Welcome! You are about to learn some key concepts that will make your Angular 2 application accessible for
     as many people as possible. This is no small goal, there is a large group of people out there who find it
     very hard or even impossible to use your applications without thinking about the concepts mentioned here.
 
-    We would like to show you that this can often be achieved with little to no extra effort on your part
+    We will show you that this can often be achieved with little to no extra effort on your part,
     if you bring these concepts right into the design phase of your application.
 
     So page through this cookbook, apply the recipes contained herein and watch your userbase grow.
@@ -14,29 +14,58 @@ include ../_util-fns
     incredible journey. And for those who already enjoy the benefits of `Accessible Web Applications`, we will
     show you how to apply your knowledge in the new and exciting world of Angular 2.
 
+.l-main-section
 :marked
-    ## A11y in a nutshell
+    ## A11y and ARIA in a nutshell
 
-    `Accessibility` is often referred to as `a11y`. This is because we want to say as lot while writing less. And
+    `Accessibility` is often referred to as `a11y`. This is because we want to say as lot while we write less. And
     as it has eleven letters, starts with an `a` and ends with a `y`, we shorten this word to `a11y`. We will
     refer to `a11y` when we actually want to say `accessibility`.
 
-    In short, `a11y` refers to creating web applications that everyone can use, including those with disabilities that would
-    ke web navigation hard or impossible when these principles are not applied.
+    In short, `a11y` refers to creating web applications that everyone can use.
 
-    If you are totally new to the concept you may want to have a look at what the folks are the `W3C` have to say about
-    [a11y](http://www.w3.org/WAI/intro/accessibility.php) to put the rest of the article into perspective. We will be
+    If you are totally new to the concept you may want to have a look at what the folks at the `W3C` have to say about
+    [a11y](http://www.w3.org/WAI/intro/accessibility.php), to put the rest of the article into perspective. We will be
     right here waiting for you when you come back.
 
-    `ARIA`, or `Accessible Rich Internet Applications` refers to translating general `a11y` concerns to
+    But what is that other word?
+
+    `ARIA`, or `Accessible Rich Internet Applications` refers to bringing `a11y` concepts right into
     internet applications like those we are building using Angular 2.
 
+.l-main-section
+:marked
+    ## Standard element vs. custom component
+
+    Angular 2 gives you a lot of power at your fingertips to create extremely powerful components. But spare a
+    thought for the standard `HTML` elements before you decide to build something new.
+
+    The makers of the browsers have spent a lot of time thinking about the very same issue that has brought
+    us to this page today and have provided you with a lot of functionality out-of-the-box when you make use of
+    standard `HTML` elements in your component templates.
+
+    We would like to suggest the following rule of thumb when building your applications:
+
+    >If there is already a standard element inside `HTML` providing the function that you are trying to build, use
+     that element instead of writing your own.
+
+    So, for example, if you want to accept user text input, use the `INPUT` element instead of contructing something new.
+    And when you do write new components, use the standard `HTML` elements in your templates as often as possible.
+
+    This way you have to think less about things like focus management, tabindex, etc. and have more time to think about
+    your code.
+
+    But, we know this is not always possible, so this guide will also show you what you can do to make your own
+    components as accessible as possible.
+
+    So without further ado, let us see how easy it is to get big accessibility gains in our applications!
+
 .l-main-section
 <a id="toc"></a>
 :marked
     ## Table of contents
 
-    [Using text as a label for a custom component](#custom-component-label)
+    [Accessible form control labels](#form-control-label)
 
     [Using keyboard shortcuts](#keyboard-shortcuts)
 
@@ -45,10 +74,12 @@ include ../_util-fns
     [Managing focus](#managin-focus)
 
 .l-main-section
-<a id="custom-component-label"></a>
+<a id="form-control-label"></a>
 :marked
     ## Using text as a label for a custom component
 
+
+
 .l-main-section
 <a id="keyboard-shortcuts"></a>
 :marked