[Button] Fix Next/Previous buttons staying in clicked state

[vermarjun]

Description

This PR fixes #7940

Notes for Reviewers

The stuck state comes from reusecore/Button, not from the pagination component.

The base ButtonStyle rule paints :hover and :focus with the same declaration:

&:hover,
&:focus {
    color: white;
    background: ${props => props.theme.activeColor};   // #3C494F in both themes
}

The three variant blocks below it all re-declare :hover. None of them re-declare :focus. A mouse click leaves the button focused, so the base :focus rule keeps winning and the button sits at #3C494F until focus moves. Clicking anywhere else blurs it, which is the "only comes back after clicking somewhere else" part of the report.

The change scopes that base rule to :focus-visible. Browsers don't match :focus-visible when a button is clicked with a pointer, so the button drops straight back to its own color. They do match it on tab, so keyboard users keep the same focus indicator they had before.

Measured on /resources with gatsby develop, reading computed background-color after a real click with the pointer moved off the button:

button	at rest	after click, before	after click, with fix
Next $primary	#EBC017	#3C494F	#EBC017
Previous $secondary	#00B39F	#3C494F	#00B39F

Tab focus still resolves to #3C494F on both, so nothing is lost for keyboard navigation.

Before, after clicking Next:

After:

Two notes:

1. Next and Previous were only the visible case. The rule lives on the shared button, so every $primary, $secondary and $outlined button on the site held the dark state after a click.
2. btn.style.js isn't prettier formatted on master, so the lint-staged pre-commit hook rewrites the whole file (75 insertions, 71 deletions) alongside the fix. I committed with --no-verify to keep this reviewable at one line. Happy to push the reformat as a separate commit if you want it.

Signed commits

• Yes, I signed my commits.

Summary by CodeRabbit

• Style
  • Updated button focus styling to appear when keyboard navigation visibly focuses the button, reducing focus-ring display during mouse or touch interactions.

[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: 452fe45b-5f25-48c6-8499-f6597abb402c

📥 Commits

Reviewing files that changed from the base of the PR and between 62830be and e4c77a5.

📒 Files selected for processing (1)

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

---

📝 Walkthrough

Walkthrough

The button focus selector changed from :focus to :focus-visible. Other button styling remains unchanged.

Changes

Button focus behavior

Layer / File(s)	Summary
Update button focus selector src/reusecore/Button/btn.style.js	Button focus styling now applies only to :focus-visible states.

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

🚥 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 fix for Next and Previous buttons remaining in a clicked state.
Linked Issues check	✅ Passed	The change uses :focus-visible to prevent pointer clicks from retaining focus styling and resolves issue #7940 while preserving keyboard focus indication.
Out of Scope Changes check	✅ Passed	The pull request changes only the shared button focus selector, which directly supports the linked issue and stated 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.}

[vermarjun]

@leecalcote could you take a look when you get a chance? One line in reusecore/Button, swapping :focus for :focus-visible so a mouse click stops parking buttons in the dark activeColor state.

Two calls I'd like your read on:

• It lands on every $primary, $secondary and $outlined button, not just the pagination pair in [Bug] Next and previous button stays in clicked state #7940, because the rule sits on the shared component.
• I skipped the prettier hook so the diff stays at one line. Running it reformats all 86 lines of btn.style.js, which isn't prettier formatted on master today. Say the word and I'll push that as its own commit.