fix(checkbox): Ensure ripple is activated on keydown (#241)

Fixes an issue where the ripple was not activated on keyDown within the
checkbox component.

packages/mdc-checkbox/index.js

@@ -16,6 +16,7 @@
 
 import {MDCComponent} from '@material/base';
 import {MDCRipple, MDCRippleFoundation} from '@material/ripple';
+import {getMatchesProperty} from '@material/ripple/util';
 import {getCorrectEventName} from '@material/animation';
 
 import MDCCheckboxFoundation from './foundation';
@@ -38,8 +39,10 @@ export class MDCCheckbox extends MDCComponent {
   }
 
   initRipple_() {
+    const MATCHES = getMatchesProperty(HTMLElement.prototype);
     const adapter = Object.assign(MDCRipple.createAdapter(this), {
       isUnbounded: () => true,
+      isSurfaceActive: () => this.nativeCb_[MATCHES](':active'),
       registerInteractionHandler: (type, handler) => this.nativeCb_.addEventListener(type, handler),
       deregisterInteractionHandler: (type, handler) => this.nativeCb_.removeEventListener(type, handler),
       computeBoundingRect: () => {

test/unit/mdc-checkbox/mdc-checkbox.test.js

@@ -24,6 +24,7 @@ import {createMockRaf} from '../helpers/raf';
 import {MDCCheckbox} from '../../../packages/mdc-checkbox';
 import {strings} from '../../../packages/mdc-checkbox/constants';
 import {getCorrectEventName} from '../../../packages/mdc-animation';
+import {getMatchesProperty} from '../../../packages/mdc-ripple/util';
 
 function getFixture() {
   return bel`
@@ -71,6 +72,26 @@ if (supportsCssVariables(window)) {
     component.destroy();
     raf.flush();
     t.false(root.classList.contains('mdc-ripple-upgraded'));
+    raf.restore();
+    t.end();
+  });
+
+  test('(regression) activates ripple on keydown when the input element surface is active', (t) => {
+    const raf = createMockRaf();
+    const {root} = setupTest();
+    const input = root.querySelector('input');
+    raf.flush();
+
+    const fakeMatches = td.func('.matches');
+    td.when(fakeMatches(':active')).thenReturn(true);
+    input[getMatchesProperty(HTMLElement.prototype)] = fakeMatches;
+
+    t.true(root.classList.contains('mdc-ripple-upgraded'));
+    domEvents.emit(input, 'keydown');
+    raf.flush();
+
+    t.true(root.classList.contains('mdc-ripple-upgraded--background-active'));
+    raf.restore();
     t.end();
   });
 }