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

Author: AlmeroSteyn

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

@@ -0,0 +1,4 @@
+div.edit-box{
+  height: auto;
+  width: 30%;
+}

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

@@ -3,9 +3,13 @@
   <label [id]="uniqueId">
     <ng-content></ng-content>
   </label>
-  <div role="textbox"
+  <div #divTextBox
+       role="textbox"
+       aria-multiline="false"
        [attr.aria-labelledby]="uniqueId"
-       class="form-control"
+       class="form-control edit-box"
+       [innerHTML]="outerValue"
+       (keypress)="onChange($event, divTextBox.innerHTML)"
        contenteditable></div>
 </div>
 <!-- #enddocregion -->

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

@@ -1,15 +1,59 @@
-import {Component, OnInit} from "angular2/core";
+import {Component, OnInit, Provider, forwardRef,} from "angular2/core";
 import {A11yHelper} from "../services/a11y-helper.service";
+import {NG_VALUE_ACCESSOR, ControlValueAccessor} from "angular2/common";
+
+const noop = () => {
+};
+
+const A11Y_CUSTOM_CONTROL_VALUE_ACCESSOR = new Provider(
+  NG_VALUE_ACCESSOR, {
+    useExisting: forwardRef(() => A11yCustomControl),
+    multi: true
+  });
 
 @Component({
   selector: 'a11y-custom-control',
-  templateUrl: './app/form-controls/a11y-custom-control.component.html'
+  templateUrl: './app/form-controls/a11y-custom-control.component.html',
+  styleUrls: ['./app/form-controls/a11y-custom-control.component.css'],
+  providers: [A11Y_CUSTOM_CONTROL_VALUE_ACCESSOR]
 })
-export class A11yCustomControl implements OnInit{
+export class A11yCustomControl implements OnInit, ControlValueAccessor {
+
+  uniqueId:string;
+
+  private _innerValue:any = '';
+  outerValue:string = '';
 
-  uniqueId: string;
+  private _onTouchedCallback:() => void = noop;
+  private _onChangeCallback:(_:any) => void = noop;
 
-  constructor(private _a11yHelper: A11yHelper){}
+  constructor(private _a11yHelper:A11yHelper) {
+  }
+
+  onChange(event:any, value:string) {
+    if (event.keyCode == 13) {
+      event.preventDefault();
+    }
+    else {
+      this._innerValue = this._a11yHelper.removeHtmlStringBreaks(value);
+      this._onChangeCallback(this._innerValue);
+    }
+  }
+
+  writeValue(value:any) {
+    if (value != this._innerValue) {
+      this._innerValue = value;
+      this.outerValue = value;
+    }
+  }
+
+  registerOnChange(fn:any) {
+    this._onChangeCallback = fn;
+  }
+
+  registerOnTouched(fn:any) {
+    this._onTouchedCallback = fn;
+  }
 
   ngOnInit():void {
     this.uniqueId = this._a11yHelper.generateUniqueIdString();

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

@@ -139,8 +139,14 @@ <h3>Labeling custom controls</h3>
       <hr>
     </header>
 
+    <a11y-input-wrapper>
+      <span class="wrapped-label">Write in this wrapped input:</span>
+      <input class="form-control" [(ngModel)]="inputWrappedModel">
+    </a11y-input-wrapper>
+
+    {{inputDivModel}}
     <!-- #docregion cb-a11y-form-controls-custom-control-usage -->
-    <a11y-custom-control>Write in this labelled div:</a11y-custom-control>
+    <a11y-custom-control [(ngModel)]="inputDivModel">Write in this labelled div:</a11y-custom-control>
     <!--#enddocregion-->
 
   </section>

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

@@ -3,6 +3,7 @@ import {CORE_DIRECTIVES, FORM_DIRECTIVES} from "angular2/common";
 import {A11yHelper} from "../services/a11y-helper.service";
 import {ROUTER_DIRECTIVES} from "angular2/router";
 import {A11yCustomControl} from "./a11y-custom-control.component";
+import {A11yInputWrapper} from "./a11y-input-wrapper.component";
 
 @Component({
   selector: 'a11y-form-controls',
@@ -11,7 +12,8 @@ import {A11yCustomControl} from "./a11y-custom-control.component";
     CORE_DIRECTIVES,
     FORM_DIRECTIVES,
     ROUTER_DIRECTIVES,
-    A11yCustomControl
+    A11yCustomControl,
+    A11yInputWrapper
   ]
 })
 export class A11yFormControls implements OnInit {
@@ -22,6 +24,8 @@ export class A11yFormControls implements OnInit {
 
   inputModel:string;
   inputExplicitModel: string;
+  inputWrappedModel: string;
+  inputDivModel: string = '';
   textModel:string;
   selectModel: string;
   searchModel: string;
@@ -43,6 +47,7 @@ export class A11yFormControls implements OnInit {
     console.log(this.inputExplicitModel);
     console.log(this.searchModel);
     console.log(this.filterModel);
+    console.log(this.inputWrappedModel);
   }
 
   isChecked(item:string):boolean {

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

@@ -0,0 +1,5 @@
+<div class="form-group">
+  <label><ng-content select=".wrapped-label"></ng-content>
+    <ng-content select="input"></ng-content>
+  </label>
+</div>

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

@@ -0,0 +1,9 @@
+import {Component} from "angular2/core";
+
+@Component({
+  selector: 'a11y-input-wrapper',
+  templateUrl: './app/form-controls/a11y-input-wrapper.component.html'
+})
+export class A11yInputWrapper{
+  
+}

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

@@ -84,6 +84,12 @@ export class A11yHelper {
   isStringInArray(stringArray: Array<string>, item: string): boolean {
     return stringArray.indexOf(item.toString()) != -1;
   }
+  
+  removeHtmlStringBreaks(inputValue: string):string{
+    return inputValue.replace(new RegExp('<div>', 'g'), '')
+      .replace(new RegExp('</div>', 'g'), '\n')
+      .replace(new RegExp('<br>', 'g'), '')
+  }
 
   private randomGuidSnippet():string {
     return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);