(SP: 1) [Frontend] Q&A Per-Page Dropdown UI Polish (Style Consistency + Footer Overlap Fix)

[ViktorSvertoka]

Goal

Bring Q&A "Per page" control in line with pagination style and remove footer overlap.

Changes

• Replaced native select with custom dropdown in Q&A pagination.
• Unified trigger/options styles with pagination controls.
• Fixed overlap near footer by opening dropdown upward + higher z-index.
• Updated dark theme selected check color to match selected text.
• Updated pagination test for new interaction.

Closes #444

Summary by CodeRabbit

• New Features

  • Pagination page-size selector redesigned with a custom accessible dropdown
  • Keyboard navigation (Arrow keys, Home/End) and Escape to close
  • Dropdown closes on outside click/tap
  • Visual checkmark for selected size and animated chevron indicating state

• Tests

  • Updated pagination test to interact via UI clicks and verify page-size selection

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
devlovers-net	Ignored	Preview	Apr 12, 2026 6:32pm

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 40a25c1d-362f-472d-9fa7-a621ee4b0673

📥 Commits

Reviewing files that changed from the base of the PR and between 17becd2 and 4e4f408.

📒 Files selected for processing (1)

• frontend/components/q&a/Pagination.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• frontend/components/q&a/Pagination.tsx

---

📝 Walkthrough

Walkthrough

Replaces the native page-size <select> with a custom, accessible listbox-style dropdown in the Q&A pagination component. Adds open/close state, instance IDs, refs, global outside-click and Escape handling, focus management, and keyboard navigation. Tests updated to use click interactions.

Changes

Cohort / File(s)	Summary
Custom Dropdown Implementation frontend/components/q&a/Pagination.tsx	Replaced <select> with a toggle <button> + ul[role="listbox"] and button[role="option"] items. Added isPageSizeOpen state, useId, refs for trigger/dropdown/options, focus management, keyboard handlers (ArrowUp/Down/Home/End/Escape), outside-pointer and Escape listeners with cleanup, aria attributes, and rotated chevron/check icon rendering.
Test Updates frontend/components/tests/q&a/pagination.test.tsx	Updated test to interact via clicks: opens the listbox trigger and selects the 40 option by role/name; assertion still verifies onPageSizeChange(40).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• (SP: 1) [Frontend] Fix UI Q&A spacing, accordion borders, and button backgrounds #171 — Modifies the same frontend/components/q&a/Pagination.tsx component (visual/background class adjustments), likely overlapping with dropdown styling and behavior changes.

Suggested reviewers

• AM1007

Poem

🐇 I swapped the select for a button bright,
I hop through options by day and night.
Arrow keys guide me, Escape sends me back,
With chevrons and checks I keep track.
A tiny rabbit cheers the accessible track!

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Linked Issues check	❓ Inconclusive	The PR addresses all core requirements: custom dropdown implementation, keyboard navigation, accessibility features, and test updates. However, the raw summary lacks explicit confirmation of upward-opening dropdown behavior, theme color alignment, and z-index handling mentioned in issue #444.	Verify that the implementation includes dropdown opening upward near footer, proper z-index application, and dark theme selected-check color alignment with selected text as specified in issue #444.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main changes: replacing the select with a custom dropdown for UI polish, addressing style consistency and footer overlap issues.
Out of Scope Changes check	✅ Passed	The changes are focused on the Q&A page-size dropdown component and its test file, directly addressing the scope of issue #444 without apparent out-of-scope modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/qa-per-page-dropdown

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

frontend/components/tests/q&a/pagination.test.tsx (1)

146-148: Add a keyboard-path regression test for the new dropdown.

This only verifies the click flow, so the accessibility gap in the custom listbox can slip through. Please cover open/select/close via keyboard here as well, ideally with userEvent so focus behavior is exercised.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/components/tests/q`&a/pagination.test.tsx around lines 146 - 148,
The test currently only exercises the click flow using
screen.getByLabelText('itemsPerPageAria') and fireEvent.click(...), which misses
keyboard accessibility; update the test to add a keyboard-path regression: use
userEvent (imported as userEvent) to focus the trigger (itemsPerPageAria),
simulate opening the listbox with keyboard (e.g., Enter or Space), navigate to
the "40" option via ArrowDown/ArrowUp or type the option label, activate it with
Enter, and then assert the listbox closed and selection applied; replace or
augment the fireEvent.click calls that target screen.getByRole('option', { name:
'40' }) with userEvent keyboard interactions so focus behavior and keyboard
accessibility of the custom listbox are exercised.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@frontend/components/q`&a/Pagination.tsx:
- Around line 218-239: The hard-coded IDs "qa-page-size-label" and
"qa-page-size-trigger" cause collisions when multiple Pagination components
mount; generate instance-scoped IDs (e.g., with React's useId() or a unique
suffix) and replace the static id attributes on the label and button with those
generated IDs, then update aria-labelledby and any other references
(pageSizeListboxId usage, aria-controls) to use the matching instance-scoped
IDs; ensure the logic around setIsPageSizeOpen, isPageSizeOpen,
pageSizeDropdownRef, and pageSizeListboxId continues to reference the new IDs so
accessibility relationships remain correct.
- Around line 231-289: The page-size dropdown in Pagination.tsx uses
listbox/option roles but lacks keyboard semantics; update the component (using
the qa-page-size-trigger button, isPageSizeOpen/setIsPageSizeOpen,
pageSizeListboxId, pageSizeOptions, onPageSizeChange, pageSize) to implement
proper listbox keyboard interactions: when opening move focus into the listbox
to the selected option (or first option), implement a keydown handler on the
listbox that handles ArrowDown/ArrowUp to move focus (roving tabindex or track
an activeIndex), Home/End to jump to first/last, and Enter/Space to select the
focused option; also keep Escape closing behavior and maintain aria-selected and
aria-activedescendant (or update option tabindex) so screen readers and keyboard
users can navigate correctly, or alternatively replace this custom logic with a
headless/select primitive (e.g., Headless UI/Downshift) that provides the
required semantics.

---

Nitpick comments:
In `@frontend/components/tests/q`&a/pagination.test.tsx:
- Around line 146-148: The test currently only exercises the click flow using
screen.getByLabelText('itemsPerPageAria') and fireEvent.click(...), which misses
keyboard accessibility; update the test to add a keyboard-path regression: use
userEvent (imported as userEvent) to focus the trigger (itemsPerPageAria),
simulate opening the listbox with keyboard (e.g., Enter or Space), navigate to
the "40" option via ArrowDown/ArrowUp or type the option label, activate it with
Enter, and then assert the listbox closed and selection applied; replace or
augment the fireEvent.click calls that target screen.getByRole('option', { name:
'40' }) with userEvent keyboard interactions so focus behavior and keyboard
accessibility of the custom listbox are exercised.

🪄 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: CHILL

Plan: Pro

Run ID: 7df192db-8692-4312-9701-554925cd37ce

📥 Commits

Reviewing files that changed from the base of the PR and between 902ccde and 17becd2.

📒 Files selected for processing (2)

• frontend/components/q&a/Pagination.tsx
• frontend/components/tests/q&a/pagination.test.tsx