fix: add alt tags, aria-labels, and aria-hidden for accessibility#597
fix: add alt tags, aria-labels, and aria-hidden for accessibility#597
Conversation
Add descriptive alt text to all avatar and migration diagram images. Add aria-labels to logo, social media, and contract address links. Add aria-hidden to decorative icons and rel="noopener noreferrer" to external links. Extracted from #509. Co-Authored-By: Sebastian <115311276+Roaring30s@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Improves UI accessibility and security hygiene across the Explorer by adding missing image alt text, improving link labeling for assistive tech, hiding decorative icons from screen readers, and hardening external links opened in new tabs.
Changes:
- Add
alttext to migration diagrams and avatar images. - Add
aria-labelto key links (logo/home, contract address links, social/profile links) andaria-hidden="true"to decorative icons. - Add
rel="noopener noreferrer"to external links opened in new tabs.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| pages/migrate/orchestrator.tsx | Adds alt text to the migration diagram image. |
| pages/migrate/delegator/index.tsx | Adds alt text to the migration diagram image. |
| pages/migrate/broadcaster.tsx | Adds alt text to the migration diagram image. |
| layouts/main.tsx | Adds aria-hidden to a decorative icon; adds rel + aria-label to external contract/documentation links. |
| components/Profile/index.tsx | Adds avatar alt text; adds aria-label/aria-hidden for social/profile links and icons. |
| components/Logo/index.tsx | Adds an accessible label to the home/logo link. |
| components/IdentityAvatar/index.tsx | Adds alt text to ENS/address avatar image. |
| components/DelegatingWidget/Header.tsx | Adds alt text to delegate avatar image. |
| components/AccountCell/index.tsx | Adds alt text to the account avatar image. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <Link href="/" passHref> | ||
| {markup} | ||
| <a aria-label="Livepeer Explorer home">{markup}</a> | ||
| </Link> |
There was a problem hiding this comment.
next/link in Next.js 16 renders an <a> internally; nesting a literal <a> child can trigger the “Invalid with child” error and produce invalid nested anchors. Put aria-label on the <Link> itself (or use legacyBehavior if you truly need a child anchor).
| <Link | ||
| passHref | ||
| href="https://docs.livepeer.org/references/contract-addresses" | ||
| > | ||
| <A> | ||
| <A | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| aria-label="Learn more about these contracts (opens in new tab)" | ||
| > |
There was a problem hiding this comment.
This uses next/link to wrap the design-system <A> (which renders an <a>), which in Next.js 16 results in invalid nested anchors and can throw the “Invalid with child” runtime/dev error. For this external URL, prefer a plain <A href=...> without next/link, or add legacyBehavior and ensure only a single anchor is rendered.
| href={identity.url} | ||
| target="__blank" | ||
| rel="noopener noreferrer" | ||
| aria-label={`Visit ${identity.url.replace(/(^\w+:|^)\/\//, "")}`} |
There was a problem hiding this comment.
target="__blank" is not the standard special target; it will reuse the same named window/tab instead of always opening a new tab. Use target="_blank" for external links (and keep rel="noopener noreferrer").
| href={`https://twitter.com/${identity.twitter}`} | ||
| target="__blank" | ||
| rel="noopener noreferrer" | ||
| aria-label={`View ${identity.twitter} on Twitter`} |
There was a problem hiding this comment.
target="__blank" is not the standard special target; it will reuse the same named window/tab instead of always opening a new tab. Use target="_blank" for external links (and keep rel="noopener noreferrer").
| href={`https://github.com/${identity.github}`} | ||
| target="__blank" | ||
| rel="noopener noreferrer" | ||
| aria-label={`View ${identity.github} on GitHub`} |
There was a problem hiding this comment.
target="__blank" is not the standard special target; it will reuse the same named window/tab instead of always opening a new tab. Use target="_blank" for external links (and keep rel="noopener noreferrer").
| aria-label={`Visit ${identity.url.replace(/(^\w+:|^)\/\//, "")}`} | ||
| > | ||
| <Flex | ||
| align="center" | ||
| css={{ marginTop: "$2", marginRight: "$3" }} | ||
| > | ||
| <Box as={GlobeIcon} css={{ marginRight: "$1" }} /> | ||
| <Box as={GlobeIcon} css={{ marginRight: "$1" }} aria-hidden="true" /> | ||
| {identity.url.replace(/(^\w+:|^)\/\//, "")} | ||
| </Flex> |
There was a problem hiding this comment.
Minor maintainability: identity.url.replace(/(^\w+:|^)\/\//, "") is computed twice (for aria-label and visible text). Consider extracting it once (e.g., const displayUrl = ...) to avoid divergence if the formatting changes.
Summary
alttext to all avatar images and migration diagramsaria-labelattributes to logo, social media links, and contract address linksaria-hidden="true"to decorative icons (Globe, Twitter, GitHub, ChevronDown, ArrowTopRight)rel="noopener noreferrer"to external links for securityExtracted from #509 by @Roaring30s — Lighthouse accessibility improvements.
Partially addresses #433.
Test plan
🤖 Generated with Claude Code