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

apps/client/src/features/page/components/copy-page-modal.tsx

@@ -80,7 +80,7 @@ export default function CopyPageModal({
       <Modal.Content style={{ overflow: "hidden" }}>
         <Modal.Header py={0}>
           <Modal.Title fw={500}>{t("Copy page")}</Modal.Title>
-          <Modal.CloseButton />
+          <Modal.CloseButton aria-label={t("Close")} />
         </Modal.Header>
         <Modal.Body>
           <Text mb="xs" c="dimmed" size="sm">

apps/client/src/features/page/components/header/page-header-menu.tsx

@@ -18,7 +18,7 @@ import {
   IconWifiOff,
 } from "@tabler/icons-react";
 import React, { useEffect, useRef, useState } from "react";
-import useToggleAside from "@/hooks/use-toggle-aside.tsx";
+import { useAsideTriggerProps } from "@/hooks/use-toggle-aside.tsx";
 import { useAtom, useAtomValue } from "jotai";
 import { historyAtoms } from "@/features/page-history/atoms/history-atoms.ts";
 import { useDisclosure, useHotkeys } from "@mantine/hooks";
@@ -64,7 +64,8 @@ interface PageHeaderMenuProps {
 }
 export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
   const { t } = useTranslation();
-  const toggleAside = useToggleAside();
+  const commentsTriggerProps = useAsideTriggerProps("comments");
+  const tocTriggerProps = useAsideTriggerProps("toc");
   const { pageSlug } = useParams();
   const { data: page } = usePageQuery({
     pageId: extractPageSlugId(pageSlug),
@@ -109,7 +110,7 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
           variant="subtle"
           color="dark"
           aria-label={t("Comments")}
-          onClick={() => toggleAside("comments")}
+          {...commentsTriggerProps}
         >
           <IconMessage size={20} stroke={2} />
         </ActionIcon>
@@ -120,7 +121,7 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
           variant="subtle"
           color="dark"
           aria-label={t("Table of contents")}
-          onClick={() => toggleAside("toc")}
+          {...tocTriggerProps}
         >
           <IconList size={20} stroke={2} />
         </ActionIcon>

apps/client/src/features/page/components/move-page-modal.tsx

@@ -75,7 +75,7 @@ export default function MovePageModal({
       <Modal.Content style={{ overflow: "hidden" }}>
         <Modal.Header py={0}>
           <Modal.Title fw={500}>{t("Move page")}</Modal.Title>
-          <Modal.CloseButton />
+          <Modal.CloseButton aria-label={t("Close")} />
         </Modal.Header>
         <Modal.Body>
           <Text mb="xs" c="dimmed" size="sm">

apps/client/src/features/page/trash/components/trash-page-content-modal.tsx

@@ -28,7 +28,7 @@ export default function TrashPageContentModal({
               {t("Preview")}
             </Text>
           </Modal.Title>
-          <Modal.CloseButton />
+          <Modal.CloseButton aria-label={t("Close")} />
         </Modal.Header>
         <Modal.Body p={0}>
           <ScrollArea h="650" w="100%" scrollbarSize={5}>

apps/client/src/features/page/trash/components/trash.tsx

@@ -150,7 +150,11 @@ export default function Trash() {
                     <Table.Td>
                       <Menu>
                         <Menu.Target>
-                          <ActionIcon variant="subtle" color="gray">
+                          <ActionIcon
+                            variant="subtle"
+                            color="gray"
+                            aria-label={t("Page actions")}
+                          >
                             <IconDots size={20} stroke={1.5} />
                           </ActionIcon>
                         </Menu.Target>

apps/client/src/features/page/tree/components/space-tree-node-menu.tsx

@@ -125,7 +125,7 @@ export function NodeMenu({ node, canEdit }: NodeMenuProps) {
           <ActionIcon
             variant="transparent"
             c="gray"
-            aria-label={t("Page menu")}
+            aria-label={t("Page menu for {{name}}", { name: node.name || t("untitled") })}
             tabIndex={-1}
             onClick={(e) => {
               e.preventDefault();

apps/client/src/features/page/tree/components/space-tree-row.tsx

@@ -274,7 +274,7 @@ function CreateNode({
     <ActionIcon
       variant="transparent"
       c="gray"
-      aria-label={t("Create page")}
+      aria-label={t("Create subpage of {{name}}", { name: node.name || t("untitled") })}
       tabIndex={-1}
       onClick={(e) => {
         e.preventDefault();