docs(cb-a11y): Content - Form controls

Author: AlmeroSteyn

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

@@ -39,9 +39,9 @@ <h3>Explicit labeling</h3>
             <hr>
         </header>
 
-        <a11y-input-explicit [uniqueId]="'forinput'">
-            Label for input:
-        </a11y-input-explicit>
+        <!-- #docregion cb-a11y-form-controls-input-explicit-usage -->
+        <a11y-input-explicit> Label for input:</a11y-input-explicit>
+        <!--#enddocregion-->
 
     </section>
     <section class="row well">
@@ -61,7 +61,7 @@ <h3>Labeling custom controls</h3>
             <hr>
         </header>
     </section>
-<a href="" [routerLink]="['Index']">Back to index...</a>
+    <a href="" [routerLink]="['Index']">Back to index...</a>
 </article>
 
 

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

@@ -1,9 +1,9 @@
+<!-- #docregion-->
 <div class="form-group">
-    <!-- #docregion cb-a11y-form-controls-input-explicit -->
     <label [attr.for]="uniqueId">
         <ng-content></ng-content>
     </label>
     <input [id]="uniqueId"
            class="form-control">
-    <!--#enddocregion-->
-</div>
+</div>
+<!--#enddocregion-->

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

@@ -316,7 +316,8 @@ code-example(language="html" escape="html" format="linenums").
     already furnished with id's.
 
     As alternative you can also use the `explicit labelling` syntax. For this syntax you are required to add an `id` to
-    the `HTML` form element to connect the label up.
+    the `HTML` form element to connect the label up via a `for / id` pairing [The `for` attribute of the label has to
+    contain the `id` of the input being labelled].
 
     This is also the reason why `implicit labelling` could come in very useful with reusable Angular 2 components.
     Remember that an `id` should be unique on a page, and any component where `explicit labelling` is used, will need
@@ -328,6 +329,28 @@ code-example(language="html" escape="html" format="linenums").
     **NOTE:** In the example code we are generating `GUID's` for id's to ensure that they are unique. You can use your
     own method to do this, as long as every page id is unique.
 
+    Your component template:
+
++makeExample('cb-a11y/ts/app/form-controls/a11y-input-explicit.component.html')
+
+:marked
+    Used as:
+
++makeExample('cb-a11y/ts/app/form-controls/a11y-form-controls.component.html','cb-a11y-form-controls-input-explicit-usage')
+
+:marked
+    Which is then rendered as:
+
+code-example(language="html" escape="html" format="linenums").
+    <a11y-input-explicit>
+        <div class="form-group">
+            <label for="c90c7f99-330e-4723-bfa8-9ab72a4bd435">
+                Label for input:
+            </label>
+            <input class="form-control"
+                   id="c90c7f99-330e-4723-bfa8-9ab72a4bd435">
+        </div>
+        </a11y-input-explicit>
 
 
 .l-main-section