Improve focus outline and accessibility for button

[anurag2787]

Proposed change

This PR improves the accessibility and visual behavior of the Show more button

Resolves #3150

Screencast.from.2026-01-05.01-32-57.webm

Checklist

• Required: I read and followed the contributing guidelines
• Required: I ran make check-test locally and all tests passed
• I used AI for code, documentation, or tests in this PR

[coderabbitai]

Summary by CodeRabbit

• Style
  • Improved button spacing and visual presentation.
  • Enhanced keyboard navigation focus indicators for better accessibility.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Walkthrough

The ShowMoreButton component styling is updated to add internal padding (px-2 py-1) and change focus styling from focus to focus-visible, addressing visual spacing and accessibility focus behavior without altering component logic or content.

Changes

Cohort / File(s)	Summary
Button Styling Updates frontend/src/components/ShowMoreButton.tsx	Added horizontal and vertical padding (px-2 py-1) to the button element and updated focus state selector from focus/outline to focus-visible with corresponding outline classes for accessibility

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• fix: align 'Show more' button in Projects page-#1329 #1894: Introduced the ShowMoreButton component that is now being refined with padding and focus-visible styling adjustments.

Suggested reviewers

• arkid15r
• kasya

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately reflects the main change: improving accessibility through focus outline modifications and adding internal padding to the button.
Description check	✅ Passed	The description is related to the changeset, mentioning improved accessibility and visual behavior for the Show more button while referencing issue #3150.
Linked Issues check	✅ Passed	The code changes address all objectives from #3150: padding added (px-2 py-1) prevents text from touching outline, and focus-visible instead of focus ensures outline appears only during keyboard navigation.
Out of Scope Changes check	✅ Passed	All changes to ShowMoreButton.tsx are directly scoped to the objectives in #3150; no unrelated modifications are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3a34336 and 7058b3e.

📒 Files selected for processing (1)

• frontend/src/components/ShowMoreButton.tsx

🧰 Additional context used

🧠 Learnings (3)

📓 Common learnings

Learnt from: Rajgupta36
Repo: OWASP/Nest PR: 2288
File: frontend/src/components/ActionButton.tsx:0-0
Timestamp: 2025-09-17T02:42:41.928Z
Learning: In frontend/src/components/ActionButton.tsx, the user Rajgupta36 intentionally changed text-blue-600 to text-[#1D7BD7] to align the text color with the border color (#1D7BD7) for visual consistency, prioritizing design alignment over theme tokens.

📚 Learning: 2025-09-17T02:42:41.928Z

Learnt from: Rajgupta36
Repo: OWASP/Nest PR: 2288
File: frontend/src/components/ActionButton.tsx:0-0
Timestamp: 2025-09-17T02:42:41.928Z
Learning: In frontend/src/components/ActionButton.tsx, the user Rajgupta36 intentionally changed text-blue-600 to text-[#1D7BD7] to align the text color with the border color (#1D7BD7) for visual consistency, prioritizing design alignment over theme tokens.

Applied to files:

• frontend/src/components/ShowMoreButton.tsx

📚 Learning: 2025-12-29T22:01:53.874Z

Learnt from: ShashaankS
Repo: OWASP/Nest PR: 3086
File: frontend/src/components/SortBy.tsx:45-45
Timestamp: 2025-12-29T22:01:53.874Z
Learning: In frontend/src/components/SortBy.tsx, the SelectItem uses hover:bg-transparent intentionally for better visual appeal and theme consistency. This design choice prioritizes a cleaner aesthetic over hover background feedback.

Applied to files:

• frontend/src/components/ShowMoreButton.tsx

🔇 Additional comments (1)

frontend/src/components/ShowMoreButton.tsx (1)

19-19: Excellent accessibility improvement!

The styling changes correctly implement both PR objectives:

1. Internal padding added: px-2 py-1 provides 8px horizontal and 4px vertical padding, creating adequate space between the button text and the focus outline.

2. Keyboard-only focus indicator: Switching from focus: to focus-visible: ensures the outline appears only during keyboard navigation, not on mouse click or touch—exactly as intended.

The combination of px-2 padding with outline-offset-2 provides approximately 16px total clearance from text to outline, which is well-suited for accessibility.

---

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.}

[kasya]

@anurag2787 thanks for updating this 👍🏼
I'm not sure I like left padding tbh - a couple of people already tried to update it several times, and each time I reverted the change. The main reason is that with text alignment for Show .. gets messed up.

But apparently that's something most people are fine with. So I'll approve it as is :)

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud