From 062296dc36f8986837e98c45cd6facdd3e864461 Mon Sep 17 00:00:00 2001
From: Yuan Gao <tinagao@google.com>
Date: Fri, 4 Nov 2016 14:16:28 -0700
Subject: [PATCH] Add focus to checkbox, radio, button-toggle and slide-toggle

---
 .../slide-toggle/slide-toggle-demo.html       |  2 +-
 src/lib/button-toggle/button-toggle.spec.ts   | 10 ++++++++
 src/lib/button-toggle/button-toggle.ts        |  8 +++++++
 src/lib/checkbox/checkbox.html                |  3 ++-
 src/lib/checkbox/checkbox.spec.ts             |  9 +++++++
 src/lib/checkbox/checkbox.ts                  |  9 +++++++
 src/lib/radio/radio.spec.ts                   | 24 +++++++++++++++++++
 src/lib/radio/radio.ts                        |  9 +++++++
 src/lib/slide-toggle/slide-toggle.spec.ts     | 10 ++++++++
 src/lib/slide-toggle/slide-toggle.ts          |  8 +++++++
 10 files changed, 90 insertions(+), 2 deletions(-)

diff --git a/src/demo-app/slide-toggle/slide-toggle-demo.html b/src/demo-app/slide-toggle/slide-toggle-demo.html
index 0a1bcca960fc..03a1c71a03f0 100644
--- a/src/demo-app/slide-toggle/slide-toggle-demo.html
+++ b/src/demo-app/slide-toggle/slide-toggle-demo.html
@@ -26,4 +26,4 @@
 
   </form>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/src/lib/button-toggle/button-toggle.spec.ts b/src/lib/button-toggle/button-toggle.spec.ts
index 0841608e6a6a..5ea6b0faae32 100644
--- a/src/lib/button-toggle/button-toggle.spec.ts
+++ b/src/lib/button-toggle/button-toggle.spec.ts
@@ -500,6 +500,16 @@ describe('MdButtonToggle', () => {
       expect(changeSpy).toHaveBeenCalledTimes(2);
     }));
 
+    it('should focus on underlying input element when focus() is called', () => {
+      let nativeRadioInput = buttonToggleDebugElement.query(By.css('input')).nativeElement;
+      expect(document.activeElement).not.toBe(nativeRadioInput);
+
+      buttonToggleInstance.focus();
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(nativeRadioInput);
+    });
+
   });
 });
 
diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts
index 28d2f0b34d0d..f4db511ebe25 100644
--- a/src/lib/button-toggle/button-toggle.ts
+++ b/src/lib/button-toggle/button-toggle.ts
@@ -4,6 +4,7 @@ import {
     Component,
     ContentChildren,
     Directive,
+    ElementRef,
     EventEmitter,
     HostBinding,
     Input,
@@ -11,6 +12,7 @@ import {
     Optional,
     Output,
     QueryList,
+    ViewChild,
     ViewEncapsulation,
     forwardRef,
     AfterViewInit
@@ -266,6 +268,8 @@ export class MdButtonToggle implements OnInit {
     return this._change.asObservable();
   }
 
+  @ViewChild('input') _inputElement: ElementRef;
+
   constructor(@Optional() toggleGroup: MdButtonToggleGroup,
               @Optional() toggleGroupMultiple: MdButtonToggleGroupMultiple,
               public buttonToggleDispatcher: MdUniqueSelectionDispatcher) {
@@ -395,6 +399,10 @@ export class MdButtonToggle implements OnInit {
     // Preventing bubbling for the second event will solve that issue.
     event.stopPropagation();
   }
+
+  focus() {
+    this._inputElement.nativeElement.focus();
+  }
 }
 
 
diff --git a/src/lib/checkbox/checkbox.html b/src/lib/checkbox/checkbox.html
index c53bc700f0ae..fba084ce10a5 100644
--- a/src/lib/checkbox/checkbox.html
+++ b/src/lib/checkbox/checkbox.html
@@ -1,6 +1,7 @@
 <label class="md-checkbox-layout">
   <div class="md-checkbox-inner-container">
-    <input class="md-checkbox-input md-visually-hidden" type="checkbox"
+    <input #input
+           class="md-checkbox-input md-visually-hidden" type="checkbox"
            [id]="inputId"
            [required]="required"
            [checked]="checked"
diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts
index dfe107d0b1fc..81d6b00821dc 100644
--- a/src/lib/checkbox/checkbox.spec.ts
+++ b/src/lib/checkbox/checkbox.spec.ts
@@ -281,6 +281,15 @@ describe('MdCheckbox', () => {
       expect(inputElement.required).toBe(false);
     });
 
+    it('should focus on underlying input element when focus() is called', () => {
+      expect(document.activeElement).not.toBe(inputElement);
+
+      checkboxInstance.focus();
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(inputElement);
+    });
+
     describe('color behaviour', () => {
       it('should apply class based on color attribute', () => {
         testComponent.checkboxColor = 'primary';
diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts
index 1f6f768f54ba..81e64c45fb82 100644
--- a/src/lib/checkbox/checkbox.ts
+++ b/src/lib/checkbox/checkbox.ts
@@ -10,6 +10,7 @@ import {
     forwardRef,
     NgModule,
     ModuleWithProviders,
+    ViewChild,
 } from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
@@ -134,6 +135,9 @@ export class MdCheckbox implements ControlValueAccessor {
   /** Event emitted when the checkbox's `checked` value changes. */
   @Output() change: EventEmitter<MdCheckboxChange> = new EventEmitter<MdCheckboxChange>();
 
+  /** The native `<input type=checkbox> element */
+  @ViewChild('input') _inputElement: ElementRef;
+
   /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */
   onTouched: () => any = () => {};
 
@@ -321,6 +325,11 @@ export class MdCheckbox implements ControlValueAccessor {
     }
   }
 
+  focus() {
+    this._inputElement.nativeElement.focus();
+    this._onInputFocus();
+  }
+
   _onInputClick(event: Event) {
     // We have to stop propagation for click events on the visual hidden input element.
     // By default, when a user clicks on a label element, a generated click event will be
diff --git a/src/lib/radio/radio.spec.ts b/src/lib/radio/radio.spec.ts
index e9553888257a..4773555ba77e 100644
--- a/src/lib/radio/radio.spec.ts
+++ b/src/lib/radio/radio.spec.ts
@@ -189,6 +189,20 @@ describe('MdRadio', () => {
       expect(radioNativeElements[0].classList).not.toContain('md-radio-focused');
     });
 
+    it('should focus individual radio buttons', () => {
+      let nativeRadioInput = <HTMLElement> radioNativeElements[0].querySelector('input');
+
+      radioInstances[0].focus();
+      fixture.detectChanges();
+
+      expect(radioNativeElements[0].classList).toContain('md-radio-focused');
+
+      dispatchEvent('blur', nativeRadioInput);
+      fixture.detectChanges();
+
+      expect(radioNativeElements[0].classList).not.toContain('md-radio-focused');
+    });
+
     it('should update the group and radios when updating the group value', () => {
       expect(groupInstance.value).toBeFalsy();
 
@@ -550,6 +564,16 @@ describe('MdRadio', () => {
 
       expect(fruitRadioNativeInputs[0].getAttribute('aria-labelledby')).toBe('uvw');
     });
+
+    it('should focus on underlying input element when focus() is called', () => {
+      for (let i = 0; i < fruitRadioInstances.length; i++) {
+        expect(document.activeElement).not.toBe(fruitRadioNativeInputs[i]);
+        fruitRadioInstances[i].focus();
+        fixture.detectChanges();
+
+        expect(document.activeElement).toBe(fruitRadioNativeInputs[i]);
+      }
+    });
   });
 });
 
diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts
index 989f03ff5a9e..04d43c9a654b 100644
--- a/src/lib/radio/radio.ts
+++ b/src/lib/radio/radio.ts
@@ -15,6 +15,7 @@ import {
   forwardRef,
   NgModule,
   ModuleWithProviders,
+  ViewChild,
 } from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {
@@ -288,6 +289,9 @@ export class MdRadioButton implements OnInit {
   @Output()
   change: EventEmitter<MdRadioChange> = new EventEmitter<MdRadioChange>();
 
+  /** The native `<input type=radio> element */
+  @ViewChild('input') _inputElement: ElementRef;
+
   constructor(@Optional() radioGroup: MdRadioGroup,
               private _elementRef: ElementRef,
               public radioDispatcher: MdUniqueSelectionDispatcher) {
@@ -407,6 +411,11 @@ export class MdRadioButton implements OnInit {
     this._isFocused = true;
   }
 
+  focus() {
+    this._inputElement.nativeElement.focus();
+    this._onInputFocus();
+  }
+
   /** TODO: internal */
   _onInputBlur() {
     this._isFocused = false;
diff --git a/src/lib/slide-toggle/slide-toggle.spec.ts b/src/lib/slide-toggle/slide-toggle.spec.ts
index d9bf16609981..a1cda1e46435 100644
--- a/src/lib/slide-toggle/slide-toggle.spec.ts
+++ b/src/lib/slide-toggle/slide-toggle.spec.ts
@@ -336,6 +336,16 @@ describe('MdSlideToggle', () => {
       expect(inputElement.required).toBe(false);
     });
 
+    it('should focus on underlying input element when focus() is called', () => {
+      expect(slideToggleElement.classList).not.toContain('md-slide-toggle-focused');
+      expect(document.activeElement).not.toBe(inputElement);
+
+      slideToggle.focus();
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(inputElement);
+      expect(slideToggleElement.classList).toContain('md-slide-toggle-focused');
+    });
   });
 
   describe('custom template', () => {
diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts
index c858a5ef0d13..3afd6ea04bf0 100644
--- a/src/lib/slide-toggle/slide-toggle.ts
+++ b/src/lib/slide-toggle/slide-toggle.ts
@@ -10,6 +10,7 @@ import {
   AfterContentInit,
   NgModule,
   ModuleWithProviders,
+  ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
 import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
@@ -86,6 +87,8 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
   // Returns the unique id for the visual hidden input.
   getInputId = () => `${this.id || this._uniqueId}-input`;
 
+  @ViewChild('input') _inputElement: ElementRef;
+
   constructor(private _elementRef: ElementRef, private _renderer: Renderer) {}
 
   /** TODO: internal */
@@ -181,6 +184,11 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
     this.disabled = isDisabled;
   }
 
+  focus() {
+    this._inputElement.nativeElement.focus();
+    this._onInputFocus();
+  }
+
   @Input()
   get checked() {
     return !!this._checked;