fix(ripple): Register focus/blur handlers in IE (#3294)

(cherry picked from commit 1186f9b)

packages/mdc-checkbox/_variables.scss

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+@import "@material/ripple/variables";
 @import "@material/theme/variables";
 
 $mdc-checkbox-mark-color: mdc-theme-prop-value(on-primary);
@@ -28,8 +29,7 @@ $mdc-checkbox-mark-stroke-size: 2/15 * $mdc-checkbox-size;
 $mdc-checkbox-border-width: 2px;
 $mdc-checkbox-transition-duration: 90ms;
 $mdc-checkbox-item-spacing: 4px;
-$mdc-checkbox-ripple-opacity: .14;
-$mdc-checkbox-focus-indicator-opacity: .26;
+$mdc-checkbox-focus-indicator-opacity: map-get($mdc-ripple-dark-ink-opacities, focus);
 
 // Manual calculation done on SVG
 $mdc-checkbox-mark-path-length_: 29.7833385;

packages/mdc-checkbox/mdc-checkbox.scss

@@ -90,7 +90,7 @@
   @include mdc-checkbox__focus-indicator_;
 }
 
-.mdc-ripple-upgraded--unbounded .mdc-checkbox__background::before {
+.mdc-ripple-upgraded--background-focused .mdc-checkbox__background::before {
   @include mdc-checkbox__focus-indicator--ripple-upgraded-unbounded_;
 }
 

packages/mdc-radio/mdc-radio.scss

@@ -17,6 +17,7 @@
 @import "@material/animation/functions";
 @import "@material/ripple/common";
 @import "@material/ripple/mixins";
+@import "@material/ripple/variables";
 @import "./functions";
 @import "./mixins";
 @import "./variables";
@@ -108,7 +109,7 @@
   }
 
   // stylelint-disable plugin/selector-bem-pattern
