fix(dashboard): remove stray focus outline on Filter Badge popover (closes #38789)

[rusackas]

SUMMARY

Adopts anandraiin3#18 (authored via Devin AI). Original work by @anandraiin3 — credit to them; this PR rebases that fix cleanly onto current master with the regression test intact.

After a page refresh, hovering over the Filter Badge on a dashboard chart drew a default blue browser focus ring around the entire "Applied filters" popover.

Root cause: The popover content is wrapped by FiltersDetailsContainer in superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx. That wrapper has tabIndex={-1} and is focused programmatically by FiltersBadge/index.tsx whenever the popover opens, so it can capture arrow-key / Escape / Enter events for keyboard navigation between filter indicators:

useEffect(() => {
  if (popoverVisible) {
    setTimeout(() => {
      popoverContentRef?.current?.focus({ preventScroll: true });
    });
  }
}, [popoverVisible]);

After a refresh there has been no prior mouse interaction with the document, so the browser's :focus-visible heuristic treats this programmatic .focus() as keyboard-like and paints the user-agent focus outline. The wrapper <div> had no outline rule, so the blue ring leaked through. Once the user clicks anywhere the heuristic flips and the ring disappears — which is why it only reproduces after refresh.

Fix: Suppress the default browser outline on FiltersDetailsContainer for both :focus and :focus-visible. The container is a non-interactive wrapper used only as a keyboard-event target; the actual focusable items inside (FilterItem) keep their own :focus-visible styles, so keyboard accessibility for the items inside the popover is unchanged. This is the minimum change required — the existing programmatic-focus-trap behaviour that powers arrow-key navigation is preserved.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before: a blue focus ring is drawn around the entire popover container on hover after refresh (see the recording on #38789).

After: no focus ring is drawn around the popover wrapper; the popover renders with only its own background/elevation styling, matching the rest of the Superset UI.

TESTING INSTRUCTIONS

Manual:

1. Open a dashboard with filters and apply at least one filter.
2. Hard-refresh the page.
3. Without clicking anywhere first, hover over the Filter Badge ("1"/"2" indicator next to the filter funnel) on a chart.
4. The "Applied filters" popover opens with no blue outline around the container.
5. Press Tab to focus the badge and Enter to open the popover via keyboard, then use Arrow Up/Down to navigate between indicators — keyboard navigation still works, and the focused item retains its own :focus-visible styling.

Automated:

• Added a regression test in superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/DetailsPanel.test.tsx:
  • Popover container suppresses default browser focus outline — asserts outline: none is set on both :focus and :focus-visible of the popover container (role="menu").
• Verified the test fails on master without the style change and passes with it.
• Run with: npm run test -- src/dashboard/components/FiltersBadge/DetailsPanel/DetailsPanel.test.tsx

ADDITIONAL INFORMATION

• Has associated issue: Closes Unexpected focus outline (blue border) on Filter Badge popover #38789
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

---

Adopted from anandraiin3#18 (authored via Devin AI). Original author: @anandraiin3.

[bito-code-review]

Code Review Agent Run #11c5ec

Actionable Suggestions - 0

Additional Suggestions

Filtered by Review Rules

Bito filtered these suggestions based on rules created automatically for your feedback. Manage rules.

Review Details

• Files reviewed - 2 · Commit Range: 6daf927..6daf927

  • superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/DetailsPanel.test.tsx
  • superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
• Files skipped - 0
• Tools

  • Whispers (Secret Scanner) - ✔︎ Successful
  • Detect-secrets (Secret Scanner) - ✔︎ Successful

---

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

• /review - Manually triggers a full AI review.

• /pause - Pauses automatic reviews on this pull request.

• /resume - Resumes automatic reviews.

• /resolve - Marks all Bito-posted review comments as resolved.

• /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

• Customize agent settings
• Review rules
• General documentation
• FAQ

AI Code Review powered by

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 64.44%. Comparing base (6f12d17) to head (6daf927).

Additional details and impacted files

@@           Coverage Diff           @@
##           master   #41398   +/-   ##
=======================================
  Coverage   64.44%   64.44%           
=======================================
  Files        2655     2655           
  Lines      145473   145473           
  Branches    33575    33575           
=======================================
  Hits        93747    93747           
  Misses      50027    50027           
  Partials     1699     1699           

Flag	Coverage Δ
javascript	68.77% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.