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

apps/client/src/components/common/avatar-uploader.tsx

@@ -80,12 +80,20 @@ export default function AvatarUploader({
     }
   };
 
-  const ariaLabel = {
+  const actionLabel = {
     [AvatarIconType.AVATAR]: t("Change avatar"),
     [AvatarIconType.SPACE_ICON]: t("Change space icon"),
     [AvatarIconType.WORKSPACE_ICON]: t("Change workspace icon"),
   }[type];
 
+  // Per WCAG 2.5.3 (Label in Name), the accessible name must include the
+  // visible text. When no image is set, the avatar renders the name's
+  // initials, so prepend the name to the action label.
+  const ariaLabel =
+    !currentImageUrl && fallbackName
+      ? `${fallbackName} – ${actionLabel}`
+      : actionLabel;
+
   const handleRemove = async () => {
     if (disabled) return;
 

apps/client/src/components/common/copy.tsx

@@ -8,15 +8,19 @@ interface CopyProps {
   text: string;
   size?: MantineSize;
   color?: MantineColor;
+  /** Override the accessible name (and tooltip) when not yet copied. Lets callers disambiguate adjacent copy buttons for screen readers. */
+  label?: string;
 }
-export default function CopyTextButton({ text, size }: CopyProps) {
+export default function CopyTextButton({ text, size, label }: CopyProps) {
   const { t } = useTranslation();
 
+  const copyLabel = label ?? t("Copy");
+
   return (
     <CopyButton value={text} timeout={2000}>
       {({ copied, copy }) => (
         <Tooltip
-          label={copied ? t("Copied") : t("Copy")}
+          label={copied ? t("Copied") : copyLabel}
           withArrow
           position="right"
         >
@@ -25,7 +29,7 @@ export default function CopyTextButton({ text, size }: CopyProps) {
             variant="subtle"
             onClick={copy}
             size={size}
-            aria-label={copied ? t("Copied") : t("Copy")}
+            aria-label={copied ? t("Copied") : copyLabel}
           >
             {copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
           </ActionIcon>

apps/client/src/components/common/export-modal.tsx

@@ -81,7 +81,7 @@ export default function ExportModal({
       <Modal.Content style={{ overflow: "hidden" }}>
         <Modal.Header py={0}>
           <Modal.Title fw={500}>{t(`Export ${type}`)}</Modal.Title>
-          <Modal.CloseButton />
+          <Modal.CloseButton aria-label={t("Close")} />
         </Modal.Header>
         <Modal.Body>
           <Group justify="space-between" wrap="nowrap">

apps/client/src/components/common/recent-changes.tsx

@@ -17,6 +17,7 @@ import { EmptyState } from "@/components/ui/empty-state.tsx";
 import { getSpaceUrl } from "@/lib/config.ts";
 import { useTranslation } from "react-i18next";
 import { getInitialsColor } from "@/lib/get-initials-color.ts";
+import rowClasses from "@/components/ui/clickable-table-row.module.css";
 
 interface Props {
   spaceId?: string;
@@ -41,9 +42,10 @@ export default function RecentChanges({ spaceId }: Props) {
         <Table highlightOnHover verticalSpacing="sm">
           <Table.Tbody>
             {pages.map((page) => (
-              <Table.Tr key={page.id}>
+              <Table.Tr key={page.id} className={rowClasses.row}>
                 <Table.Td>
                   <UnstyledButton
+                    className={rowClasses.link}
                     component={Link}
                     to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
                   >