hemasrishalini opened a new pull request, #38791:
URL: https://github.com/apache/superset/pull/38791
### SUMMARY
Fixes #38789. This PR refactors the `DetailsPanelPopover` to resolve a
visual regression where a default browser focus outline appeared around the
Filter Badge popover on hover.
Following recent Ant Design token migrations, the legacy manual focus
management was triggering unwanted artifacts. Instead of a CSS-only fix, this
PR modernizes the component by delegating popover logic to the standardized
`NoAnimationDropdown` and `Menu` components used throughout the dashboard.
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
Before:
After:
### TESTING INSTRUCTIONS
1. Open a dashboard with active filters applied.
2. Hover over the Filter Badge (numerical indicator).
- **Verify:** Popover appears without a blue focus ring.
3. Use the `Tab` key to focus the Filter Badge.
- **Verify:** A 2px solid primary color outline appears (Keyboard
Accessibility check).
4. Navigate through filters using arrow keys within the popover.
- **Verify:** Focus moves correctly through the menu items.
### ADDITIONAL INFORMATION
- **Architectural Cleanup:** Net reduction of **~90 lines of code**.
Eliminated manual `indicatorRefs`, custom `handleKeyDown` listeners, and
`tabIndex` hacking in favor of native AntD `Menu` navigation.
- **Type Safety:** Updated `menuItems` to use `MenuProps['items']` for
strict TypeScript compliance.
- **Technical Debt:** Removed unused styled components from `Styles.tsx`
(`FiltersContainer`, `FiltersDetailsContainer`, `Separator`, `SectionName`) to
reduce bundle size.
- **A11y Compliance:** Implements `:focus-visible` styling using
`${theme.colorPrimary}` to ensure a high-contrast focus indicator for keyboard
users while maintaining a clean UI for mouse users.
- [ ] Has associated issue: #38789
- [ ] Required feature flags: None
- [x] Changes UI
- [ ] Includes DB Migration
- [ ] Introduces new feature or API
- [x] Removes existing feature or API (Cleaned up legacy focus logic)
--
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]
