rusackas opened a new pull request, #41398:
URL: https://github.com/apache/superset/pull/41398
### SUMMARY
Adopts **anandraiin3/superset#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:
```ts
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
- [x] Has associated issue: Closes #38789
- [ ] Required feature flags:
- [x] Changes UI
- [ ] Includes DB Migration (follow approval process in
[SIP-59](https://github.com/apache/superset/issues/13351))
- [ ] 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/superset#18 (authored via Devin AI). Original
author: @anandraiin3.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
