Add support for web haptic feedback in Compose UI

Author: eymar

compose/ui/ui/src/webMain/kotlin/androidx/compose/ui/platform/DefaultHapticFeedback.web.kt

@@ -0,0 +1,72 @@
+/*
+ * Copyright 2026 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package androidx.compose.ui.platform
+
+import androidx.compose.ui.hapticfeedback.HapticFeedback
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import kotlin.js.ExperimentalWasmJsInterop
+import kotlin.js.JsArray
+import kotlin.js.JsNumber
+import kotlin.js.js
+import kotlin.js.toJsArray
+import kotlin.js.toJsNumber
+
+internal class WebHapticFeedback : HapticFeedback {
+    @OptIn(ExperimentalWasmJsInterop::class)
+    override fun performHapticFeedback(hapticFeedbackType: HapticFeedbackType) {
+        vibrate(vibrationPatternFor(hapticFeedbackType))
+    }
+}
+
+// TODO: to eventually avoid the hardcoded values, follow the new browser API proposal https://github.com/WICG/web-haptics
+// and rely on it once it's implemented
+@OptIn(ExperimentalWasmJsInterop::class)
+internal fun vibrationPatternFor(hapticFeedbackType: HapticFeedbackType): JsArray<JsNumber> =
+    when (hapticFeedbackType) {
+        HapticFeedbackType.Confirm -> vibrationPatternOf(18, 32, 36)
+        HapticFeedbackType.Reject -> vibrationPatternOf(18, 28, 18, 28, 18)
+        HapticFeedbackType.ContextClick,
+        HapticFeedbackType.GestureEnd,
+        HapticFeedbackType.GestureThresholdActivate,
+        HapticFeedbackType.LongPress,
+        HapticFeedbackType.ToggleOff,
+        HapticFeedbackType.ToggleOn,
+        HapticFeedbackType.VirtualKey -> vibrationPatternOf(12)
+        HapticFeedbackType.KeyboardTap,
+        HapticFeedbackType.SegmentFrequentTick,
+        HapticFeedbackType.SegmentTick,
+        HapticFeedbackType.TextHandleMove -> vibrationPatternOf(6)
+        else -> vibrationPatternOf(12)
+    }
+
+@OptIn(ExperimentalWasmJsInterop::class)
+private fun vibrationPatternOf(vararg durations: Int): JsArray<JsNumber> =
+    durations.map { it.toDouble().toJsNumber() }.toJsArray()
+
+//language=javascript
+@OptIn(ExperimentalWasmJsInterop::class)
+private fun vibrate(pattern: JsArray<JsNumber>) {
+    js(
+        """
+        if (typeof window !== 'undefined' &&
+            window.navigator != null &&
+            typeof window.navigator.vibrate === 'function') {
+            window.navigator.vibrate(pattern)
+        }
+        """
+    )
+}

compose/ui/ui/src/webMain/kotlin/androidx/compose/ui/window/ComposeWindowInternal.web.kt

@@ -53,11 +53,13 @@ import androidx.compose.ui.internal.focusExt
 import androidx.compose.ui.navigationevent.BackNavigationEventInput
 import androidx.compose.ui.platform.DefaultArchitectureComponentsOwner
 import androidx.compose.ui.platform.DefaultInputModeManager
+import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.platform.PlatformContext
 import androidx.compose.ui.platform.PlatformDragAndDropManager
 import androidx.compose.ui.platform.PlatformTextInputMethodRequest
 import androidx.compose.ui.platform.TextToolbar
 import androidx.compose.ui.platform.ViewConfiguration
+import androidx.compose.ui.platform.WebHapticFeedback
 import androidx.compose.ui.platform.WebTextInputService
 import androidx.compose.ui.platform.WebTextToolbar
 import androidx.compose.ui.platform.WebWakeLockManager
@@ -204,6 +206,8 @@ internal class ComposeWindow(
     @VisibleForTesting
     internal val archComponentsOwner = DefaultArchitectureComponentsOwner()
 
+    private val hapticFeedback = WebHapticFeedback()
+
     private val navigationEventInput = BackNavigationEventInput()
 
     private val canvasEvents = EventTargetListener(canvas)
@@ -464,6 +468,7 @@ internal class ComposeWindow(
         scene.setContent {
             CompositionLocalProvider(
                 LocalSystemTheme provides systemThemeObserver.currentSystemTheme.value,
+                LocalHapticFeedback provides hapticFeedback,
                 LocalInteropContainer provides interopContainer,
                 LocalActiveClipEventsTarget provides clipEventsTargetProvider,
                 content = {

compose/ui/ui/src/webTest/kotlin/androidx/compose/ui/platform/WebHapticFeedbackTest.kt

@@ -0,0 +1,75 @@
+@file:OptIn(kotlin.js.ExperimentalWasmJsInterop::class)
+
+/*
+ * Copyright 2026 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package androidx.compose.ui.platform
+
+import androidx.compose.ui.OnCanvasTests
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import kotlin.test.Test
+import kotlin.test.assertContentEquals
+import kotlin.test.assertIs
+
+class WebHapticFeedbackTest : OnCanvasTests {
+
+    @Test
+    fun composeWindowProvidesWebHapticFeedback() = runApplicationTest {
+        var hapticFeedback: Any? = null
+
+        createComposeWindow {
+            hapticFeedback = LocalHapticFeedback.current
+        }
+
+        assertIs<WebHapticFeedback>(hapticFeedback)
+    }
+
+    @Test
+    fun mapsConfirmToMultiPulsePattern() {
+        assertPatternEquals(
+            expected = listOf(18, 32, 36),
+            actual = vibrationPatternFor(HapticFeedbackType.Confirm)
+        )
+    }
+
+    @Test
+    fun mapsRejectToErrorPattern() {
+        assertPatternEquals(
+            expected = listOf(18, 28, 18, 28, 18),
+            actual = vibrationPatternFor(HapticFeedbackType.Reject)
+        )
+    }
+
+    @Test
+    fun mapsSelectionAndTextHandleTypesToShortPulse() {
+        assertPatternEquals(
+            expected = listOf(6),
+            actual = vibrationPatternFor(HapticFeedbackType.SegmentTick)
+        )
+        assertPatternEquals(
+            expected = listOf(6),
+            actual = vibrationPatternFor(HapticFeedbackType.TextHandleMove)
+        )
+    }
+
+    private fun assertPatternEquals(expected: List<Int>, actual: dynamic) {
+        val actualValues = js("Array.from(actual)").unsafeCast<Array<Double>>()
+        assertContentEquals(
+            expected.toTypedArray(),
+            actualValues.map(Double::toInt).toTypedArray()
+        )
+    }
+}