AddressDisplay copy-to-clipboard silently fails in non-HTTPS contexts with no fallback or aria-label

[k-deejah]

Problem

src/components/AddressDisplay.tsx copies the wallet address using the Clipboard API with a silent catch:

navigator.clipboard.writeText(address).catch(() => {
  /* fallback */
});

The comment says "fallback" but there is no actual fallback implementation. navigator.clipboard requires a secure context (HTTPS). In HTTP environments — local dev served over plain HTTP, CI preview deployments, or embedded webviews — navigator.clipboard is undefined and the copy button silently does nothing. Users get no feedback that the copy failed.

A second problem in the same file: the copy button element has no aria-label. Screen readers announce it as an unlabeled button, giving keyboard and assistive-technology users no indication of what the button does or which address it will copy.

Solution

1. Add a document.execCommand('copy') fallback via a temporary <textarea> element for non-HTTPS contexts:

navigator.clipboard.writeText(address).catch(() => {
  const el = document.createElement('textarea');
  el.value = address;
  el.style.position = 'fixed';
  el.style.opacity = '0';
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
});

2. Add aria-label={copied ? 'Copied!' : 'Copy address to clipboard'} to the button.

Acceptance Criteria

• Copying works in both HTTPS and plain HTTP contexts
• The copy button has a descriptive aria-label that updates after a successful copy
• When both clipboard methods fail, an error icon or message is shown for 2 seconds
• The 2-second "Copied" reset timeout still works after the fix
• No regressions in the existing copy behavior in secure contexts

---

Note for Contributors: If you're assigned to this issue, write a clear and detailed description for your pull request. Explain what was changed, why it was needed, how it was implemented, and include any relevant testing or screenshots where applicable.

[Akintobidavid]

@Akintobidavid has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

I’ve reviewed the issue and can implement the clipboard fallback and accessible copy button label, with focused tests covering successful copy, fallback behavior, and unsupported clipboard environments.

Please assign this to me, you won’t be disappointed, thank you.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Akintobidavid to this issue.

[kaizercodes]

@kaizercodes has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi, I can fix this
kindly assign

ℹ️ Repo Maintainers: To accept this application, review their application or assign @kaizercodes to this issue.

[sojetunde8]

@sojetunde8 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

I'd like to work on this.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @sojetunde8 to this issue.

[Sam-Rytech]

@Sam-Rytech has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi maintainer

I'd like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Sam-Rytech to this issue.

[drips-wave]

Congratulations, @Sam-Rytech! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on August 31, 2026.

🧑‍💻 @Sam-Rytech: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