fix(ld-button): stop propagation of click event if disabled

src/liquid/components/ld-button/ld-button.tsx

@@ -151,6 +151,10 @@ export class LdButton implements InnerFocusable, ClonesAttributes {
 
     if (this.disabled || (ariaDisabled && ariaDisabled !== 'false')) {
       ev.preventDefault()
+      // Stopping propagation is important for clicks on child elements,
+      // because otherwise event handlers attached to the ld-button
+      // are still called (no matter if the event was prevented or not).
+      ev.stopPropagation()
       return
     }
 

src/liquid/components/ld-button/test/ld-button.spec.ts

@@ -207,6 +207,40 @@ describe('ld-button', () => {
     expect(clickHandler).not.toHaveBeenCalled()
   })
 
+  it('prevents default and propagation of click events, if disabled', async () => {
+    const page = await newSpecPage({
+      components: [LdButton],
+      html: `<ld-button disabled>Text</ld-button>`,
+    })
+    const ldButton = page.root
+
+    const ev = new MouseEvent('click', { bubbles: true, cancelable: true })
+
+    ldButton.dispatchEvent(ev)
+
+    await page.waitForChanges()
+
+    expect(ev.defaultPrevented).toBeTruthy()
+    expect(ev.cancelBubble).toBeTruthy()
+  })
+
+  it('prevents default and propagation of click events, if aria-disabled', async () => {
+    const page = await newSpecPage({
+      components: [LdButton],
+      html: `<ld-button aria-disabled="true">Text</ld-button>`,
+    })
+    const ldButton = page.root
+
+    const ev = new MouseEvent('click', { bubbles: true, cancelable: true })
+
+    ldButton.dispatchEvent(ev)
+
+    await page.waitForChanges()
+
+    expect(ev.defaultPrevented).toBeTruthy()
+    expect(ev.cancelBubble).toBeTruthy()
+  })
+
   it('allows to set inner focus', async () => {
     const { root } = await newSpecPage({
       components: [LdButton],