wip

packages/ui/src/switch.js

@@ -4,7 +4,7 @@ export default function (Alpine) {
         if      (directive.value === 'group')       handleGroup(el, Alpine)
         else if (directive.value === 'label')       handleLabel(el, Alpine)
         else if (directive.value === 'description') handleDescription(el, Alpine)
-        else                                        handleSwitch(el, Alpine)
+        else                                        handleRoot(el, Alpine)
     })
 
     Alpine.magic('switch', el => {
@@ -49,8 +49,8 @@ function handleDescription(el, Alpine) {
     })
 }
 
-function handleSwitch(el, Alpine) {
-    Alpine.bind(el, (options = {}) => ({
+function handleRoot(el, Alpine) {
+    Alpine.bind(el, {
         'x-data'() {
             return {
                 init() {
@@ -84,5 +84,5 @@ function handleSwitch(el, Alpine) {
         },
         // This is needed so that we can "cancel" the click event when we use the `Enter` key on a button.
         '@keypress.prevent'() { },
-    }))
+    })
 }

tests/cypress/integration/plugins/ui/switch.spec.js

@@ -5,7 +5,7 @@ test('has accessibility attributes',
         <div x-data="{ checked: false }">
             <article x-switch:group>
                 <label x-switch:label>Enable notifications</label>
-                <span cypress-id="description" x-switch:description>A description of the switch.</span>
+                <span description" x-switch:description>A description of the switch.</span>
 
                 <button x-switch x-model="checked">Enable Notifications</button>
             </article>
@@ -13,7 +13,7 @@ test('has accessibility attributes',
     `],
     ({ get }) => {
         get('label').should(haveAttribute('id', 'alpine-switch-label-1'))
-        get('[cypress-id="description"]').should(haveAttribute('id', 'alpine-switch-description-1'))
+        get('[description"]').should(haveAttribute('id', 'alpine-switch-description-1'))
         get('button').should(haveAttribute('type', 'button'))
         get('button').should(haveAttribute('aria-labelledby', 'alpine-switch-label-1'))
         get('button').should(haveAttribute('aria-describedby', 'alpine-switch-description-1'))