[Bug] Next and previous button stays in clicked state

[Sbragul26]

Description

After clicking the Next button, its color changes from yellow to dark and stays that way. It only returns to the original yellow color after clicking somewhere else on the page, making it look inactive or disabled.

Expected Behavior

After the Next button is clicked, it should return to its normal yellow appearance immediately without requiring the user to click elsewhere on the page.

Screenshots

new-iss.mp4

Environment:

• Host OS:
• Browser:

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[ayanasarkar]

can I work on this issue?

[khushal-winner]

I'd like to take this on and will open a small PR to fix the Next/Previous button staying in the clicked state.

Proposed fix: investigate and update the button implementation/styles (use real , clear focus/active state or call blur(), and adjust CSS). @leecalcote @Sbragul26

[RaIyAn90]

Hi @Sbragul26 can I work on this?

[vermarjun]

Tracked this down. It isn't the pagination component, it's the shared reusecore/Button.

btn.style.js paints :hover and :focus with one declaration:

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

The $primary, $secondary and $outlined blocks below it each re-declare :hover, and not one of them re-declares :focus. Clicking with a mouse leaves the button focused, so the base :focus rule keeps winning and the button holds #3C494F. Clicking elsewhere blurs it, which is why the color comes back on its own.

Same reason Previous goes dark, around 0:11 in your video, right after it gets clicked.

Opened #7941. It scopes that base rule to :focus-visible, which a pointer click doesn't match, so the button returns to #EBC017 immediately. Tab still matches it, so the keyboard focus indicator stays where it was.

Worth knowing that this was never only about pagination. Every $primary, $secondary and $outlined button on the site sat in that dark state after a click.