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>
duckduckgo · Oct 21, 2024 · 4a3528c · 4a3528c
1 parent 7515145
commit 4a3528c
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 10 deletions.
diff --git 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
@@ -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
@@ -30,14 +30,19 @@
     display: none;
 }
 
-.label {
+.labelRow {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     gap: 16px;
 }
 
+.label {
+    pointer-events: none;
+}
+
+
 .checkbox {}
 
 .text {

diff --git 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()
     })