doc(cb-a11y): Labelling form controls: content

Author: AlmeroSteyn

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

@@ -21,8 +21,8 @@ <h3>Implicit labeling</h3>
     <!-- #docregion cb-a11y-form-controls-textarea-implicit -->
     <div class="form-group">
       <label>Type some text:
-        <input class="form-control"
-               [(ngModel)]="textModel">
+        <textarea class="form-control"
+               [(ngModel)]="textModel"></textarea>
       </label>
     </div>
     <!-- #enddocregion -->
@@ -47,7 +47,7 @@ <h3>Implicit labeling</h3>
     <!-- #docregion cb-a11y-form-controls-radiobuttons-implicit -->
     <fieldset class="form-group row">
       <legend class="col-xs-12">
-        Choose your favourite Angular 2 language
+        Choose your favourite Angular 2 language:
       </legend>
       <div *ngFor="#radiobutton of radioButtons"
            class="radio col-xs-12">

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

@@ -64,7 +64,7 @@ include ../_util-fns
     that element instead of writing your own.
 
 :marked
-  So, for example, if you want to accept user text input, use the `INPUT` element instead of contructing something new.
+  So, for example, if you want to accept user text input, use the `input` element instead of contructing something new.
 
   This way you have to think less about things like focus management, tabindex, etc. and have more time to think about
   your code.
@@ -166,194 +166,34 @@ code-example(language="html" escape="html").
   </label>
 
 :marked
-  Easy, isn't it? Of course, here the `INPUT` element can be any native `HTML` form element.
+  Easy, isn't it? Of course, here the `input` element can be any native `HTML` form element.
 
   Let us now explore how we can use `implicit labelling` to decorate the commonly used native `HTML` form elements
   in our Angular&nbsp;2 components.
 
 :marked
-  #### Inputs
+  #### Inputs and textareas
 
-  Component template:
-
-+makeExample('cb-a11y/ts/app/form-controls/a11y-input.component.html')
-
-:marked
-  User writes:
-
-+makeExample('cb-a11y/ts/app/form-controls/a11y-form-controls.component.html','cb-a11y-form-controls-input-usage')
-
-:marked
-  Rendered out:
-
-code-example(language="html" escape="html" format="linenums").
-  <a11y-input>
-      <div class="form-group ">
-          <label>
-              Type something:
-              <input class="form-control">
-          </label>
-      </div>
-  </a11y-input>
-
-:marked
-  #### Textareas
-
-  Component template:
-
-+makeExample('cb-a11y/ts/app/form-controls/a11y-textarea.component.html')
-
-:marked
-  User writes:
-
-+makeExample('cb-a11y/ts/app/form-controls/a11y-form-controls.component.html','cb-a11y-form-controls-textarea-usage')
-
-:marked
-  Rendered out:
-
-code-example(language="html" escape="html" format="linenums").
-  <a11y-textarea>
-      <div class="form-group">
-          <label>Type some text:
-              <textarea class="form-control"></textarea>
-          </label>
-      </div>
-  </a11y-textarea>
-
-:marked
-  #### Checkboxes
-
-.l-sub-section
-  :marked
-    Because of the many `input` fields making up a `checkbox group`, the usual rule applies for each input but the
-    entire group also needs labelled and this is done by using `fieldset` and `legend`.
-
-:marked
-  Component template:
-
-+makeExample('cb-a11y/ts/app/form-controls/a11y-checkboxes.component.html')
-
-:marked
-  User writes:
-
-+makeExample('cb-a11y/ts/app/form-controls/a11y-form-controls.component.html','cb-a11y-form-controls-checkboxes-usage')
++makeTabs('cb-a11y/ts/app/form-controls/a11y-form-controls.component.html, cb-a11y/ts/app/form-controls/a11y-form-controls.component.html', 
+'cb-a11y-form-controls-input-implicit,cb-a11y-form-controls-textarea-implicit', 
+'Implicitly labelled input,Implicitly labelled textarea')
 
 :marked