-  &.mdc-ripple-upgraded {
+  &.mdc-ripple-upgraded--background-focused {
     .mdc-radio__background::before {
       content: none;
     }
@@ -164,7 +165,7 @@
   + .mdc-radio__background::before {
     transform: scale(2, 2);
     transition: mdc-radio-enter(opacity), mdc-radio-enter(transform);
-    opacity: .26;
+    opacity: map-get($mdc-ripple-dark-ink-opacities, focus);
   }
 }
 

packages/mdc-ripple/foundation.js

@@ -176,7 +176,7 @@ class MDCRippleFoundation extends MDCFoundation {
    * @return {boolean}
    * @private
    */
-  isSupported_() {
+  supportsPressRipple_() {
     return this.adapter_.browserSupportsCssVars();
   }
 
@@ -196,57 +196,61 @@ class MDCRippleFoundation extends MDCFoundation {
 
   /** @override */
   init() {
-    if (!this.isSupported_()) {
-      return;
-    }
-    this.registerRootHandlers_();
+    const supportsPressRipple = this.supportsPressRipple_();
 
-    const {ROOT, UNBOUNDED} = MDCRippleFoundation.cssClasses;
-    requestAnimationFrame(() => {
-      this.adapter_.addClass(ROOT);
-      if (this.adapter_.isUnbounded()) {
-        this.adapter_.addClass(UNBOUNDED);
-        // Unbounded ripples need layout logic applied immediately to set coordinates for both shade and ripple
-        this.layoutInternal_();
-      }
-    });
+    this.registerRootHandlers_(supportsPressRipple);
+
+    if (supportsPressRipple) {
+      const {ROOT, UNBOUNDED} = MDCRippleFoundation.cssClasses;
+      requestAnimationFrame(() => {
+        this.adapter_.addClass(ROOT);
+        if (this.adapter_.isUnbounded()) {
+          this.adapter_.addClass(UNBOUNDED);
+          // Unbounded ripples need layout logic applied immediately to set coordinates for both shade and ripple
+          this.layoutInternal_();
+        }
+      });
+    }
   }
 
   /** @override */
   destroy() {
-    if (!this.isSupported_()) {
-      return;
-    }
+    if (this.supportsPressRipple_()) {
+      if (this.activationTimer_) {
+        clearTimeout(this.activationTimer_);
+        this.activationTimer_ = 0;
+        const {FG_ACTIVATION} = MDCRippleFoundation.cssClasses;
+        this.adapter_.removeClass(FG_ACTIVATION);
+      }
 
-    if (this.activationTimer_) {
-      clearTimeout(this.activationTimer_);
-      this.activationTimer_ = 0;
-      const {FG_ACTIVATION} = MDCRippleFoundation.cssClasses;
-      this.adapter_.removeClass(FG_ACTIVATION);
+      const {ROOT, UNBOUNDED} = MDCRippleFoundation.cssClasses;
+      requestAnimationFrame(() => {
+        this.adapter_.removeClass(ROOT);
+        this.adapter_.removeClass(UNBOUNDED);
+        this.removeCssVars_();
+      });
     }
 
     this.deregisterRootHandlers_();
     this.deregisterDeactivationHandlers_();
-
-    const {ROOT, UNBOUNDED} = MDCRippleFoundation.cssClasses;
-    requestAnimationFrame(() => {
-      this.adapter_.removeClass(ROOT);
-      this.adapter_.removeClass(UNBOUNDED);
-      this.removeCssVars_();
-    });
   }
 
-  /** @private */
-  registerRootHandlers_() {
-    ACTIVATION_EVENT_TYPES.forEach((type) => {
-      this.adapter_.registerInteractionHandler(type, this.activateHandler_);
-    });
+  /**
+   * @param {boolean} supportsPressRipple Passed from init to save a redundant function call
+   * @private
+   */
+  registerRootHandlers_(supportsPressRipple) {
+    if (supportsPressRipple) {
+      ACTIVATION_EVENT_TYPES.forEach((type) => {
+        this.adapter_.registerInteractionHandler(type, this.activateHandler_);
+      });
+      if (this.adapter_.isUnbounded()) {
+        this.adapter_.registerResizeHandler(this.resizeHandler_);
+      }
+    }
+
     this.adapter_.registerInteractionHandler('focus', this.focusHandler_);
     this.adapter_.registerInteractionHandler('blur', this.blurHandler_);
-
-    if (this.adapter_.isUnbounded()) {
-      this.adapter_.registerResizeHandler(this.resizeHandler_);
-    }
   }
 
   /**

test/unit/mdc-ripple/foundation.test.js

@@ -98,11 +98,13 @@ testFoundation('#init does not register a resize handler for bounded ripple', ({
   td.verify(adapter.registerResizeHandler(td.matchers.isA(Function)), {times: 0});
 });
 
-testFoundation('#init does not register events if CSS custom properties not supported', ({foundation, adapter}) => {
+testFoundation('#init only registers focus/blur if CSS custom properties not supported', ({foundation, adapter}) => {
   td.when(adapter.browserSupportsCssVars()).thenReturn(false);
   foundation.init();
 
-  td.verify(adapter.registerInteractionHandler(td.matchers.isA(String), td.matchers.isA(Function)), {times: 0});
+  td.verify(adapter.registerInteractionHandler(td.matchers.isA(String), td.matchers.isA(Function)), {times: 2});
+  td.verify(adapter.registerInteractionHandler('focus', td.matchers.isA(Function)));
+  td.verify(adapter.registerInteractionHandler('blur', td.matchers.isA(Function)));
 });
 
 testFoundation('#destroy unregisters all bound interaction handlers', ({foundation, adapter}) => {
@@ -185,14 +187,16 @@ testFoundation('#destroy clears the timer if activation is interrupted',
     assert.equal(foundation.activationTimer_, 0);
   });
 
-testFoundation('#destroy does nothing if CSS custom properties are not supported', ({foundation, adapter, mockRaf}) => {
+testFoundation('#destroy when CSS custom properties are not supported', ({foundation, adapter, mockRaf}) => {
   const isA = td.matchers.isA;
   td.when(adapter.browserSupportsCssVars()).thenReturn(false);
   foundation.destroy();
   mockRaf.flush();
 
-  td.verify(adapter.deregisterInteractionHandler(isA(String), isA(Function)), {times: 0});
-  td.verify(adapter.deregisterResizeHandler(isA(Function)), {times: 0});
+  // #destroy w/o CSS vars still calls event deregistration functions (to deregister focus/blur; the rest are no-ops)
+  td.verify(adapter.deregisterInteractionHandler('focus', isA(Function)));
+  td.verify(adapter.deregisterInteractionHandler('blur', isA(Function)));
+  // #destroy w/o CSS vars doesn't change any CSS classes or custom properties
   td.verify(adapter.removeClass(isA(String)), {times: 0});
   td.verify(adapter.updateCssVariable(isA(String), isA(String)), {times: 0});
 });