Fix button focus styling

[DS123-ally]

Description

Fixes the persistent dark state on the Next button after it is clicked.

Fixes #7940.

The shared button styling applied the same dark background to both :hover and :focus. After a mouse click, the button retained focus, so it stayed visually dark until focus moved elsewhere. This made the button look inactive or disabled.

This change keeps the dark styling on hover only and adds a :focus-visible outline so keyboard users still get a clear focus indicator.

Before

632756758-eace8c17-4634-4721-a28b-c4787ba3f4d7.mp4

After

next-button-focus-fix-demo.1.mp4

The first section shows the original issue: the Next button remains dark after click. The final section shows the fixed behavior: the button returns to its normal yellow state immediately after click.

Validation

• Ran .\node_modules\.bin\eslint.cmd src\reusecore\Button\btn.style.js
• Ran git diff --check
• Verified the behavior with a local before/after browser test page

Summary by CodeRabbit

• Style
  • Improved button focus styling for keyboard navigation with a clear, offset outline.
  • Suppressed unnecessary focus outlines for non-keyboard interactions.
  • Preserved existing hover colors, backgrounds, and shadows.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: a13e4168-89cf-4842-b6d2-3c2c3ef7a10a

📥 Commits

Reviewing files that changed from the base of the PR and between e389f00 and 453f68e.

📒 Files selected for processing (1)

• src/reusecore/Button/btn.style.js

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

• src/reusecore/Button/btn.style.js

Included review availability: Your plan includes up to 4 reviews per rolling hour; 3 remain after this review.

---

📝 Walkthrough

Walkthrough

The button styles separate hover behavior from focus behavior. Focus-visible buttons receive an offset active-color outline. Other focus states suppress the outline.

Changes

Button focus styling

Layer / File(s)	Summary
Button focus-state rules src/reusecore/Button/btn.style.js	The combined hover and focus rule is split into hover-only, :focus-visible, and :focus:not(:focus-visible) rules.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Merge Risk: ⚪ Minimal · up to 453f6

This localized styling change separates hover and keyboard focus behavior so clicked buttons return to their normal appearance while retaining a visible keyboard focus indicator; no actionable merge-blocking risk remains after normal checks and review.

Possibly related PRs

• layer5io/layer5#7941: Both PRs modify focus styling in src/reusecore/Button/btn.style.js.
• layer5io/layer5#7960: Both PRs update focus-visible outline behavior in styles.

🚥 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 clearly identifies the main change: fixing button focus styling.
Linked Issues check	✅ Passed	The styling changes address issue #7940 by removing persistent dark focus styling after button clicks while preserving keyboard focus indication.
Out of Scope Changes check	✅ Passed	The changes are limited to shared button focus and hover styling and match the linked issue objectives.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed: dependency version conflict. Check your lock file or package.json.

---

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

[github-actions]

Preview deployment for PR #7962 removed.

This PR preview was automatically pruned because we keep only the 3 most recently updated previews on GitHub Pages to stay within deployment size limits.

If needed, push a new commit to this PR to generate a fresh preview.

[ishwar170695]

Since this PR is intentionally self-contained and shouldn't depend on #7960 merging first, could the button's :focus-visible style use the same theme.secondaryColor / 3px focus treatment introduced in #7960? This would keep #7962 independently mergeable while maintaining a consistent keyboard-focus indicator across the site.

[DS123-ally]

Since this PR is intentionally self-contained and shouldn't depend on #7960 merging first, could the button's :focus-visible style use the same theme.secondaryColor / 3px focus treatment introduced in #7960? This would keep #7962 independently mergeable while maintaining a consistent keyboard-focus indicator across the site.

okay i will fix

[DS123-ally]

@Sbragul26 can you plz review the pr i have fix it.

[PARTH-TUSSLE]

Hey @DS123-ally, nice work! The code changes look good overall. One suggestion regarding the before/after preview.
The Before recording is clear and shows the original behavior well. However, in the After recording, the video first shows the original issue again, and the actual fixed behavior is then partially clipped/zoomed in, which makes it difficult to clearly verify the change.
I’d suggest re-recording the After preview using the same framing, positioning, and flow as the Before recording, but with the updated changes applied. That way, both recordings can be compared directly and the fixed behavior is clearly visible.
Other than that the changes look good, just keep this thing in mind.

[banana-three-join]

Ty!