From 0648e79949de06ea12add6146ada6e1741cc4c0b Mon Sep 17 00:00:00 2001
From: Rick Staa <rick.staa@outlook.com>
Date: Wed, 25 Mar 2026 12:04:40 +0100
Subject: [PATCH] fix: improve ARIA roles, semantic HTML, and touch targets

Add role="button" to sortable table headers and action badges.
Add role="group" to related UI element clusters.
Replace non-semantic elements with proper button/main landmarks.
Refactor PopoverLink to separate internal/external link handling.
Increase touch targets to 44px minimum for mobile accessibility.

Extracted from #509.

Co-Authored-By: Sebastian <115311276+Roaring30s@users.noreply.github.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 components/Drawer/index.tsx           |  9 +--
 components/ExplorerChart/index.tsx    |  2 +
 components/OrchestratorList/index.tsx | 43 +++++++-------
 components/PopoverLink/index.tsx      | 85 +++++++++++++++------------
 components/RoundStatus/index.tsx      |  6 +-
 layouts/main.tsx                      |  5 +-
 pages/index.tsx                       | 36 +++++-------
 7 files changed, 98 insertions(+), 88 deletions(-)

diff --git a/components/Drawer/index.tsx b/components/Drawer/index.tsx
index 860eb764..6418d7ab 100644
--- a/components/Drawer/index.tsx
+++ b/components/Drawer/index.tsx
@@ -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";
@@ -161,8 +161,9 @@ const Index = ({
 
             <LlamaswapModal
               trigger={
-                <A
-                  as={Text}
+                <Box
+                  as="button"
+                  type="button"
                   css={{
                     cursor: "pointer",
                     fontSize: "$2",
@@ -171,7 +172,7 @@ const Index = ({
                   }}
                 >
                   Get LPT
-                </A>
+                </Box>
               }
             >
               <Box
diff --git a/components/ExplorerChart/index.tsx b/components/ExplorerChart/index.tsx
index fe52a5c0..8c91d334 100644
--- a/components/ExplorerChart/index.tsx
+++ b/components/ExplorerChart/index.tsx
@@ -237,6 +237,7 @@ const ExplorerChart = ({
   return (
     <Box css={{ position: "relative", width: "100%", height: "100%" }}>
       <Box
+        role="group"
         css={{
           position: "absolute",
           zIndex: 3,
@@ -264,6 +265,7 @@ const ExplorerChart = ({
           }
         >
           <Flex
+            role="group"
             css={{
               alignItems: "center",
             }}
diff --git a/components/OrchestratorList/index.tsx b/components/OrchestratorList/index.tsx
index ae6ddb86..8ea6396a 100644
--- a/components/OrchestratorList/index.tsx
+++ b/components/OrchestratorList/index.tsx
@@ -253,7 +253,7 @@ const OrchestratorList = ({
               </Box>
             }
           >
-            <Box>Orchestrator</Box>
+            <Box role="button">Orchestrator</Box>
           </ExplorerTooltip>
         ),
         accessor: "id",
@@ -356,7 +356,7 @@ const OrchestratorList = ({
                 </Box>
               }
             >
-              <Box>Forecasted Yield</Box>
+              <Box role="button">Forecasted Yield</Box>
             </ExplorerTooltip>
           </Flex>
         ),
@@ -376,6 +376,7 @@ const OrchestratorList = ({
             <Popover>
               <PopoverTrigger disabled={isNewlyActive} asChild>
                 <Badge
+                  role="button"
                   size="2"
                   css={{
                     cursor: !isNewlyActive ? "pointer" : "default",
@@ -853,7 +854,7 @@ const OrchestratorList = ({
               </Box>
             }
           >
-            <Box>Delegated Stake</Box>
+            <Box role="button">Delegated Stake</Box>
           </ExplorerTooltip>
         ),
         accessor: "totalStake",
@@ -887,7 +888,7 @@ const OrchestratorList = ({
               </Box>
             }
           >
-            <Box>Trailing 90D Fees</Box>
+            <Box role="button">Trailing 90D Fees</Box>
           </ExplorerTooltip>
         ),
         accessor: "ninetyDayVolumeETH",
@@ -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" }}
@@ -1055,6 +1054,7 @@ const OrchestratorList = ({
                 asChild
               >
                 <Badge
+                  role="button"
                   size="2"
                   css={{
                     cursor: "pointer",
@@ -1152,6 +1152,7 @@ const OrchestratorList = ({
                   asChild
                 >
                   <Badge
+                    role="button"
                     size="2"
                     css={{
                       cursor: "pointer",
@@ -1239,6 +1240,7 @@ const OrchestratorList = ({
                   asChild
                 >
                   <Badge
+                    role="button"
                     size="2"
                     css={{
                       cursor: "pointer",
@@ -1321,6 +1323,7 @@ const OrchestratorList = ({
                   asChild
                 >
                   <Badge
+                    role="button"
                     size="2"
                     css={{
                       cursor: "pointer",
diff --git a/components/PopoverLink/index.tsx b/components/PopoverLink/index.tsx
index 63a81536..e41343e8 100644
--- a/components/PopoverLink/index.tsx
+++ b/components/PopoverLink/index.tsx
@@ -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")) {
+    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>
diff --git a/components/RoundStatus/index.tsx b/components/RoundStatus/index.tsx
index ba0a9e90..4b0c3c71 100644
--- a/components/RoundStatus/index.tsx
+++ b/components/RoundStatus/index.tsx
@@ -122,7 +122,7 @@ const Index = ({
             </Box>
           }
         >
-          <Flex>
+          <Flex role="group">
             <Text
               css={{
                 fontWeight: 600,
@@ -136,6 +136,7 @@ const Index = ({
             {isRoundLocked ? (
               <Box
                 as={Cross1Icon}
+                aria-hidden="true"
                 css={{
                   marginLeft: "$2",
                   width: 20,
@@ -146,6 +147,7 @@ const Index = ({
             ) : (
               <Box
                 as={CheckIcon}
+                aria-hidden="true"
                 css={{
                   marginLeft: "$1",
                   width: 20,
@@ -246,6 +248,7 @@ const Index = ({
               </Text>
             </Box>
             <ExplorerTooltip
+              role="group"
               multiline
               content={
                 <Box>
@@ -304,6 +307,7 @@ const Index = ({
               </Flex>
             </ExplorerTooltip>
             <ExplorerTooltip
+              role="group"
               multiline
               content={
                 <Box>
diff --git a/layouts/main.tsx b/layouts/main.tsx
index a02fee05..dad6e4fa 100644
--- a/layouts/main.tsx
+++ b/layouts/main.tsx
@@ -696,7 +696,8 @@ const Layout = ({ children, title = "Livepeer Explorer" }) => {
                     </Flex>
                   </Container>
                 </AppBar>
-                <Flex
+                <Box
+                  as="main"
                   css={{
                     position: "relative",
                     width: "100%",
@@ -715,7 +716,7 @@ const Layout = ({ children, title = "Livepeer Explorer" }) => {
                     )}
                     {children}
                   </Box>
-                </Flex>
+                </Box>
               </Box>
             </Box>
             <TxConfirmedDialog />
diff --git a/pages/index.tsx b/pages/index.tsx
index 0e5b1782..90a3a69e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -362,8 +362,10 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => {
                 justifyContent: "space-between",
                 marginBottom: "$4",
                 alignItems: "center",
+                gap: "$4",
                 "@bp1": {
                   flexDirection: "row",
+                  gap: "$5",
                 },
               }}
             >
@@ -398,6 +400,7 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => {
                   width: "100%",
                   justifyContent: "space-between",
                   flexWrap: "nowrap",
+                  gap: "$3",
                   "@bp1": {
                     width: "auto",
                     justifyContent: "flex-start",
@@ -413,14 +416,8 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => {
                       css={{
                         color: "$hiContrast",
                         fontSize: "$2",
-                        paddingLeft: 0,
-                        paddingRight: 0,
-                        marginRight: 0,
-                        "@bp1": {
-                          paddingLeft: "$2",
-                          paddingRight: "$2",
-                          marginRight: "$2",
-                        },
+                        minHeight: "44px",
+                        padding: "$2 $3",
                       }}
                     >
                       Performance Leaderboard
@@ -433,16 +430,12 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => {
                     css={{
                       color: "$hiContrast",
                       fontSize: "$2",
-                      paddingLeft: 0,
-                      paddingRight: 0,
-                      "@bp1": {
-                        paddingLeft: "$2",
-                        paddingRight: "$2",
-                      },
+                      minHeight: "44px",
+                      padding: "$2 $3",
                     }}
                   >
                     View All
-                    <Box as={ArrowRightIcon} css={{ marginLeft: "$1" }} />
+                    <Box as={ArrowRightIcon} aria-hidden="true" css={{ marginLeft: "$1" }} />
                   </Button>
                 </A>
               </Flex>
@@ -477,8 +470,10 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => {
                 marginBottom: "$4",
                 marginTop: "$7",
                 alignItems: "center",
+                gap: "$4",
                 "@bp1": {
                   flexDirection: "row",
+                  gap: "$5",
                 },
               }}
             >
@@ -512,6 +507,7 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => {
                 css={{
                   width: "100%",
                   justifyContent: "flex-start",
+                  gap: "$3",
                   "@bp1": {
                     width: "auto",
                   },
@@ -524,16 +520,12 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => {
                     css={{
                       color: "$hiContrast",
                       fontSize: "$2",
-                      paddingLeft: 0,
-                      paddingRight: 0,
-                      "@bp1": {
-                        paddingLeft: "$2",
-                        paddingRight: "$2",
-                      },
+                      minHeight: "44px",
+                      padding: "$2 $3",
                     }}
                   >
                     View All
-                    <Box as={ArrowRightIcon} css={{ marginLeft: "$1" }} />
+                    <Box as={ArrowRightIcon} aria-hidden="true" css={{ marginLeft: "$1" }} />
                   </Button>
                 </A>
               </Flex>