Skip to content

refactor: implement polymorphic Button and improve accessibility - #60

Open
birdcoin0 wants to merge 5 commits into
MergeFi:mainfrom
birdcoin0:main
Open

refactor: implement polymorphic Button and improve accessibility#60
birdcoin0 wants to merge 5 commits into
MergeFi:mainfrom
birdcoin0:main

Conversation

@birdcoin0

Copy link
Copy Markdown

Description

Closes #55

This PR addresses the requested audit of the Button component and its call sites across the codebase to ensure semantic HTML, proper accessibility, and polymorphic rendering.

Changes

  • Button Polymorphism: Refactored Button.tsx to be a polymorphic component using forwardRef. It now supports the as prop, allowing it to render as <a> or <Link> when navigation is required, rather than forcing a <button> tag.
  • Accessibility Improvements:
    • Implemented aria-busy for loading states. This allows screen readers to distinguish between a "loading/in-flight" state and a "disabled/invalid" state.
    • Added forwardRef to ensure proper ref forwarding, critical for accessibility and integration with UI libraries.
  • Call-site Audits:
    • Updated Navbar.tsx and ConnectPanel.tsx to use semantic link-style buttons for GitHub OAuth/redirects.
    • Updated IssueActions.tsx to use the new isLoading prop instead of disabled for async actions, improving the screen reader experience.

Verification

  • Verified that all existing visual variants and sizes render correctly.
  • Confirmed that navigation CTAs (like "Connect GitHub") now support middle-click-to-open and right-click-copy-link behavior.
  • Manually audited loading/disabled states for screen reader compliance.

@chonilius

Copy link
Copy Markdown
Contributor

fix ci

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.

Make Button a correct polymorphic, accessible primitive (link vs button semantics)

2 participants