fix(explore): improve Policy Bills tab discoverability#185
Conversation
- Move Policy Bills from position 12 to position 2 in DataSourceTabs - Add scroll chevron buttons and edge fade gradients when tabs overflow - Add pulsing accent dot to inactive Policy Bills tab to signal it as a headline feature distinct from the metric data tabs Previously Policy Bills was buried at the end of a horizontally-scrolling tab row with invisible macOS scrollbars, making it easy to miss.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughReworks Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
Greptile SummaryThis PR improves the discoverability of the Policy Bills tab in the Key changes:
One concrete accessibility concern: the chevron buttons are conditionally mounted/unmounted and, when keyboard focus sits on a chevron that then disappears (scroll reaches a boundary), focus reverts to Confidence Score: 4/5Safe to merge; the scroll-affordance implementation is solid and the config reorder is risk-free — one P1 keyboard focus-loss edge case should be addressed before or shortly after landing. The core logic (ResizeObserver pattern, scroll-state tracking, cleanup, conditional rendering) is correct and well-structured. The config change is a pure reorder with no behavioral impact. The only P1 is a focus-loss scenario that only affects keyboard users who have focus on a chevron at the exact moment it unmounts — real but narrow. The P2 hardcoded-key issue is a maintenance concern, not a runtime bug. ui-nextjs/components/explore/DataSourceTabs.tsx — focus management in scrollBy and the hardcoded 'policy' key Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[DataSourceTabs mounts] --> B[useEffect: updateOverflow]
B --> C{scrollWidth > clientWidth?}
C -- Yes --> D[canScrollRight = true\nShow right chevron + fade]
C -- No --> E[canScrollRight = false\nHide right chevron]
D --> F[User clicks right chevron]
F --> G[scrollBy +240px smooth]
G --> H[scroll event fires]
H --> I[updateOverflow re-runs]
I --> J{At right boundary?}
J -- Yes --> K[canScrollRight = false\nChevron unmounts\n⚠ focus lost if focused]
J -- No --> D
L[ResizeObserver] -- viewport resize --> I
M[User clicks left chevron] --> N[scrollBy -240px smooth]
N --> H
Reviews (1): Last reviewed commit: "fix(explore): improve Policy Bills tab d..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@ui-nextjs/components/explore/DataSourceTabs.tsx`:
- Around line 76-93: The tab buttons are only visually indicating selection;
update the button element used in DataSourceTabs to expose the active state to
assistive tech by adding semantic ARIA attributes: give the button role="tab"
and set aria-selected={isActive} (and aria-controls if a matching panel id
exists), ensuring the existing isActive logic is used to drive the attribute;
keep the onClick handler (onSelect) and key (src.key) unchanged so behaviour and
identity remain the same.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: e673cc52-5c70-480f-9855-e7a00dbda63e
📒 Files selected for processing (2)
ui-nextjs/components/explore/DataSourceTabs.tsxui-nextjs/lib/explore-config.ts
- Preserve keyboard focus when chevron unmounts after scrolling to the edge by redirecting focus to the scroller (which is now programmatically focusable via tabIndex=-1) - Replace hardcoded 'policy' key check with a declarative 'highlight' field on DataSourceConfig, so future sources can opt into the same visual elevation without editing the component - Add aria-pressed to tab buttons so assistive tech announces the currently-selected data source
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@ui-nextjs/components/explore/DataSourceTabs.tsx`:
- Around line 76-79: The scroller element currently uses tabIndex={-1} and
removes focus outline via className="... outline-none", which leaves no visible
focus when programmatic focus lands there (e.g., after chevron unmount); restore
a subtle focus style by replacing or augmenting the outline-none with a small
accessible focus indicator (e.g., add a focus-visible class or ring) on the
element referenced by scrollerRef so keyboard users see focus before it moves to
a tab button, while keeping the element out of normal tab order.
🪄 Autofix (Beta)
✅ Autofix completed
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 78061084-d640-41b3-bb14-1e923235ef09
📒 Files selected for processing (2)
ui-nextjs/components/explore/DataSourceTabs.tsxui-nextjs/lib/explore-config.ts
|
Note Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it. Fixes Applied SuccessfullyFixed 1 file(s) based on 1 unresolved review comment. Files modified:
Commit: The changes have been pushed to the Time taken: |
Fixed 1 file(s) based on 1 unresolved review comment. Co-authored-by: CodeRabbit <noreply@coderabbit.ai>
1 participant
Summary
Policy Bills was surfaced as a top-level data source tab in #184, but it landed at position 12 in a horizontally-scrolling tab row — and on macOS the default invisible scrollbar gave no affordance that more tabs existed beyond the viewport. Users had to scroll blindly to find it.
Test plan
/exploreat viewport widths where tabs overflow (~1024px and below): chevrons + edge fades appearSummary by CodeRabbit
New Features
Chores