Skip to content

fix: improve ARIA roles, semantic HTML, and touch targets #599

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

Draft
rickstaa wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

fix: improve ARIA roles, semantic HTML, and touch targets #599

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
9 changes: 5 additions & 4 deletions components/Drawer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { DrawerItem } from "@layouts/main";
import { Box, Flex, Link as A, Text } from "@livepeer/design-system";
import { Box, Flex, Link as A } from "@livepeer/design-system";
import { IS_L2 } from "lib/chains";
import Link from "next/link";
import Router, { useRouter } from "next/router";
Expand Down Expand Up @@ -161,8 +161,9 @@ const Index = ({

<LlamaswapModal
trigger={
<A
as={Text}
<Box
as="button"
type="button"
css={{
cursor: "pointer",
fontSize: "$2",
Expand All @@ -171,7 +172,7 @@ const Index = ({
}}
Comment on lines 164 to 172

Copilot AI Mar 25, 2026

Copy link

Choose a reason for hiding this comment

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

This Box is now rendered as a <button>, but its styles don’t reset default button UI (background, border, padding), which can cause inconsistent appearance across browsers. In this codebase, other Box as="button" usages explicitly set background: "none" and border: "none" (e.g. components/Table/Pagination.tsx:35-45). Consider applying the same reset here.

Copilot uses AI. Check for mistakes.
>
Get LPT
</A>
</Box>
}
>
<Box
Expand Down
2 changes: 2 additions & 0 deletions components/ExplorerChart/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,7 @@ const ExplorerChart = ({
return (
<Box css={{ position: "relative", width: "100%", height: "100%" }}>
<Box
role="group"
css={{
position: "absolute",
zIndex: 3,
Expand Down Expand Up @@ -264,6 +265,7 @@ const ExplorerChart = ({
}
>
<Flex
role="group"
css={{
alignItems: "center",
}}
Expand Down
43 changes: 23 additions & 20 deletions components/OrchestratorList/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,7 @@ const OrchestratorList = ({
</Box>
}
>
<Box>Orchestrator</Box>
<Box role="button">Orchestrator</Box>

Copilot AI Mar 25, 2026

Copy link

Choose a reason for hiding this comment

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

Adding role="button" to the header label doesn’t make the column sortable header keyboard-accessible (the sort handlers are attached to the <Th> via getSortByToggleProps, and the <Box> isn’t focusable). Consider fixing this at the table header level by rendering an actual <button type="button"> inside the <Th>, moving the sort toggle props to that button, and setting appropriate aria-sort.

Suggested change
<Box role="button">Orchestrator</Box>
<Box>Orchestrator</Box>

Copilot uses AI. Check for mistakes.

@vercel vercel Bot Mar 25, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Box elements inside ExplorerTooltip were given role="button" but lack keyboard handlers and onClick listeners, making the role semantically incorrect and potentially confusing to screen readers.

Fix on Vercel

</ExplorerTooltip>
),
accessor: "id",
Expand Down Expand Up @@ -356,7 +356,7 @@ const OrchestratorList = ({
</Box>
}
>
<Box>Forecasted Yield</Box>
<Box role="button">Forecasted Yield</Box>
</ExplorerTooltip>
</Flex>
),
Expand All @@ -376,6 +376,7 @@ const OrchestratorList = ({
<Popover>
<PopoverTrigger disabled={isNewlyActive} asChild>
<Badge
role="button"
size="2"
css={{
cursor: !isNewlyActive ? "pointer" : "default",
Expand Down Expand Up @@ -853,7 +854,7 @@ const OrchestratorList = ({
</Box>
}
>
<Box>Delegated Stake</Box>
<Box role="button">Delegated Stake</Box>
</ExplorerTooltip>
),
accessor: "totalStake",
Expand Down Expand Up @@ -887,7 +888,7 @@ const OrchestratorList = ({
</Box>
}
>
<Box>Trailing 90D Fees</Box>
<Box role="button">Trailing 90D Fees</Box>
</ExplorerTooltip>
),
accessor: "ninetyDayVolumeETH",
Expand Down Expand Up @@ -921,23 +922,21 @@ const OrchestratorList = ({
}}
asChild
>
<Flex css={{ alignItems: "center" }}>
<IconButton
aria-label="Orchestrator actions"
css={{
cursor: "pointer",
marginLeft: "$1",
opacity: 1,
<IconButton
aria-label="Orchestrator actions"
css={{
cursor: "pointer",
marginLeft: "$1",
opacity: 1,
transition: "background-color .3s",
"&:hover": {
bc: "$primary5",
transition: "background-color .3s",
"&:hover": {
bc: "$primary5",
transition: "background-color .3s",
},
}}
>
<DotsHorizontalIcon />
</IconButton>
</Flex>
},
}}
>
<DotsHorizontalIcon />
</IconButton>
</PopoverTrigger>
<PopoverContent
css={{ borderRadius: "$4", bc: "$neutral4" }}
Expand Down Expand Up @@ -1055,6 +1054,7 @@ const OrchestratorList = ({
asChild
>
<Badge
role="button"
size="2"
css={{
cursor: "pointer",
Expand Down Expand Up @@ -1152,6 +1152,7 @@ const OrchestratorList = ({
asChild
>
<Badge
role="button"
size="2"
css={{
cursor: "pointer",
Expand Down Expand Up @@ -1239,6 +1240,7 @@ const OrchestratorList = ({
asChild
>
<Badge
role="button"
size="2"
css={{
cursor: "pointer",
Expand Down Expand Up @@ -1321,6 +1323,7 @@ const OrchestratorList = ({
asChild
>
<Badge
role="button"
size="2"
css={{
cursor: "pointer",
Expand Down
85 changes: 46 additions & 39 deletions components/PopoverLink/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,49 +3,56 @@ import { ChevronRightIcon } from "@modulz/radix-icons";
import Link from "next/link";

const PopoverLink = ({ href, children, newWindow = false }) => {
return (
<A
as={Link}
href={href}
passHref
{...(newWindow
? {
target: "_blank",
rel: "noopener noreferrer",
}
: {})}
css={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
textDecoration: "none",
borderRadius: "$2",
cursor: "pointer",
marginBottom: "$1",
paddingLeft: "$3",
paddingRight: "$3",
paddingTop: "$1",
paddingBottom: "$1",
const linkStyles = {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
textDecoration: "none",
borderRadius: "$2",
cursor: "pointer",
marginBottom: "$1",
paddingLeft: "$3",
paddingRight: "$3",
paddingTop: "$1",
paddingBottom: "$1",
transition: ".2s transform",
"&:last-child": {
marginBottom: 0,
},
svg: {
transition: ".2s transform",
transform: "translateX(0px)",
},
"&:hover": {
bc: "$neutral6",
svg: {
transition: ".2s transform",
"&:last-child": {
marginBottom: 0,
},
svg: {
transition: ".2s transform",
transform: "translateX(0px)",
},
"&:hover": {
bc: "$neutral6",
svg: {
transition: ".2s transform",
transform: "translateX(6px)",
},
},
}}
>
transform: "translateX(6px)",
},
},
};

// For external links, use regular anchor tag to avoid Next.js Link issues
if (newWindow || href.startsWith("http")) {

@vercel vercel Bot Mar 25, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

PopoverLink component incorrectly uses regular anchor tag for internal links when newWindow=true, breaking Next.js routing

Fix on Vercel

return (
<A href={href} target="_blank" rel="noopener noreferrer" css={linkStyles}>
{children}
<Box
as={ChevronRightIcon}
aria-hidden="true"
css={{ marginLeft: "$2", width: 16, height: 16 }}
/>
</A>
);
}

// For internal links, use Next.js Link
return (
<A as={Link} href={href} passHref css={linkStyles}>
{children}
<Box
as={ChevronRightIcon}
aria-hidden="true"
css={{ marginLeft: "$2", width: 16, height: 16 }}
/>
</A>
Expand Down
6 changes: 5 additions & 1 deletion components/RoundStatus/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ const Index = ({
</Box>
}
>
<Flex>
<Flex role="group">
<Text
css={{
fontWeight: 600,
Expand All @@ -136,6 +136,7 @@ const Index = ({
{isRoundLocked ? (
<Box
as={Cross1Icon}
aria-hidden="true"
css={{
marginLeft: "$2",
width: 20,
Expand All @@ -146,6 +147,7 @@ const Index = ({
) : (
<Box
as={CheckIcon}
aria-hidden="true"
css={{
marginLeft: "$1",
width: 20,
Expand Down Expand Up @@ -246,6 +248,7 @@ const Index = ({
</Text>
</Box>
<ExplorerTooltip
role="group"
multiline
Comment on lines 248 to 252

Copilot AI Mar 25, 2026

Copy link

Choose a reason for hiding this comment

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

role="group" is being passed to ExplorerTooltip, which forwards props onto Radix Tooltip.Content. This overrides the content’s default role="tooltip", breaking tooltip semantics for assistive tech. Remove the role prop from ExplorerTooltip and, if grouping is needed, apply role="group" (and an accessible name if appropriate) on a wrapper around the trigger content instead.

Copilot uses AI. Check for mistakes.
content={
<Box>
Expand Down Expand Up @@ -304,6 +307,7 @@ const Index = ({
</Flex>
</ExplorerTooltip>
<ExplorerTooltip
role="group"
multiline
Comment on lines 307 to 311

Copilot AI Mar 25, 2026

Copy link

Choose a reason for hiding this comment

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

Same issue here: role="group" on ExplorerTooltip will be applied to the tooltip content element and can override the required role="tooltip". Drop the role prop on ExplorerTooltip and put grouping semantics on a separate wrapper if needed.

Copilot uses AI. Check for mistakes.
content={
<Box>
Expand Down
5 changes: 3 additions & 2 deletions layouts/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -696,7 +696,8 @@ const Layout = ({ children, title = "Livepeer Explorer" }) => {
</Flex>
</Container>
</AppBar>
<Flex
<Box
as="main"
css={{
position: "relative",
width: "100%",
Expand All @@ -715,7 +716,7 @@ const Layout = ({ children, title = "Livepeer Explorer" }) => {
)}
{children}
</Box>
</Flex>
</Box>
</Box>
</Box>
<TxConfirmedDialog />
Expand Down
Loading
Loading