From 4a3528c26ee0d17603e27922cd899421db783464 Mon Sep 17 00:00:00 2001
From: Shane Osbourne <shane.osbourne8@gmail.com>
Date: Mon, 21 Oct 2024 12:02:00 +0100
Subject: [PATCH] duckplayer: remove label click trigger on mobile (#1121)

* duckplayer: remove label click trigger on mobile

* remove pointer events for the label

* allow animations

---------

Co-authored-by: Shane Osbourne <sosbourne@duckduckgo.com>
---
 .../pages/duckplayer/app/components/Switch.jsx |  4 +++-
 .../app/components/SwitchBarMobile.jsx         | 18 +++++++++++-------
 .../app/components/SwitchBarMobile.module.css  |  7 ++++++-
 special-pages/tests/duckplayer.spec.js         |  2 +-
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/special-pages/pages/duckplayer/app/components/Switch.jsx b/special-pages/pages/duckplayer/app/components/Switch.jsx
index 2b53ffdb3..ac27205f8 100644
--- a/special-pages/pages/duckplayer/app/components/Switch.jsx
+++ b/special-pages/pages/duckplayer/app/components/Switch.jsx
@@ -9,12 +9,14 @@ import cn from "classnames";
  * @param {boolean} props.checked - Indicates whether the switch is checked or not.
  * @param {() => void} props.onChange - The callback function to be called when the switch is toggled.
  * @param {ImportMeta['platform']} props.platformName - The callback function to be called when the switch is toggled.
+ * @param {string} props.id
  */
-export function Switch({ checked, onChange, platformName = 'ios' }) {
+export function Switch({ checked, onChange, id, platformName = 'ios' }) {
     return (
         <button role="switch"
                 aria-checked={checked}
                 onClick={onChange}
+                id={id}
                 className={cn(styles.switch, {
                     [styles.ios]: platformName === 'ios',
                     [styles.android]: platformName === 'android',
diff --git a/special-pages/pages/duckplayer/app/components/SwitchBarMobile.jsx b/special-pages/pages/duckplayer/app/components/SwitchBarMobile.jsx
index c76e0c79f..3e38651bc 100644
--- a/special-pages/pages/duckplayer/app/components/SwitchBarMobile.jsx
+++ b/special-pages/pages/duckplayer/app/components/SwitchBarMobile.jsx
@@ -1,7 +1,7 @@
 import { h } from "preact";
 import cn from "classnames";
 import styles from "./SwitchBarMobile.module.css"
-import { useContext } from "preact/hooks";
+import { useContext, useId } from "preact/hooks";
 import { SwitchContext } from "../providers/SwitchProvider.jsx";
 import { Switch } from "./Switch.jsx";
 import { useTypedTranslation } from "../types.js";
@@ -15,6 +15,7 @@ import { useTypedTranslation } from "../types.js";
 export function SwitchBarMobile({platformName}) {
     const {onChange, onDone, state} = useContext(SwitchContext);
     const { t } = useTypedTranslation();
+    const inputId = useId();
 
     function blockClick(e) {
         if (state === 'exiting') {
@@ -36,17 +37,20 @@ export function SwitchBarMobile({platformName}) {
     });
 
     return (
-        <div class={classes} data-state={state} onTransitionEnd={onTransitionEnd}>
-            <label onClick={blockClick} class={styles.label}>
-                <span className={styles.text}>
-                    {t('keepEnabled')}
-                </span>
+        <div class={classes} data-state={state} data-allow-animation="true" onTransitionEnd={onTransitionEnd}>
+            <div class={styles.labelRow} onClick={blockClick}>
+                <label for={inputId} class={styles.label}>
+                    <span className={styles.text}>
+                        {t('keepEnabled')}
+                    </span>
+                </label>
                 <Switch
                     checked={state !== 'showing'}
                     onChange={onChange}
                     platformName={platformName}
+                    id={inputId}
                 />
-            </label>
+            </div>
         </div>
     )
 }
diff --git a/special-pages/pages/duckplayer/app/components/SwitchBarMobile.module.css b/special-pages/pages/duckplayer/app/components/SwitchBarMobile.module.css
index 4b95de755..41636cfc5 100644
--- a/special-pages/pages/duckplayer/app/components/SwitchBarMobile.module.css
+++ b/special-pages/pages/duckplayer/app/components/SwitchBarMobile.module.css
@@ -30,7 +30,7 @@
     display: none;
 }
 
-.label {
+.labelRow {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -38,6 +38,11 @@
     gap: 16px;
 }
 
+.label {
+    pointer-events: none;
+}
+
+
 .checkbox {}
 
 .text {
diff --git a/special-pages/tests/duckplayer.spec.js b/special-pages/tests/duckplayer.spec.js
index 966e53587..858532e64 100644
--- a/special-pages/tests/duckplayer.spec.js
+++ b/special-pages/tests/duckplayer.spec.js
@@ -160,7 +160,7 @@ test.describe('duckplayer mobile settings', () => {
         await duckplayer.openWithVideoID()
         await duckplayer.hasLoadedIframe()
         await duckplayer.reducedMotion()
-        await page.getByLabel('Keep Duck Player turned on').click() // can't 'check' here
+        await page.getByRole('switch').click()
         await page.getByLabel('Keep Duck Player turned on').waitFor({ state: 'hidden' })
         await duckplayer.sentUpdatedSettings()
     })