🐛 Fixed hover-reveal View more buttons staying hidden on keyboard focus#28929
🐛 Fixed hover-reveal View more buttons staying hidden on keyboard focus#28929dimitristrechas wants to merge 1 commit into
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (6)
✅ Files skipped from review due to trivial changes (5)
🚧 Files skipped from review as they are similar to previous changes (1)
WalkthroughUpdated View more button styling across post analytics overview, stats overview, and a kpi card story to add focus-visible translation and opacity states alongside hover behavior. Two related JSX lines in the post analytics web overview and KPI card components were reformatted, with click targets and navigation behavior unchanged. Suggested reviewers
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
9larsons
left a comment
9larsons
left a comment
There was a problem hiding this comment.
Hey @dimitristrechas, valid change here but I'm not able to reproduce the expected behavior. Could you please take a look to verify this and if you're getting it, would you mind appending a quick vid of that, too?
|
Hey @9larsons, in the PR's description I have attached a video of the fix. Notice that the focus moves from "Last 30 days" to "0%" and finally when it lands in the "View more" button it also reveals it, which is the fix. I am attaching before/after vids, hopefully it makes it clearer. Before fix Screen.Recording.2026-06-26.at.8.55.53.PM.movAfter fix Screen.Recording.2026-06-26.at.10.30.44.AM.mov |
|
Storybook KPI Card -> With Hover Button Screen.Recording.2026-06-27.at.10.36.42.AM.mov |
Hover-reveal analytics buttons were only visible on card hover, so keyboard users could tab to a focused but invisible control. Added focus-visible styles so the reveal state matches hover when navigating with the keyboard.
dimitristrechas
force-pushed
the
dimitristrechas/focus-visible-view-more-btns
branch
from
188c499 to
e7ad648
Compare
2 participants
The bug
In Ghost Admin analytics, several View more buttons use a hover-reveal pattern: they are hidden by default (opacity-0 + horizontal offset) and only become visible when the parent card is hovered.
Keyboard users can still tab to these buttons, but they remained invisible while focused. That made it unclear which control was active and effectively blocked keyboard-only navigation to those actions.
Affected surfaces include Post Analytics overview cards (Web, Newsletter, Growth), KPI tile View more buttons on analytics detail pages, and site Stats overview KPI cards.
The fix
Added focus-visible:translate-x-0 focus-visible:opacity-100 to each hover-reveal View more button so keyboard focus applies the same visible state as card hover.
Used focus-visible rather than focus so mouse clicks do not leave the button permanently visible after activation, matching existing Shade button focus behaviour.
Screen.Recording.2026-06-26.at.10.30.44.AM.mov
Existing E2E coverage for Post Analytics overview View more clicks should continue to pass unchanged.