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

Author: AlmeroSteyn

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

@@ -12,6 +12,17 @@ hr {
     color: #fff;
 }
 
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
 /*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.*/
@@ -32,4 +43,4 @@ noise in the examples.*/
      /*-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-form-controls.component.html

@@ -9,20 +9,25 @@ <h3>Implicit labeling</h3>
       <hr>
     </header>
 
+    <!-- #docregion cb-a11y-form-controls-input-implicit -->
     <div class="form-group">
       <label>Type something:
         <input class="form-control"
                [(ngModel)]="inputModel">
       </label>
     </div>
+    <!-- #enddocregion -->
 
+    <!-- #docregion cb-a11y-form-controls-textarea-implicit -->
     <div class="form-group">
       <label>Type some text:
         <input class="form-control"
                [(ngModel)]="textModel">
       </label>
     </div>
+    <!-- #enddocregion -->
 
+    <!-- #docregion cb-a11y-form-controls-checkboxes-implicit -->
     <fieldset class="form-group row">
       <legend class="col-xs-12">
         What do you like most about Angular 2?
@@ -37,7 +42,9 @@ <h3>Implicit labeling</h3>
         </label>
       </div>
     </fieldset>
+    <!-- #enddocregion -->
 
+    <!-- #docregion cb-a11y-form-controls-radiobuttons-implicit -->
     <fieldset class="form-group row">
       <legend class="col-xs-12">
         Choose your favourite Angular 2 language
@@ -54,7 +61,9 @@ <h3>Implicit labeling</h3>
         </label>
       </div>
     </fieldset>
+    <!-- #enddocregion -->
 
+    <!-- #docregion cb-a11y-form-controls-select-implicit -->
     <div class="form-group">
       <label>Why are interested in a11y?
         <select class="form-control"
@@ -66,6 +75,7 @@ <h3>Implicit labeling</h3>
         </select>
       </label>
     </div>
+    <!-- #enddocregion -->
 
     <button class="btn btn-primary" (click)="submitMe()">Submit</button>
 
@@ -77,6 +87,7 @@ <h3>Explicit labeling</h3>
       <hr>
     </header>
 
+    <!-- #docregion cb-a11y-form-controls-input-explicit -->
     <div class="form-group">
       <label for="inputexplicit">
         Label for input:
@@ -85,66 +96,43 @@ <h3>Explicit labeling</h3>
              [(ngModel)]="inputExplicitModel"
              class="form-control">
     </div>
+    <!-- #enddocregion -->
 
     <button class="btn btn-primary" (click)="submitMe()">Submit</button>
 
   </section>
 
-  <!--<section class="row well">-->
-  <!--<header>-->
-  <!--<h3>Implicit labeling</h3>-->
-  <!--<hr>-->
-  <!--</header>-->
-
-  <!--&lt;!&ndash; #docregion cb-a11y-form-controls-input-usage &ndash;&gt;-->
-  <!--<a11y-input>Type something:</a11y-input>-->
-  <!--&lt;!&ndash;#enddocregion&ndash;&gt;-->
-
-  <!--&lt;!&ndash; #docregion cb-a11y-form-controls-textarea-usage &ndash;&gt;-->
-  <!--<a11y-textarea>Type some text:</a11y-textarea>-->
-  <!--&lt;!&ndash;#enddocregion&ndash;&gt;-->
-
-  <!--&lt;!&ndash; #docregion cb-a11y-form-controls-checkboxes-usage &ndash;&gt;-->
-  <!--<a11y-checkboxes [checkboxModel]="checkBoxes" [checkboxName]="'likes'">-->
-  <!--What do you like most about Angular 2?-->
-  <!--</a11y-checkboxes>-->
-  <!--&lt;!&ndash;#enddocregion&ndash;&gt;-->
-
-  <!--&lt;!&ndash; #docregion cb-a11y-form-controls-radiobuttons-usage &ndash;&gt;-->
-  <!--<a11y-radiobuttons [radiobuttonModel]="radioButtons" [radiobuttonName]="'language'">-->
-  <!--Choose your favourite Angular 2 language:-->
-  <!--</a11y-radiobuttons>-->
-  <!--&lt;!&ndash;#enddocregion&ndash;&gt;-->
-
-  <!--&lt;!&ndash; #docregion cb-a11y-form-controls-select-usage &ndash;&gt;-->
-  <!--<a11y-select [optionsModel]="selectOptions">Why are you interested in a11y?</a11y-select>-->
-  <!--&lt;!&ndash;#enddocregion&ndash;&gt;-->
-
-  <!--</section>-->
-  <!--<section class="row well">-->
-  <!--<header>-->
-  <!--<h3>Explicit labeling</h3>-->
-  <!--<hr>-->
-  <!--</header>-->
-
-  <!--&lt;!&ndash; #docregion cb-a11y-form-controls-input-explicit-usage &ndash;&gt;-->
-  <!--<a11y-input-explicit> Label for input:</a11y-input-explicit>-->
-  <!--&lt;!&ndash;#enddocregion&ndash;&gt;-->
-
-  <!--</section>-->
   <section class="row well">
     <header>
       <h3>Hiding labels</h3>
       <hr>
     </header>
 
-    <!-- #docregion cb-a11y-form-controls-hidden-labels-usage -->
-    <a11y-hidden-labels [label1]="'Search:'"
-                        [label2]="'Filter:'">
-    </a11y-hidden-labels>
-    <!--#enddocregion-->
+    <!-- #docregion cb-a11y-form-controls-hidden-label-explicit -->
+    <div class="form-group">
+      <label class="visually-hidden" for="inputsearch">
+        Search:
+      </label>
+      <input id="inputsearch"
+             [(ngModel)]="searchModel"
+             placeholder="Search... (Label hidden with style)"
+             class="form-control">
+    </div>
+    <!-- #enddocregion -->
+
+    <!-- #docregion cb-a11y-form-controls-hidden-label-aria -->
+    <div class="form-group">
+      <input placeholder="Filter... (Labelled with aria-label)"
+             [(ngModel)]="filterModel"
+             aria-label="Filter:"
+             class="form-control">
+    </div>
+    <!-- #enddocregion -->
+
+    <button class="btn btn-primary" (click)="submitMe()">Submit</button>
 
   </section>
+
   <section class="row well">
     <header>
       <h3>Labeling custom controls</h3>

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

@@ -37,10 +37,12 @@ export class A11yFormControls implements OnInit {
   inputModel:string;
   inputExplicitModel: string;
   textModel:string;
-  radioModel:string = '2';
-  checkboxModel:Array<string> = ["1", "2"];
   selectModel: string;
+  searchModel: string;
+  filterModel: string;
 
+  radioModel:string = '2';
+  checkboxModel:Array<string> = ["1", "2"];
 
 
   constructor(private _a11yHelper:A11yHelper) {
@@ -53,26 +55,22 @@ export class A11yFormControls implements OnInit {
     console.log(this.radioModel);
     console.log(this.selectModel);
     console.log(this.inputExplicitModel);
+    console.log(this.searchModel);
+    console.log(this.filterModel);
   }
 
-  isChecked(entry:string):boolean {
-    return this.checkboxModel.indexOf(entry.toString()) != -1;
+  isChecked(item:string):boolean {
+    return this._a11yHelper.isStringInArray(this.checkboxModel, item);
   }
 
-  toggleCheckbox(entry:string):void {
-    var entryIndex = this.checkboxModel.indexOf(entry);
-    if (entryIndex != -1) {
-      this.checkboxModel.splice(entryIndex, 1);
-    } else {
-      this.checkboxModel.push(entry);
-    }
+  toggleCheckbox(item:string):void {
+    this._a11yHelper.toggleItemInArray(this.checkboxModel, item);
   }
 
   ngOnInit() {
     this.checkBoxes = this._a11yHelper.getCheckboxModel();
     this.radioButtons = this._a11yHelper.getRadiobuttonsModel();
     this.selectOptions = this._a11yHelper.getSelectOptions();
-
   }
 
 }

public/docs/_examples/cb-a11y/ts/app/services/a11y-helper.service.ts

@@ -2,77 +2,90 @@ import {Injectable} from "angular2/core";
 
 @Injectable()
 export class A11yHelper {
-    generateUniqueIdString():string {
-        return (this.randomGuidSnippet() +
-        this.randomGuidSnippet() + "-" +
-        this.randomGuidSnippet() + "-4" +
-        this.randomGuidSnippet().substr(0, 3) + "-" +
-        this.randomGuidSnippet() + "-" +
-        this.randomGuidSnippet() +
-        this.randomGuidSnippet() +
-        this.randomGuidSnippet()).toLowerCase();
-    }
+  generateUniqueIdString():string {
+    return (this.randomGuidSnippet() +
+    this.randomGuidSnippet() + "-" +
+    this.randomGuidSnippet() + "-4" +
+    this.randomGuidSnippet().substr(0, 3) + "-" +
+    this.randomGuidSnippet() + "-" +
+    this.randomGuidSnippet() +
+    this.randomGuidSnippet() +
+    this.randomGuidSnippet()).toLowerCase();
+  }
 
-    getCheckboxModel():any {
-        return [
-            {
-                name: 'Template syntax',
-                value: 0
-            },
-            {
-                name: 'Observables',
-                value: 1
-            },
-            {
-                name: 'Components',
-                value: 2
-            },
-            {
-                name: 'Forms',
-                value: 3
-            }
-        ];
-    }
+  getCheckboxModel():any {
+    return [
+      {
+        name: 'Template syntax',
+        value: 0
+      },
+      {
+        name: 'Observables',
+        value: 1
+      },
+      {
+        name: 'Components',
+        value: 2
+      },
+      {
+        name: 'Forms',
+        value: 3
+      }
+    ];
+  }
 
-    getRadiobuttonsModel():any {
-        return [
-            {
-                name: 'TypeScript',
-                value: 0
-            },
-            {
-                name: 'JavaScript',
-                value: 1
-            },
-            {
-                name: 'ES6',
-                value: 2
-            },
-            {
-                name: 'Dart',
-                value: 3
-            }
-        ];
-    }
+  getRadiobuttonsModel():any {
+    return [
+      {
+        name: 'TypeScript',
+        value: 0
+      },
+      {
+        name: 'JavaScript',
+        value: 1
+      },
+      {
+        name: 'ES6',
+        value: 2
+      },
+      {
+        name: 'Dart',
+        value: 3
+      }
+    ];
+  }
 
-    getSelectOptions(): any {
-        return [
-            {
-                name: 'Curiosity',
-                value: 0
-            },
-            {
-                name: 'Increased userbase',
-                value: 1
-            },
-            {
-                name: 'Legal reasons',
-                value: 2
-            }
-        ];
-    }
+  getSelectOptions():any {
+    return [
+      {
+        name: 'Curiosity',
+        value: 0
+      },
+      {
+        name: 'Increased userbase',
+        value: 1
+      },
+      {
+        name: 'Legal reasons',
+        value: 2
+      }
+    ];
+  }
 
-    private randomGuidSnippet():string {
-        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+  toggleItemInArray(stringArray:Array<string>, item:string): void {
+    var entryIndex = stringArray.indexOf(item);
+    if (entryIndex != -1) {
+      stringArray.splice(entryIndex, 1);
+    } else {
+      stringArray.push(item);
     }
-}
+  }
+
+  isStringInArray(stringArray: Array<string>, item: string): boolean {
+    return stringArray.indexOf(item.toString()) != -1;
+  }
+
+  private randomGuidSnippet():string {
+    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+  }
+}