-  Rendered out:
-
-code-example(language="html" escape="html" format="linenums").
-  <a11y-checkboxes>
-      <fieldset class="form-group row">
-          <legend class="col-xs-12">
-                  What do you like most about Angular 2?
-          </legend>
-          <div class="checkbox col-xs-12">
-              <label>
-                  <input type="checkbox" value="0" name="likes">
-                  Template syntax
-              </label>
-          </div>
-          <div class="checkbox col-xs-12">
-              <label>
-                  <input type="checkbox" value="1" name="likes">
-                  Observables
-              </label>
-          </div>
-          <div class="checkbox col-xs-12">
-              <label>
-                  <input type="checkbox" value="2" name="likes">
-                  Components
-              </label>
-          </div>
-          <div class="checkbox col-xs-12">
-              <label>
-                  <input type="checkbox" value="3" name="likes">
-                  Forms
-              </label>
-          </div>
-      </fieldset>
-  </a11y-checkboxes>
-
-:marked
-  #### Radiobuttons
+  #### Checkboxes and radiobuttons
 
 .l-sub-section
   :marked
-    As with the `checkbox group`, a `radiobutton group`, is also labelled using `fieldset` and `legend`.
+    Because of the many `input` fields making up a `checkbox group` or `radiobutton group`, the usual rule applies 
+    for each input but the entire group also needs labelled and this is done by using `fieldset` and `legend`.
 
-:marked
-  Component template:
-
-+makeExample('cb-a11y/ts/app/form-controls/a11y-radiobuttons.component.html')
-
-:marked
-  User writes:
-
-+makeExample('cb-a11y/ts/app/form-controls/a11y-form-controls.component.html','cb-a11y-form-controls-radiobuttons-usage')
-
-:marked
-  Rendered out:
-
-code-example(language="html" escape="html" format="linenums").
-  <a11y-radiobuttons>
-      <fieldset class="form-group row">
-          <legend class="col-xs-12">
-              Choose your favourite Angular 2 language:
-          </legend>
-          <div class="radio col-xs-12">
-              <label>
-                  <input type="radio" value="0" name="language">
-                  TypeScript
-              </label>
-          </div>
-          <div class="radio col-xs-12">
-              <label>
-                  <input type="radio" value="1" name="language">
-                  JavaScript
-              </label>
-          </div>
-          <div class="radio col-xs-12">
-              <label>
-                  <input type="radio" value="2" name="language">
-                  ES6
-              </label>
-          </div>
-          <div class="radio col-xs-12">
-              <label>
-                  <input type="radio" value="3" name="language">
-                  Dart
-              </label>
-          </div>
-      </fieldset>
-  </a11y-radiobuttons>
++makeTabs('cb-a11y/ts/app/form-controls/a11y-form-controls.component.html, cb-a11y/ts/app/form-controls/a11y-form-controls.component.html',
+'cb-a11y-form-controls-checkboxes-implicit,cb-a11y-form-controls-radiobuttons-implicit',
+'Implicitly labelled Checkboxes,Implicitly labelled Radiobuttons')
 
 :marked
   #### Select lists
 
-  Component template:
-
-+makeExample('cb-a11y/ts/app/form-controls/a11y-select.component.html')
-
-:marked
-  User writes:
-
-+makeExample('cb-a11y/ts/app/form-controls/a11y-form-controls.component.html','cb-a11y-form-controls-select-usage')
-
-:marked
-  Rendered out:
-
-code-example(language="html" escape="html" format="linenums").
-  <a11y-select>
-      <div class="form-group">
-          <label>Why are you interested in a11y?
-              <select class="form-control">
-                  <option value="0">Curiosity</option>
-                  <option value="1">Increased userbase</option>
-                  <option value="2">Legal reasons</option>
-              </select>
-          </label>
-      </div>
-  </a11y-select>
++makeExample('cb-a11y/ts/app/form-controls/a11y-form-controls.component.html','cb-a11y-form-controls-select-implicit')
 
 :marked
   ### Explicit labelling
@@ -371,7 +211,7 @@ code-example(language="html" escape="html" format="linenums").
   template, will need a way ensure that its elements are uniquely labelled, unless it is certain that the component
   will only be used once per page.
 
-  As an example, we will only look at adding an `explicit label` to an `INPUT`. The examples under the `implicit labelling`
+  As an example, we will only look at adding an `explicit label` to an `input`. The examples under the `implicit labelling`
   section can then easily be adjusted to use this syntax.
 
 .l-sub-section