fix(a11y): WCAG 2.1 AA fixes (#2219)

apps/client/src/ee/page-verification/components/page-verification-modal.tsx

@@ -4,8 +4,8 @@ import {
   Menu,
   Modal,
   Text,
-  ThemeIcon,
   Tooltip,
+  UnstyledButton,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import {
@@ -100,15 +100,20 @@ export function PageVerificationBadge({
   if (!pageId) return null;
   if (!hasVerificationFeature) {
     if (readOnly) return null;
+    const lockedLabel = `${t("Add verification")} — ${upgradeLabel}`;
+    // Use ActionIcon (a real <button>) instead of a ThemeIcon so the tooltip
+    // is reachable on keyboard focus, and screen readers announce the upgrade
+    // hint via the accessible name. Click is a no-op since the feature is
+    // gated; the tooltip explains why.
     return (
-      <Tooltip
-        label={`${t("Add verification")} — ${upgradeLabel}`}
-        withArrow
-        openDelay={250}
-      >
-        <ThemeIcon variant="subtle" color="gray">
+      <Tooltip label={lockedLabel} withArrow openDelay={250}>
+        <ActionIcon
+          variant="subtle"
+          color="gray"
+          aria-label={lockedLabel}
+        >
           <IconShieldCheck size={20} stroke={1.5} />
-        </ThemeIcon>
+        </ActionIcon>
       </Tooltip>
     );
   }
@@ -132,20 +137,25 @@ export function PageVerificationBadge({
     <>
       {status !== "none" ? (
         <Tooltip label={tooltipLabel} withArrow openDelay={250}>
-          <Group
-            gap={4}
+          <UnstyledButton
             onClick={open}
-            style={{ cursor: "pointer" }}
-            wrap="nowrap"
+            aria-label={tooltipLabel}
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 4,
+              cursor: "pointer",
+            }}
           >
             <IconRosetteDiscountCheckFilled
               size={18}
               color={`var(--mantine-color-${getStatusColor(status).replace(".", "-")})`}
+              aria-hidden="true"
             />
             <Text size="sm" c={getStatusColor(status)}>
               {getStatusLabel(status, t)}
             </Text>
-          </Group>
+          </UnstyledButton>
         </Tooltip>
       ) : !readOnly ? (
         <Tooltip label={t("Set up verification")} withArrow openDelay={250}>

apps/client/src/ee/page-verification/components/verification-list-table.tsx

@@ -18,6 +18,7 @@ import { CustomAvatar } from "@/components/ui/custom-avatar";
 import { buildPageUrl } from "@/features/page/page.utils";
 import { format } from "date-fns";
 import NoTableResults from "@/components/common/no-table-results";
+import rowClasses from "@/components/ui/clickable-table-row.module.css";
 
 const MAX_VISIBLE_VERIFIERS = 5;
 
@@ -124,12 +125,13 @@ export default function VerificationListTable({
               );
 
               return (
-                <Table.Tr key={item.id}>
+                <Table.Tr key={item.id} className={rowClasses.row}>
                   <Table.Td>
                     <Anchor
                       size="sm"
                       underline="never"
                       style={{ color: "var(--mantine-color-text)" }}
+                      className={rowClasses.link}
                       component={Link}
                       to={pageUrl}
                     >