Skip to content

fix: use dynamic anchor id from network prop in AddNetworkButton#607

Open
amathxbt wants to merge 1 commit intoinkonchain:mainfrom
amathxbt:fix/add-network-button-dynamic-anchor-id
Open

fix: use dynamic anchor id from network prop in AddNetworkButton#607
amathxbt wants to merge 1 commit intoinkonchain:mainfrom
amathxbt:fix/add-network-button-dynamic-anchor-id

Conversation

@amathxbt
Copy link
Copy Markdown

Bug

AddNetworkButton hardcodes id="mainnet" and href="#mainnet" on the section anchor regardless of which network prop is passed:

<a
  href="#mainnet"    // ❌ always "mainnet"
  id="mainnet"      // ❌ always "mainnet"
  className="subheading-anchor"
  aria-label="Permalink for this section"
></a>

When this component is rendered for both mainnet and sepolia on the same page, two elements share id="mainnet", which:

  • Produces invalid HTML (duplicate id attributes)
  • Breaks anchor navigation#mainnet always jumps to the first matching element, making the second network section unreachable via URL hash
  • Fails WCAG 2.1 accessibility requirements (each id must be unique per page)

Fix

Derive the id and href dynamically from the network prop:

<a
  href={`#${network}`}   // ✅ e.g. "#ink-mainnet" or "#ink-sepolia"
  id={network}           // ✅ unique per network
  className="subheading-anchor"
  aria-label="Permalink for this section"
></a>

Impact

Anywhere this component is rendered for multiple networks on one page, anchor navigation for all networks except the first is silently broken.

@amathxbt amathxbt requested a review from a team as a code owner April 27, 2026 15:52
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.

1 participant