From 1570fbbe5cbc35518ed1f7807eb7e4451767eee9 Mon Sep 17 00:00:00 2001
From: tinayuangao <tinagao@google.com>
Date: Mon, 31 Jul 2017 11:10:37 -0700
Subject: [PATCH] a11y(checkbox): Add checkbox accessibility demo page (#5921)

* use real world examples for checkbox

* Checkbox a11y demo

* remove pseudo checkbox

* address comments
---
 src/demo-app/a11y/a11y-module.ts              |  2 +
 src/demo-app/a11y/button/button-a11y.html     | 58 +++++++++----------
 src/demo-app/a11y/checkbox/checkbox-a11y.html | 36 +++++++++++-
 src/demo-app/a11y/checkbox/checkbox-a11y.scss |  3 +
 src/demo-app/a11y/checkbox/checkbox-a11y.ts   | 46 ++++++++++++++-
 5 files changed, 113 insertions(+), 32 deletions(-)

diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts
index b3b2ae84f72..dd07589c06b 100644
--- a/src/demo-app/a11y/a11y-module.ts
+++ b/src/demo-app/a11y/a11y-module.ts
@@ -26,6 +26,8 @@ export class AccessibilityRoutingModule {}
     ReactiveFormsModule,
     AccessibilityRoutingModule,
     DemoMaterialModule,
+    FormsModule,
+    ReactiveFormsModule,
   ],
   declarations: [
     AccessibilityDemo,
diff --git a/src/demo-app/a11y/button/button-a11y.html b/src/demo-app/a11y/button/button-a11y.html
index 2650b1c38ab..8167528a18c 100644
--- a/src/demo-app/a11y/button/button-a11y.html
+++ b/src/demo-app/a11y/button/button-a11y.html
@@ -1,31 +1,29 @@
-<div class="demo-button">
-  <section>
-    <h2>Button elements</h2>
-    <button md-button>Check</button>
-    <button md-raised-button>raised</button>
-    <button md-fab aria-label="Activate floating action style button">
-      <md-icon class="md-24">check</md-icon>
-    </button>
-    <button md-mini-fab aria-label="Activate mini floating action style button">
-      <md-icon class="md-24">check</md-icon>
-    </button>
-    <button md-icon-button aria-label="Activate icon style button">
-      <md-icon class="md-24">check</md-icon>
-    </button>
-  </section>
+<section>
+  <h2>Button elements</h2>
+  <button md-button>check</button>
+  <button md-raised-button>raised</button>
+  <button md-fab aria-label="Activate floating action style button">
+    <md-icon class="md-24">check</md-icon>
+  </button>
+  <button md-mini-fab aria-label="Activate mini floating action style button">
+    <md-icon class="md-24">check</md-icon>
+  </button>
+  <button md-icon-button aria-label="Activate icon style button">
+    <md-icon class="md-24">check</md-icon>
+  </button>
+</section>
 
-  <section>
-    <h2>Anchor elements</h2>
-    <a href="http://www.google.com" md-button color="primary">Google search</a>
-    <a href="http://www.google.com" md-raised-button>Google search</a>
-    <a href="http://www.google.com" md-fab aria-label="Activate floating action style link">
-      <md-icon class="md-24">check</md-icon>
-    </a>
-    <a href="http://www.google.com" md-mini-fab aria-label="Activate mini floating action style link">
-      <md-icon class="md-24">check</md-icon>
-    </a>
-    <a md-icon-button aria-label="Activate icon style link">
-      <md-icon class="md-24">check</md-icon>
-    </a>
-  </section>
-</div>
+<section>
+  <h2>Anchor elements</h2>
+  <a href="http://www.google.com" md-button color="primary">Google search</a>
+  <a href="http://www.google.com" md-raised-button>Google search</a>
+  <a href="http://www.google.com" md-fab aria-label="Activate floating action style link">
+    <md-icon class="md-24">check</md-icon>
+  </a>
+  <a href="http://www.google.com" md-mini-fab aria-label="Activate mini floating action style link">
+    <md-icon class="md-24">check</md-icon>
+  </a>
+  <a md-icon-button aria-label="Activate icon style link">
+    <md-icon class="md-24">check</md-icon>
+  </a>
+</section>
diff --git a/src/demo-app/a11y/checkbox/checkbox-a11y.html b/src/demo-app/a11y/checkbox/checkbox-a11y.html
index d5b8931fa9b..458c201bb40 100644
--- a/src/demo-app/a11y/checkbox/checkbox-a11y.html
+++ b/src/demo-app/a11y/checkbox/checkbox-a11y.html
@@ -1 +1,35 @@
-Checkbox Placeholder
\ No newline at end of file
+<section>
+  <h2>Checkbox without label</h2>
+  <md-checkbox aria-label="A single checkbox with no label example"></md-checkbox>
+</section>
+<section>
+  <h2>Standalone checkbox</h2>
+  <div>
+    <md-checkbox>Yes, I agree to the terms and conditions</md-checkbox>
+  </div>
+  <div>
+    <md-checkbox [disabled]="true">No, I do not agree to the terms and conditions</md-checkbox>
+  </div>
+  <div>
+    <md-checkbox [indeterminate]="true">A partially done task</md-checkbox>
+  </div>
+</section>
+
+<section>
+  <h2>Nested checklist</h2>
+    <div *ngFor="let task of tasks">
+      <md-checkbox [(ngModel)]="task.completed"
+                   [checked]="allComplete(task)"
+                   [indeterminate]="someComplete(task.subtasks)"
+                   (change)="setAllCompleted(task.subtasks, $event.checked)">
+        {{task.name}}
+      </md-checkbox>
+      <div class="sub-list">
+        <div *ngFor="let subtask of task.subtasks">
+          <md-checkbox [(ngModel)]="subtask.completed">
+            {{subtask.name}}
+          </md-checkbox>
+        </div>
+      </div>
+    </div>
+</section>
diff --git a/src/demo-app/a11y/checkbox/checkbox-a11y.scss b/src/demo-app/a11y/checkbox/checkbox-a11y.scss
index e69de29bb2d..174586cfab6 100644
--- a/src/demo-app/a11y/checkbox/checkbox-a11y.scss
+++ b/src/demo-app/a11y/checkbox/checkbox-a11y.scss
@@ -0,0 +1,3 @@
+.sub-list {
+  margin-left: 20px;
+}
diff --git a/src/demo-app/a11y/checkbox/checkbox-a11y.ts b/src/demo-app/a11y/checkbox/checkbox-a11y.ts
index b860479e1cd..b401f065a98 100644
--- a/src/demo-app/a11y/checkbox/checkbox-a11y.ts
+++ b/src/demo-app/a11y/checkbox/checkbox-a11y.ts
@@ -1,5 +1,10 @@
 import {Component} from '@angular/core';
 
+export interface Task {
+  name: string;
+  completed: boolean;
+  subtasks?: Task[];
+}
 
 @Component({
   moduleId: module.id,
@@ -8,5 +13,44 @@ import {Component} from '@angular/core';
   styleUrls: ['checkbox-a11y.css'],
 })
 export class CheckboxAccessibilityDemo {
-  // TODO(tinayuangao): Add use cases
+
+  tasks: Task[] = [
+    {
+      name: 'Reminders',
+      completed: false,
+      subtasks: [
+        { name: 'Cook Dinner', completed: false },
+        { name: 'Read the Material Design Spec', completed: false },
+        { name: 'Upgrade Application to Angular', completed: false }
+      ]
+    },
+    {
+      name: 'Groceries',
+      completed: false,
+      subtasks: [
+        { name: 'Organic Eggs', completed: false },
+        { name: 'Protein Powder', completed: false },
+        { name: 'Almond Meal Flour', completed: false }
+      ]
+    }
+  ];
+
+  allComplete(task: Task): boolean {
+    let subtasks = task.subtasks;
+
+    if (!subtasks) {
+      return false;
+    }
+
+    return subtasks.every(t => t.completed);
+  }
+
+  someComplete(tasks: Task[]): boolean {
+    const numComplete = tasks.filter(t => t.completed).length;
+    return numComplete > 0 && numComplete < tasks.length;
+  }
+
+  setAllCompleted(tasks: Task[], completed: boolean) {
+    tasks.forEach(t => t.completed = completed);
+  }
 }