CrowdStrike · clintcs · Sep 16, 2025 · Sep 15, 2025
@@ -0,0 +1,7 @@
+---
+'@crowdstrike/glide-core': patch
+---
+
+- Popover no longer dispatches a "toggle" event when disabled and opened programmatically.
+- Popover no longer sets its `open` attribute when disabled and its target is clicked.
+- Popover now sets `aria-expanded="false"` on its target both when initially open but disabled and when initially closed and enabled.
@@ -391,6 +391,7 @@ export default defineConfig([
       'src/option.test.*.ts',
       'src/options.test.*.ts',
       'src/options.group.test.*.ts',
+      'src/popover.test.*.ts',
       'src/select.test.*.ts',
       'src/spinner.test.*.ts',
       'src/tag.test.*.ts',

@@ -8,7 +8,17 @@ test('closes on Escape', { tag: '@keyboard' }, async ({ mount, page }) => {
 
   const host = page.locator('glide-core-modal');
 
-  await page.keyboard.press('Escape');
+  await expect(host).toDispatchEvents(
+    () => page.keyboard.press('Escape'),
+    [
+      {
+        type: 'toggle',
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+      },
+    ],
+  );
 
   await expect(host).not.toHaveAttribute('open');
 });
@@ -39,7 +39,14 @@ test(
 
     await expect(host).toDispatchEvents(
       () => setProperty(host, 'open', true),
-      [{ type: 'toggle', bubbles: true, composed: true }],
+      [
+        {
+          type: 'toggle',
+          bubbles: true,
+          cancelable: false,
+          composed: true,
+        },
+      ],
     );
 
     await expect(dialog).toBeVisible();
@@ -60,7 +67,14 @@ test(
 
     await expect(host).toDispatchEvents(
       () => setProperty(host, 'open', false),
-      [{ type: 'toggle', bubbles: true, composed: true }],
+      [
+        {
+          type: 'toggle',
+          bubbles: true,
+          cancelable: false,
+          composed: true,
+        },
+      ],
     );
 
     await expect(dialog).toBeHidden();
@@ -81,7 +95,14 @@ test(
 
     await expect(host).not.toDispatchEvents(
       () => setProperty(host, 'open', true),
-      [{ type: 'toggle', bubbles: true, composed: true }],
+      [
+        {
+          type: 'toggle',
+          bubbles: true,
+          cancelable: false,
+          composed: true,
+        },
+      ],
     );
 
     await expect(dialog).toBeVisible();
@@ -101,7 +122,14 @@ test(
 
     await expect(host).not.toDispatchEvents(
       () => setProperty(host, 'open', false),
-      [{ type: 'toggle', bubbles: true, composed: true }],
+      [
+        {
+          type: 'toggle',
+          bubbles: true,
+          cancelable: false,
+          composed: true,
+        },
+      ],
     );
 
     await expect(dialog).toBeHidden();

@@ -66,6 +66,7 @@ export default defineConfig({
             'src/option.test.*.ts',
             'src/options.test.*.ts',
             'src/options.group.test.*.ts',
+            'src/popover.test.*.ts',
             'src/select.test.*.ts',
             'src/spinner.test.*.ts',
             'src/tag.test.*.ts',
@@ -154,6 +155,7 @@ export default defineConfig({
           'src/option.ts',
           'src/options.ts',
           'src/options.group.ts',
+          'src/popover.ts',
           'src/select.ts',
           'src/spinner.ts',
           'src/tag.ts',

@@ -1,6 +1,139 @@
+import { html } from 'lit';
 import { expect, test } from './playwright/test.js';
 import type Popover from './popover.js';
 
+test('is accessible', { tag: '@accessibility' }, async ({ mount, page }) => {
+  await mount(
+    () =>
+      html`<glide-core-popover>
+        Popover
+        <button slot="target">Target</button>
+      </glide-core-popover>`,
+  );
+
+  await expect(page).toBeAccessible('glide-core-popover');
+});
+
+test(
+  'sets `aria-expanded` on its target when open initially',
+  { tag: '@accessibility' },
+  async ({ mount, page }) => {
+    await mount(
+      () =>
+        html`<glide-core-popover open>
+          Popover
+          <button slot="target">Target</button>
+        </glide-core-popover>`,
+    );
+
+    const button = page.getByRole('button');
+
+    await expect(button).toHaveAttribute('aria-expanded', 'true');
+  },
+);
+
+test(
+  'sets `aria-expanded` on its target when opened programmatically',
+  { tag: '@accessibility' },
+  async ({ mount, page, setProperty }) => {
+    await mount(
+      () =>
+        html`<glide-core-popover>
+          Popover
+          <button slot="target">Target</button>
+        </glide-core-popover>`,
+    );
+
+    const host = page.locator('glide-core-popover');
+    const button = page.getByRole('button');
+
+    await setProperty(host, 'open', true);
+
+    await expect(button).toHaveAttribute('aria-expanded', 'true');
+  },
+);
+
+test(
+  'sets `aria-expanded` on its target when closed initially',
+  { tag: '@accessibility' },
+  async ({ mount, page }) => {
+    await mount(
+      () =>
+        html`<glide-core-popover>
+          Popover
+          <button slot="target">Target</button>
+        </glide-core-popover>`,
+    );
+
+    const button = page.getByRole('button');
+
+    await expect(button).toHaveAttribute('aria-expanded', 'false');
+  },
+);
+
+test(
+  'sets `aria-expanded` on its target when closed programmatically',
+  { tag: '@accessibility' },
+  async ({ mount, page, setProperty }) => {
+    await mount(
+      () =>
+        html`<glide-core-popover open>
+          Popover
+          <button slot="target">Target</button>
+        </glide-core-popover>`,
+    );
+
+    const host = page.locator('glide-core-popover');
+    const button = page.getByRole('button');
+
+    await setProperty(host, 'open', false);
+
+    await expect(button).toHaveAttribute('aria-expanded', 'false');
+  },
+);
+
+test(
+  'sets `aria-expanded` on its target when enabled programmatically',
+  { tag: '@accessibility' },
+  async ({ mount, page, setProperty }) => {
+    await mount(
+      () =>
+        html`<glide-core-popover disabled open>
+          Popover
+          <button slot="target">Target</button>
+        </glide-core-popover>`,
+    );
+
+    const host = page.locator('glide-core-popover');
+    const button = page.getByRole('button');
+
+    await setProperty(host, 'disabled', false);
+
+    await expect(button).toHaveAttribute('aria-expanded', 'true');
+  },
+);
+
+test(
+  'sets `aria-expanded` on its target when disabled programmatically',
+  { tag: '@accessibility' },
+  async ({ mount, page, setProperty }) => {
+    await mount(
+      () =>
+        html`<glide-core-popover open>
+          Popover
+          <button slot="target">Target</button>
+        </glide-core-popover>`,
+    );
+
+    const host = page.locator('glide-core-popover');
+    const button = page.getByRole('button');
+
+    await setProperty(host, 'disabled', true);
+
+    await expect(button).toHaveAttribute('aria-expanded', 'false');
+  },
+);
+
 test('disabled=${true}', { tag: '@accessibility' }, async ({ page }) => {
   await page.goto('?id=popover--popover');