Skip to content

fix(ui): add focus-visible ring styles to milestone badge mint buttons - #161

Open
Shivang9983 wants to merge 1 commit into
BetterDevOrg:mainfrom
Shivang9983:fix/issue-152-mint-focus
Open

Shivang9983 wants to merge 1 commit into
BetterDevOrg:mainfrom
Shivang9983:fix/issue-152-mint-focus

Conversation

@Shivang9983

Copy link
Copy Markdown
Contributor

Summary

  • Added focus-visible ring styles and layout adjustments (focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-sky focus-visible:ring-offset-2 focus-visible:ring-offset-black) to the milestone badge mint buttons and disconnect actions in MilestoneBadgeMintActions.
  • Improves keyboard accessibility for screen readers and power users.

Related issue

Fixes #152

Type of change

  • Bug fix / UI Enhancement
  • New feature
  • Documentation
  • Other (describe below)

How to test

  1. Go to a community or passport page where milestone badge mint actions are displayed.
  2. Press the Tab key to navigate through the interactive elements.
  3. Verify that a clear focus-visible ring appears around the mint/connect and disconnect buttons when focused via keyboard, matching the brand design patterns.

Checklist

  • I ran npm run build (and verified local build passes)
  • I did not commit secrets or .env.local
  • I read CONTRIBUTING.md

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Good first issue] Focus-visible styles on milestone mint buttons

1 participant