feat(checkbox): Add touch target (#2067)

closes #2062

Author: trimox

demos/src/app/app-routing.module.ts

@@ -17,7 +17,7 @@ const routes: Routes = [
   {path: 'card-demo', loadChildren: () => import('./components/card-demo/card.module').then(m => m.CardModule)},
   {
     path: 'checkbox-demo', loadChildren: () =>
-      import('./components/checkbox-demo/checkbox.module').then(m => m.CheckboxModule)
+      import('./components/checkbox/module').then(m => m.CheckboxModule)
   },
   {
     path: 'chips-demo', loadChildren: () =>

demos/src/app/components/checkbox-demo/routing.module.ts

@@ -59,6 +59,10 @@ <h4 mdcSubtitle2>Properties</h4>
         <td>indeterminateToChecked: boolean</td>
         <td>Whether the checkbox should go to checked state or unchecked when toggled from indeterminate state.</td>
       </tr>
+      <tr>
+        <td>touch: boolean</td>
+        <td>Set the component touch target to 48 x 48 px.</td>
+      </tr>
     </tbody>
   </table>
 

demos/src/app/components/checkbox-demo/api.html renamed to demos/src/app/components/checkbox/api.html

@@ -11,7 +11,7 @@ export class Api {}
 export class Sass {}
 
 @Component({template: '<component-viewer></component-viewer>'})
-export class CheckboxDemo implements OnInit {
+export class Checkbox implements OnInit {
   @ViewChild(ComponentViewer, {static: true}) _componentViewer: ComponentViewer;
 
   ngOnInit(): void {
@@ -103,23 +103,15 @@ toggle(cb: MdcCheckbox): void {
   <mdc-checkbox class="demo-checkbox--custom-stroke-and-fill"></mdc-checkbox>
   <label>Custom Stroke and Fill</label>
 </mdc-form-field>`,
-    sass: `.demo-checkbox--custom-all {
-  $color: $material-color-red-500;
-
-  @include mdc-checkbox-focus-indicator-color($color);
-  @include mdc-states($color);
-  @include mdc-checkbox-container-colors(
-    $unmarked-stroke-color: $color,
-    $unmarked-fill-color: rgba($color, .25),
-    $marked-fill-color: $color,
-    $generate-keyframes: false);
-}
+    sass: `https://raw.githubusercontent.com/trimox/angular-mdc-web/master/demos/src/styles/_checkbox.scss`
+  };
 
-.demo-checkbox--custom-stroke-and-fill {
-  @include mdc-checkbox-container-colors(
-    $unmarked-stroke-color: $material-color-blue-500,
-    $marked-fill-color: $material-color-purple-500,
-    $generate-keyframes: false);
-}`
+  exampleAccessibility = {
+    html: `<div class="mdc-touch-target-wrapper">
+  <mdc-form-field>
+    <mdc-checkbox touch></mdc-checkbox>
+    <label>My Accessible Checkbox</label>
+  </mdc-form-field>
+</div>`
   };
 }

demos/src/app/components/checkbox-demo/checkbox-demo.ts renamed to demos/src/app/components/checkbox/checkbox.ts

@@ -41,15 +41,20 @@
     <button mdc-button (click)="toggle(cb)">Toggle</button>
   </div>
   <div class="demo-layout__row">
-    <button mdc-button (click)="cb.indeterminateToChecked = !cb.indeterminateToChecked">
-      Indeterminate To Checked: {{cb.indeterminateToChecked ? 'On' : 'Off'}}</button>
+    <button mdc-button
+      (click)="cb.indeterminateToChecked = !cb.indeterminateToChecked">
+      Indeterminate To Checked:
+      {{cb.indeterminateToChecked ? 'On' : 'Off'}}</button>
     <button mdc-button (click)="formField.alignEnd = !formField.alignEnd">RTL: {{formField.alignEnd ? 'On'
       : 'Off'}}</button>
-    <button mdc-button (click)="cb.disabled = !cb.disabled">Disabled: {{cb.disabled ? 'On' : 'Off'}}</button>
-    <button mdc-button (click)="cb.disableRipple = !cb.disableRipple">Ripple: {{!cb.disableRipple ? 'On' : 'Off'}}</button>
+    <button mdc-button (click)="cb.disabled = !cb.disabled">Disabled:
+      {{cb.disabled ? 'On' : 'Off'}}</button>
+    <button mdc-button (click)="cb.disableRipple = !cb.disableRipple">Ripple:
+      {{!cb.disableRipple ? 'On' : 'Off'}}</button>
   </div>
   <mdc-form-field #formField>
-    <mdc-checkbox #cb indeterminateToChecked (change)="onChange($event)"></mdc-checkbox>
+    <mdc-checkbox #cb indeterminateToChecked (change)="onChange($event)">
+    </mdc-checkbox>
     <label>Checkbox value is {{cb.checked}}</label>
   </mdc-form-field>
 
@@ -68,10 +73,32 @@ <h3 class="demo-content__headline">Theme</h3>
 
     <div class="demo-container">
       <mdc-form-field>
-        <mdc-checkbox class="demo-checkbox--custom-stroke-and-fill"></mdc-checkbox>
+        <mdc-checkbox class="demo-checkbox--custom-stroke-and-fill">
+        </mdc-checkbox>
         <label>Custom Stroke and Fill</label>
       </mdc-form-field>
     </div>
   </div>
   <example-viewer [example]="exampleTheme"></example-viewer>
+</div>
+
+<div class="demo-content">
+  <h3 class="demo-content__headline">Accessibility</h3>
+  <p>
+    Material Design spec advises that touch targets should be at least 48 x 48
+    px. To meet this requirement, add the `touch` property.
+  </p>
+  <p>
+    Note that the outer mdc-touch-target-wrapper element is only necessary if
+    you want to avoid potentially overlapping touch targets on adjacent elements
+    (due to collapsing margins). </p>
+  <div class="demo-layout__row">
+    <div class="mdc-touch-target-wrapper">
+      <mdc-form-field>
+        <mdc-checkbox touch></mdc-checkbox>
+        <label>My Accessible Checkbox</label>
+      </mdc-form-field>
+    </div>
+  </div>
+  <example-viewer [example]="exampleAccessibility"></example-viewer>
 </div>

demos/src/app/components/checkbox-demo/examples.html renamed to demos/src/app/components/checkbox/examples.html

@@ -0,0 +1,29 @@
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+
+import {Api, Examples, Sass, Checkbox} from './checkbox';
+
+export const ROUTE_DECLARATIONS = [
+  Api,
+  Examples,
+  Sass,
+  Checkbox
+];
+
+const ROUTES: Routes = [
+  {
+    path: '', component: Checkbox,
+    children: [
+      {path: '', redirectTo: 'api'},
+      {path: 'api', component: Api},
+      {path: 'sass', component: Sass},
+      {path: 'examples', component: Examples}
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(ROUTES)],
+  exports: [RouterModule]
+})
+export class RoutingModule {}

demos/src/app/components/checkbox-demo/checkbox.module.ts renamed to demos/src/app/components/checkbox/module.ts

@@ -56,7 +56,8 @@ export const MDC_CHECKBOX_CONTROL_VALUE_ACCESSOR: any = {
   exportAs: 'mdcCheckbox',
   host: {
     '[id]': 'id',
-    'class': 'mdc-checkbox'
+    'class': 'mdc-checkbox',
+    '[class.mdc-checkbox--touch]': 'touch',
   },
   template: `
   <input type="checkbox"
@@ -125,6 +126,15 @@ export class MdcCheckbox extends MDCComponent<MDCCheckboxFoundation> implements
   }
   private _checked: boolean = false;
 
+  @Input()
+  get touch(): boolean {
+    return this._touch;
+  }
+  set touch(value: boolean) {
+    this._touch = coerceBooleanProperty(value);
+  }
+  private _touch: boolean = false;
+
   @Input()
   get disabled(): boolean {
     return this._disabled;

demos/src/app/components/checkbox/routing.module.ts

@@ -334,6 +334,7 @@ describe('MdcCheckbox', () => {
       [id]="checkboxId"
       [(ngModel)]="checkboxValue"
       [checked]="checkboxValue"
+      [touch]="touch"
       [indeterminateToChecked]="indeterminateToChecked"
       [indeterminate]="indeterminate"
       [disableRipple]="disableRipple"
@@ -348,6 +349,7 @@ class SingleCheckbox {
   checkboxValue: boolean = false;
   indeterminateToChecked: boolean = true;
   disableRipple: boolean = false;
+  touch: boolean = false;
 }
 
 /** Simple test component with an aria-label set. */