Skip to content

fix(popover): Fix popover focus-leave dismissal#2298

Open
alexwarren wants to merge 3 commits into
mainfrom
codex-a11y-160-popover-focus-leave
Open

fix(popover): Fix popover focus-leave dismissal#2298
alexwarren wants to merge 3 commits into
mainfrom
codex-a11y-160-popover-focus-leave

Conversation

@alexwarren

Copy link
Copy Markdown
Collaborator

Stacks fixes to address A11Y-160

Summary

  • Close classic s-popover when keyboard focus leaves both the trigger and popover, but only for popover content marked with role="menu".
  • Apply the same role-derived focus-leave behavior to Svelte Popover while preserving tooltip, non-menu, and controlled behavior.
  • Add regression tests for aria-expanded, menu focus transitions, outside focus, null relatedTarget, controlled close requests, and non-menu popovers staying open.

Why

A11Y-160 reports that dropdown/popover menus remain visually and programmatically expanded after users tab away. This keeps aria-expanded true even though focus has moved outside the trigger/popover pair.

Stacks popovers remain a low-level primitive, so the new dismissal behavior is derived from menu semantics instead of applying to dialogs or generic popover content.

Validation

  • npm run test:unit in packages/stacks-classic: 30 passing across Chromium, Firefox, and WebKit.
  • npx web-test-runner --config web-test-runner.config.mjs --files src/components/Popover/Popover.test.ts in packages/stacks-svelte: 43 passing.
  • npx web-test-runner --config web-test-runner.config.mjs in packages/stacks-svelte: 572 passing.
  • npx svelte-check --tsconfig ./tsconfig.json: 0 errors/warnings.
  • Package-scoped ESLint and Prettier checks passed.

@alexwarren alexwarren requested a review from a team as a code owner June 15, 2026 15:03
@changeset-bot

changeset-bot Bot commented Jun 15, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: b63f473

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@stackoverflow/stacks Minor
@stackoverflow/stacks-svelte Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify

netlify Bot commented Jun 15, 2026

Copy link
Copy Markdown

Deploy Preview for stacks ready!

Name Link
🔨 Latest commit b63f473
🔍 Latest deploy log https://app.netlify.com/projects/stacks/deploys/6a30142f920e4b000781d2be
😎 Deploy Preview https://deploy-preview-2298--stacks.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant