docs(cb-a11y): Content - Form controls

Author: AlmeroSteyn

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

@@ -10,4 +10,26 @@ hr {
 .background-contrast {
     background-color: #0143A3;
     color: #fff;
-}
+}
+
+/*This is a copy of the .form-control class in bootstrap
+to enable adding it to all form controls without to much
+noise in the examples.*/
+/*div:not(.radio):not(.checkbox) input, textarea, select {*/
+     /*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/form-controls/a11y-input.component.html

@@ -1,8 +1,8 @@
+<!-- #docregion-->
 <div class="form-group ">
-    <!-- #docregion cb-a11y-form-controls-input -->
     <label>
         <ng-content></ng-content>
         <input class="form-control">
     </label>
-    <!--#enddocregion-->
-</div>
+</div>
+<!--#enddocregion-->

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

@@ -60,6 +60,23 @@ include ../_util-fns
 
     So without further ado, let us see how easy it is to get big accessibility gains in our applications!
 
+.l-main-section
+:marked
+    ## Important note on styling in this chapter
+
+    The `container`, `row`, `col-xs-12`, `checkbox`, `radio`, `form-group`, `form-control`, and `btn` classes
+    come from [Twitter Boostrap](http://getbootstrap.com/css/). This is a purely cosmetic addition to prettify
+    the examples and to also show how in `a11y`, the content of our `HTML` is as important as the final presentation.
+
+    Just because something looks good, does not mean it is accessible. But here we strive to achieve both!
+
+.callout.is-important
+    header Angular Pages Do Not Require A Style Library
+    :marked
+     Angular makes no use of the `container`, `row`, `col-xs-12`, `checkbox`, `radio`, `form-group`, `form-control`,
+     and `btn` classes or the styles of any external library. Angular apps can use any CSS library
+     ... or none at all.
+
 .l-main-section
 <a id="toc"></a>
 :marked
@@ -111,13 +128,14 @@ code-example(language="html" escape="html").
     </label>
 
 :marked
-    Of course, here the `INPUT` element can be any native `HTML` form element. So let us see how we would use this with
-    the commonly used native `HTML` form elements in Angular&nbsp;2.
+    Of course, here the `INPUT` element can be any native `HTML` form element.
+
+    So let us see how we would write the commonly used native `HTML` form elements in our Angular&nbsp;2 components.
 
 :marked
     #### Inputs
 
-+makeExample('cb-a11y/ts/app/form-controls/a11y-input.component.html', 'cb-a11y-form-controls-input')
++makeExample('cb-a11y/ts/app/form-controls/a11y-input.component.html')
 
 :marked
     #### Textareas