From 31cb23bd7710ce5f21e3f43cdaed19f30d988f5e Mon Sep 17 00:00:00 2001
From: Sharon Stratsianis <sstratsianis@gmail.com>
Date: Tue, 13 Oct 2026 11:51:45 +1100
Subject: [PATCH] fix close

---
 src/components/error-state/ErrorState.ts | 10 +++++++++-
 test/components/error-state.test.ts      | 21 +++++++++++++++++++--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/error-state/ErrorState.ts b/src/components/error-state/ErrorState.ts
index 043affe47..7da030747 100644
--- a/src/components/error-state/ErrorState.ts
+++ b/src/components/error-state/ErrorState.ts
@@ -21,8 +21,9 @@ export default class ErrorState extends WebComponent {
   render () {
     return html`
       <section role="alert">
-        <solid-ui-button class="close-button" variant="ghost" aria-label="Close">
+        <solid-ui-button class="close-button" variant="ghost" @click=${this.onClose}>
           <icon-lucide-x slot="icon" aria-hidden="true"></icon-lucide-x>
+          <span class="sr-only">Close</span>
         </solid-ui-button>
         <div class="icon">
           <icon-lucide-triangle-alert aria-hidden="true"></icon-lucide-triangle-alert>
@@ -35,4 +36,11 @@ export default class ErrorState extends WebComponent {
       </section>
     `
   }
+
+  private onClose () {
+    this.dispatchEvent(new CustomEvent('close', {
+      bubbles: true,
+      composed: true
+    }))
+  }
 }
diff --git a/test/components/error-state.test.ts b/test/components/error-state.test.ts
index a5528f6fe..e9119cd46 100644
--- a/test/components/error-state.test.ts
+++ b/test/components/error-state.test.ts
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import '../../src/components/error-state'
 
 describe('solid-ui-error-state', () => {
@@ -17,7 +17,24 @@ describe('solid-ui-error-state', () => {
     expect(element.shadowRoot?.textContent).toContain('Try again when your connection is restored.')
     const closeButton = element.shadowRoot?.querySelector('solid-ui-button.close-button')
     expect(closeButton?.getAttribute('variant')).toBe('ghost')
-    expect(closeButton?.getAttribute('aria-label')).toBe('Close')
+    expect(closeButton?.textContent).toContain('Close')
     expect(element.querySelector('li')?.textContent).toBe('Network request failed')
   })
+
+  it('dispatches a close event when the close button is activated', async () => {
+    const element = document.createElement('solid-ui-error-state')
+    document.body.append(element)
+
+    await (element as unknown as { updateComplete: Promise<boolean> }).updateComplete
+
+    const closeButton = element.shadowRoot?.querySelector('solid-ui-button.close-button')
+    const innerButton = closeButton?.shadowRoot?.querySelector('button')
+    const closeHandler = vi.fn()
+    element.addEventListener('close', closeHandler)
+
+    innerButton?.click()
+
+    expect(closeHandler).toHaveBeenCalledTimes(1)
+    expect(closeHandler.mock.calls[0][0]).toBeInstanceOf(CustomEvent)
+  })
 })