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

apps/client/src/features/space/components/spaces-page/all-spaces-list.module.css

@@ -3,8 +3,14 @@
   color: inherit;
   display: flex;
   width: 100%;
-  
+
   &:hover {
     text-decoration: none;
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: 2px;
+    border-radius: var(--mantine-radius-sm);
+  }
 }

apps/client/src/features/space/components/spaces-page/all-spaces-list.tsx

@@ -8,6 +8,7 @@ import {
   Menu,
   Anchor,
   Tooltip,
+  VisuallyHidden,
 } from "@mantine/core";
 import { IconDots, IconSettings, IconEye, IconEyeOff } from "@tabler/icons-react";
 import StarButton from "@/features/favorite/components/star-button";
@@ -28,6 +29,8 @@ import Paginate from "@/components/common/paginate";
 import NoTableResults from "@/components/common/no-table-results";
 import SpaceSettingsModal from "@/features/space/components/settings-modal";
 import classes from "./all-spaces-list.module.css";
+import rowClasses from "@/components/ui/clickable-table-row.module.css";
+import clsx from "clsx";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
 import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";
@@ -107,18 +110,25 @@ export default function AllSpacesList({
 
       <Table.ScrollContainer minWidth={500}>
         <Table highlightOnHover verticalSpacing="sm">
+          <Table.Caption>
+            <VisuallyHidden>
+              {t("List of spaces in this workspace")}
+            </VisuallyHidden>
+          </Table.Caption>
           <Table.Thead>
             <Table.Tr>
               <Table.Th>{t("Space")}</Table.Th>
               <Table.Th>{t("Members")}</Table.Th>
-              <Table.Th w={130} aria-label={t("Action")} />
+              <Table.Th w={130}>
+                <VisuallyHidden>{t("Action")}</VisuallyHidden>
+              </Table.Th>
             </Table.Tr>
           </Table.Thead>
 
           <Table.Tbody>
             {spaces.length > 0 ? (
               spaces.map((space) => (
-                <Table.Tr key={space.id}>
+                <Table.Tr key={space.id} className={rowClasses.row}>
                   <Table.Td>
                     <Anchor
                       size="sm"
@@ -127,13 +137,13 @@ export default function AllSpacesList({
                         cursor: "pointer",
                         color: "var(--mantine-color-text)",
                       }}
+                      className={clsx(classes.spaceLink, rowClasses.link)}
                       component={Link}
                       to={getSpaceUrl(space.slug)}
                     >
                       <Group
                         gap="sm"
                         wrap="nowrap"
-                        className={classes.spaceLink}
                         onMouseEnter={() => prefetchSpace(space.slug, space.id)}
                       >
                         <CustomAvatar
@@ -164,7 +174,7 @@ export default function AllSpacesList({
                   </Table.Td>
                   <Table.Td>
                     <Group gap="xs" justify="flex-end" wrap="nowrap">
-                      <StarButton type="space" spaceId={space.id} size={16} />
+                      <StarButton type="space" spaceId={space.id} name={space.name} size={16} />
                       <WatchButton spaceId={space.id} watchedIds={watchedIds} size={16} />
                       <Menu position="bottom-end">
                         <Menu.Target>

apps/client/src/features/space/components/spaces-page/favorite-spaces-grid.tsx

@@ -1,4 +1,4 @@
-import { Text, SimpleGrid, Card, rem, Group, Box, Button } from "@mantine/core";
+import { Text, SimpleGrid, Card, rem, Group, Box, Button, Title } from "@mantine/core";
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
@@ -30,9 +30,9 @@ export default function FavoriteSpacesGrid() {
 
   return (
     <Box mb="xl">
-      <Text size="sm" fw={500} mb="md">
+      <Title order={2} size="h6" fw={500} mb="md">
         {t("Favorite spaces")}
-      </Text>
+      </Title>
 
       <SimpleGrid cols={{ base: 1, xs: 2, sm: 4 }}>
         {visibleSpaces.map((fav) => (
@@ -53,6 +53,7 @@ export default function FavoriteSpacesGrid() {
                 <StarButton
                   type="space"
                   spaceId={fav.space!.id}
+                  name={fav.space!.name}
                   size={16}
                 />
               </div>