From 839667dcf6becda087015edcb5468b8b2107d8c7 Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Fri, 15 Dec 2023 15:01:08 -0800
Subject: [PATCH] perf(ripple): don't process events in high contrast mode

PiperOrigin-RevId: 591368699
---
 ripple/internal/ripple.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/ripple/internal/ripple.ts b/ripple/internal/ripple.ts
index d68a9a387f..a772d97808 100644
--- a/ripple/internal/ripple.ts
+++ b/ripple/internal/ripple.ts
@@ -87,6 +87,14 @@ const EVENTS = [
  */
 const TOUCH_DELAY_MS = 150;
 
+/**
+ * Used to detect if HCM is active. Events do not process during HCM when the
+ * ripple is not displayed.
+ */
+const FORCED_COLORS = isServer
+  ? null
+  : window.matchMedia('(forced-colors: active)');
+
 /**
  * A ripple component.
  */
@@ -438,6 +446,11 @@ export class Ripple extends LitElement implements Attachable {
 
   /** @private */
   async handleEvent(event: Event) {
+    if (FORCED_COLORS?.matches) {
+      // Skip event logic since the ripple is `display: none`.
+      return;
+    }
+
     switch (event.type) {
       case 'click':
         this.handleClick();