Skip to content

fix: add alt tags, aria-labels, and aria-hidden for accessibility #597

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rickstaa wants to merge 1 commit into
base: main
Choose a base branch
from
+35 −8
Open

fix: add alt tags, aria-labels, and aria-hidden for accessibility #597

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions components/AccountCell/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,9 @@ const Index = ({ active, address }) => {
borderColor: "$neutral5",
}}
src={identity.avatar}
alt={
identity?.name ? `${identity.name} avatar` : `${address} avatar`
}
/>
) : (
<QRCodeCanvas
Expand Down
5 changes: 5 additions & 0 deletions components/DelegatingWidget/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,11 @@ const Header = ({
height: 40,
}}
src={delegateProfile.avatar}
alt={
delegateProfile?.name
? `${delegateProfile.name} avatar`
: `${delegateProfile?.id || "delegate"} avatar`
}
/>
) : (
<QRCodeCanvas
Expand Down
1 change: 1 addition & 0 deletions components/IdentityAvatar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ const IdentityAvatar = ({ identity, address, size = 24, css = {} }: Props) => {
transition: "opacity 150ms ease",
}}
src={avatarSrc}
alt={`${address} avatar`}
onLoad={() => setImageLoaded(true)}
onError={() => setHasAvatarError(true)}
/>
Expand Down
2 changes: 1 addition & 1 deletion components/Logo/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const LivepeerLogo = ({ isDark, isLink = true }: Props) => {
if (!isLink) return markup;
return (
<Link href="/" passHref>
{markup}
<a aria-label="Livepeer Explorer home">{markup}</a>
</Link>
Comment on lines 59 to 61
Copy link

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Copilot uses AI. Check for mistakes.
);
};
Expand Down
12 changes: 9 additions & 3 deletions components/Profile/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,9 @@ const Index = ({ account, isMyAccount = false, identity }: Props) => {
height: "100%",
}}
src={identity.avatar}
alt={
identity?.name ? `${identity.name} avatar` : `${account} avatar`
}
/>
) : (
<Box
Expand Down Expand Up @@ -224,12 +227,13 @@ const Index = ({ account, isMyAccount = false, identity }: Props) => {
href={identity.url}
target="__blank"
rel="noopener noreferrer"
aria-label={`Visit ${identity.url.replace(/(^\w+:|^)\/\//, "")}`}
Comment on lines 227 to +230
Copy link

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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").

Copilot uses AI. Check for mistakes.
>
<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>
Comment on lines +230 to 238
Copy link

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
</A>
Expand All @@ -242,12 +246,13 @@ const Index = ({ account, isMyAccount = false, identity }: Props) => {
href={`https://twitter.com/${identity.twitter}`}
target="__blank"
rel="noopener noreferrer"
aria-label={`View ${identity.twitter} on Twitter`}
Comment on lines 246 to +249
Copy link

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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").

Copilot uses AI. Check for mistakes.
>
<Flex
align="center"
css={{ marginTop: "$2", marginRight: "$3" }}
>
<Box as={TwitterLogoIcon} css={{ marginRight: "$1" }} />
<Box as={TwitterLogoIcon} css={{ marginRight: "$1" }} aria-hidden="true" />
<Box
css={{
"@media (max-width: 400px)": {
Expand All @@ -268,12 +273,13 @@ const Index = ({ account, isMyAccount = false, identity }: Props) => {
href={`https://github.com/${identity.github}`}
target="__blank"
rel="noopener noreferrer"
aria-label={`View ${identity.github} on GitHub`}
Comment on lines 273 to +276
Copy link

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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").

Copilot uses AI. Check for mistakes.
>
<Flex
align="center"
css={{ marginTop: "$2", marginRight: "$3" }}
>
<Box as={GitHubLogoIcon} css={{ marginRight: "$1" }} />
<Box as={GitHubLogoIcon} css={{ marginRight: "$1" }} aria-hidden="true" />
<Box
css={{
"@media (max-width: 400px)": {
Expand Down
14 changes: 13 additions & 1 deletion layouts/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -620,6 +620,7 @@ const Layout = ({ children, title = "Livepeer Explorer" }) => {
<Box
css={{ marginLeft: "$1" }}
as={ChevronDownIcon}
aria-hidden="true"
/>
</Button>
</PopoverTrigger>
Expand Down Expand Up @@ -859,6 +860,12 @@ const ContractAddressesPopover = ({ activeChain }: { activeChain?: Chain }) => {
marginBottom: "$1",
}}
target="_blank"
rel="noopener noreferrer"
aria-label={`View ${
contractAddresses?.[
key as keyof typeof contractAddresses
]?.name ?? "contract"
} on block explorer`}
href={
contractAddresses?.[
key as keyof typeof contractAddresses
Expand Down Expand Up @@ -900,7 +907,11 @@ const ContractAddressesPopover = ({ activeChain }: { activeChain?: Chain }) => {
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)"
>
<Flex
css={{
marginTop: "$2",
Expand All @@ -922,6 +933,7 @@ const ContractAddressesPopover = ({ activeChain }: { activeChain?: Chain }) => {
height: 15,
}}
as={ArrowTopRightIcon}
aria-hidden="true"
/>
</Flex>
</A>
Expand Down
2 changes: 1 addition & 1 deletion pages/migrate/broadcaster.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -740,7 +740,7 @@ const MigrateBroadcaster = () => {

{state.image && (
<Box css={{ textAlign: "center", marginBottom: "$5" }}>
<Box as="img" src={state.image} />
<Box as="img" src={state.image} alt="Migration diagram" />
</Box>
)}

Expand Down
2 changes: 1 addition & 1 deletion pages/migrate/delegator/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -734,7 +734,7 @@ const MigrateUndelegatedStake = () => {

{state.image && (
<Box css={{ textAlign: "center", marginBottom: "$5" }}>
<Box as="img" src={state.image} />
<Box as="img" src={state.image} alt="Migration diagram" />
</Box>
)}

Expand Down
2 changes: 1 addition & 1 deletion pages/migrate/orchestrator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -711,7 +711,7 @@ const MigrateOrchestrator = () => {

{state.image && (
<Box css={{ textAlign: "center", marginBottom: "$5" }}>
<Box as="img" src={state.image} />
<Box as="img" src={state.image} alt="Migration diagram" />
</Box>
)}

Expand Down
Loading