ux(frontend/recs): enlarge cell-expand chevron + reposition (closes #280)

[cristim]

Summary

• Bump .rec-cell-chevron font-size from 1.2em to 1.5em and minimum click target from 24px to 32px so the glyph is a comfortable 32x32 tap/click target
• Add padding: 6px, border-radius: 4px, and a focus-visible highlight (background: var(--cudly-info-bg)) so keyboard focus is visible without extra keydown handlers (native <button> handles Enter/Space)
• Add two tests: (1) chevron is a <button type="button"> with aria-label and lives outside .rec-cell-summary-content; (2) existing placement test continues to confirm it sits in td.checkbox-col

Before / after CSS

Property	Before	After
font-size	1.2em	1.5em
padding	4px	6px
min-width/height	24px	32px
:hover selector	.rec-cell-chevron:hover	.rec-cell-chevron:hover, .rec-cell-chevron:focus-visible

Test plan

• npx tsc --noEmit clean
• jest src/__tests__/recommendations*.test.ts -- 320 passed, 0 regressions
• New test: chevron is <button> outside .rec-cell-summary-content
• Existing test: chevron lives in td.checkbox-col
• Existing test: click toggles expand and flips aria-expanded

Summary by CodeRabbit

• Improvements
  • Enhanced recommendation cell chevron control with larger dimensions for improved accessibility and easier interaction.
  • Added smooth transitions for state changes and improved keyboard navigation support with enhanced focus-visible styling.

[coderabbitai]

Warning

Review limit reached

@cristim, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 9 minutes and 9 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a5348f07-7597-4520-afcb-39d5363b4ed8

📥 Commits

Reviewing files that changed from the base of the PR and between 4956d66 and 119e79c.

📒 Files selected for processing (2)

• frontend/src/__tests__/recommendations.test.ts
• frontend/src/styles/components.css

📝 Walkthrough

Walkthrough

The PR improves the recommendation cell chevron control by adding DOM validation for its accessibility structure and enhancing its visual presentation. A new test asserts the chevron is a real button with aria-label and proper nesting, while CSS updates enlarge its interactive dimensions, add smooth transitions, and refine the hover/focus-visible styling to use primary color and info-background theming.

Changes

Recommendation cell chevron control

Layer / File(s)	Summary
Chevron DOM accessibility test frontend/src/__tests__/recommendations.test.ts	New test validates that .rec-cell-chevron is rendered as a <button> element with a truthy aria-label and is not a descendant of .rec-cell-summary-content.
Chevron sizing and interactive styling frontend/src/styles/components.css	Enhanced .rec-cell-chevron styling: increased font-size, padding, and min-width/min-height for better hit-area; added border-radius and transition; combined hover and focus-visible states to apply primary text color and info-background, with focus outline suppressed.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related issues

• ux(frontend/recs): enlarge cell-expand chevron + move it to the checkbox column #280: Directly addressed by both changes—chevron control accessibility validation and CSS enhancement align with this issue's objectives.

Possibly related PRs

• LeanerCloud/CUDly#283: Overlapping .rec-cell-chevron DOM assertions and styling tweaks for multi-variant chevron placement.
• LeanerCloud/CUDly#253: Introduced the original chevron expand/collapse UI and prior tests; this PR adds stricter DOM validation and refined styling for that same control.

Suggested labels

impact/many

Poem

🐰 A chevron sits now bold and tall,
with button roots and labels for all!
Focus shines bright, a gentle glow—
through hover's dance, the colors flow.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the primary change: enlarging and repositioning the cell-expand chevron, which matches the CSS modifications and test additions in the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/280-wave2

---

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

[cristim]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 0

[cristim]

@coderabbitai full review

[coderabbitai]

Rate Limit Exceeded

@cristim have exceeded the limit for the number of chat messages per hour. Please wait 54 minutes and 24 seconds before sending another message.

[cristim]

@coderabbitai review

[coderabbitai]

Rate Limit Exceeded

@cristim have exceeded the limit for the number of chat messages per hour. Please wait 38 minutes and 38 seconds before sending another message.

[cristim]

@coderabbitai full review

[coderabbitai]

✅ Action performed

Full review finished.