docs(cb-a11y): Building examples - Form controls

Author: AlmeroSteyn

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

@@ -39,6 +39,11 @@ <h3>Explicit labeling</h3>
             <h3>Hiding labels</h3>
             <hr>
         </header>
+
+        <a11y-hidden-labels [label1]="'Search:'"
+                            [label2]="'Filter:'">
+        </a11y-hidden-labels>
+
     </section>
     <section class="row well">
         <header>

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

@@ -7,6 +7,7 @@ import {A11yHelper} from "./services/a11y-helper.service";
 import {A11yRadiobuttons} from "./a11y-radiobuttons.component";
 import {A11ySelect} from "./a11y-select.component";
 import {A11yTextarea} from "./a11y-textarea.component";
+import {A11yHiddenLabels} from "./a11y-hidden-labels.component";
 
 @Component({
     selector: 'a11y-form-controls',
@@ -19,7 +20,8 @@ import {A11yTextarea} from "./a11y-textarea.component";
         A11yCheckboxes,
         A11yRadiobuttons,
         A11ySelect,
-        A11yTextarea
+        A11yTextarea,
+        A11yHiddenLabels
     ]
 })
 export class A11yFormControls implements OnInit {

public/docs/_examples/cb-a11y/ts/app/a11y-hidden-labels.component.css

@@ -0,0 +1,14 @@
+label {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+input {
+    margin-bottom: 1em;
+}

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

@@ -0,0 +1,14 @@
+<div class="form-group">
+
+    <label [attr.for]="uniqueId">
+        {{label1}}
+    </label>
+    <input [id]="uniqueId"
+           placeholder="Search... (Label hidden with style)"
+           class="form-control">
+
+    <input placeholder="Filter... (Labelled with aria-label)"
+           [attr.aria-label]="label2"
+           class="form-control">
+
+</div>

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

@@ -0,0 +1,22 @@
+import {Component, OnInit, Input} from "angular2/core";
+import {A11yHelper} from "./services/a11y-helper.service";
+
+@Component({
+    selector: 'a11y-hidden-labels',
+    templateUrl: './app/a11y-hidden-labels.component.html',
+    styleUrls: ['./app/a11y-hidden-labels.component.css']
+})
+export class A11yHiddenLabels implements OnInit{
+    @Input()
+        label1:string;
+    @Input()
+        label2: string;
+
+    uniqueId:string;
+
+    constructor(private _a11yHelper:A11yHelper){}
+
+    ngOnInit(){
+        this.uniqueId = this._a11yHelper.generateUniqueIdString();
+    }
+}