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

apps/client/src/features/auth/components/auth-layout.tsx

@@ -20,7 +20,7 @@ export function AuthLayout({ children }: AuthLayoutProps) {
           Docmost
         </Text>
       </Group>
-      {children}
+      <main>{children}</main>
     </>
   );
 }

apps/client/src/features/auth/components/invite-sign-up-form.tsx

@@ -103,6 +103,11 @@ export function InviteSignUpForm() {
                 placeholder={t("Your password")}
                 variant="filled"
                 mt="md"
+                visibilityToggleButtonProps={{
+                  "aria-label": t("Toggle password visibility"),
+                  "aria-hidden": false,
+                  tabIndex: 0,
+                }}
                 {...form.getInputProps("password")}
               />
               <Button type="submit" fullWidth mt="xl" loading={isLoading}>

apps/client/src/features/auth/components/login-form.tsx

@@ -54,6 +54,13 @@ export function LoginForm() {
     await signIn(data);
   }
 
+  function handleValidationFailure(errors: Record<string, unknown>) {
+    const firstInvalidId = Object.keys(errors)[0];
+    if (firstInvalidId) {
+      document.getElementById(firstInvalidId)?.focus();
+    }
+  }
+
   if (isDataLoading) {
    return null;
   }
@@ -66,7 +73,7 @@ export function LoginForm() {
     <AuthLayout>
       <Container size={420} className={classes.container}>
         <Box p="xl" className={classes.containerBox}>
-          <Title order={2} ta="center" fw={500} mb="md">
+          <Title order={1} size="h2" ta="center" fw={500} mb="md">
             {t("Login")}
           </Title>
 
@@ -74,21 +81,31 @@ export function LoginForm() {
 
           {!data?.enforceSso && (
             <>
-              <form onSubmit={form.onSubmit(onSubmit)}>
+              <form onSubmit={form.onSubmit(onSubmit, handleValidationFailure)}>
                 <TextInput
                   id="email"
                   type="email"
                   label={t("Email")}
                   placeholder="email@example.com"
                   variant="filled"
+                  autoComplete="email"
+                  errorProps={{ role: "alert" }}
                   {...form.getInputProps("email")}
                 />
 
                 <PasswordInput
+                  id="password"
                   label={t("Password")}
                   placeholder={t("Your password")}
                   variant="filled"
                   mt="md"
+                  autoComplete="current-password"
+                  errorProps={{ role: "alert" }}
+                  visibilityToggleButtonProps={{
+                    "aria-label": t("Toggle password visibility"),
+                    "aria-hidden": false,
+                    tabIndex: 0,
+                  }}
                   {...form.getInputProps("password")}
                 />
 

apps/client/src/features/auth/components/password-reset-form.tsx

@@ -52,6 +52,11 @@ export function PasswordResetForm({ resetToken }: PasswordResetFormProps) {
             placeholder={t("Your new password")}
             variant="filled"
             mt="md"
+            visibilityToggleButtonProps={{
+              "aria-label": t("Toggle password visibility"),
+              "aria-hidden": false,
+              tabIndex: 0,
+            }}
             {...form.getInputProps("newPassword")}
           />
 

apps/client/src/features/auth/components/setup-workspace-form.tsx

@@ -98,6 +98,11 @@ export function SetupWorkspaceForm() {
               placeholder={t("Enter a strong password")}
               variant="filled"
               mt="md"
+              visibilityToggleButtonProps={{
+                "aria-label": t("Toggle password visibility"),
+                "aria-hidden": false,
+                tabIndex: 0,
+              }}
               {...form.getInputProps("password")}
             />
             <Button type="submit" fullWidth mt="xl" loading={isLoading}>

apps/client/src/features/comment/components/comment-editor.tsx

@@ -19,6 +19,7 @@ interface CommentEditorProps {
   editable: boolean;
   placeholder?: string;
   autofocus?: boolean;
+  surface?: "default" | "muted";
 }
 
 const CommentEditor = forwardRef(
@@ -30,6 +31,7 @@ const CommentEditor = forwardRef(
       editable,
       placeholder,
       autofocus,
+      surface,
     }: CommentEditorProps,
     ref,
   ) => {
@@ -66,6 +68,9 @@ const CommentEditor = forwardRef(
         }),
       ],
       editorProps: {
+        attributes: {
+          "aria-label": placeholder || t("Comment"),
+        },
         handleDOMEvents: {
           keydown: (_view, event) => {
             if (
@@ -131,6 +136,7 @@ const CommentEditor = forwardRef(
         ref={focusRef}
         className={classes.commentEditor}
         data-editable={editable || undefined}
+        data-surface={surface}
       >
         <EditorContent
           editor={commentEditor}

apps/client/src/features/comment/components/comment-list-with-tabs.tsx

@@ -383,6 +383,7 @@ const PageCommentInput = ({ onSave, isLoading }) => {
             onSave={handleSave}
             editable={true}
             placeholder={t("Add a comment...")}
+            surface="muted"
           />
         </div>
       </Group>
@@ -391,6 +392,7 @@ const PageCommentInput = ({ onSave, isLoading }) => {
           variant="filled"
           radius="xl"
           size="sm"
+          aria-label={t("Send comment")}
           onClick={handleSave}
           onMouseDown={(e) => e.preventDefault()}
           loading={isLoading}

apps/client/src/features/comment/components/comment.module.css

@@ -22,6 +22,11 @@
 
 .commentEditor {
 
+    &[data-editable][data-surface="muted"] .ProseMirror:not(.focused) {
+        border-radius: var(--mantine-radius-sm);
+        box-shadow: 0 0 0 1px light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-4));
+    }
+
     .focused {
         border-radius: var(--mantine-radius-sm);
         box-shadow: 0 0 0 2px var(--mantine-color-blue-3);

apps/client/src/features/editor/components/drawio/drawio-view.tsx

@@ -198,7 +198,11 @@ export default function DrawioView(props: NodeViewProps) {
         className={clsx(selected ? "ProseMirror-selectednode" : "")}
       >
         <div style={{ display: "flex", alignItems: "center" }}>
-          <ActionIcon variant="transparent" color="gray">
+          <ActionIcon
+            variant="transparent"
+            color="gray"
+            aria-label={t("Edit diagram")}
+          >
             <IconEdit size={18} />
           </ActionIcon>
 

apps/client/src/features/editor/components/embed/embed-view.tsx

@@ -131,7 +131,11 @@ export default function EmbedView(props: NodeViewProps) {
               className={clsx(selected ? "ProseMirror-selectednode" : "")}
             >
               <div style={{ display: "flex", alignItems: "center" }}>
-                <ActionIcon variant="transparent" color="gray">
+                <ActionIcon
+                  variant="transparent"
+                  color="gray"
+                  aria-label={t("Edit embed")}
+                >
                   <IconEdit size={18} />
                 </ActionIcon>
 

apps/client/src/features/editor/components/emoji-menu/emoji-list.tsx

@@ -44,9 +44,11 @@ function EmojiList({
   const [cats, setCats] = useState<EmojiCategory[]>([]);
   const [activeCat, setActiveCat] = useState("");
   const [focusZone, setFocusZone] = useState<"grid" | "tabs">("grid");
+  const [announce, setAnnounce] = useState("");
   const listViewport = useRef<HTMLDivElement>(null);
   const gridViewport = useRef<HTMLDivElement>(null);
   const catBar = useRef<HTMLDivElement>(null);
+  const userInteractedRef = useRef(false);
 
   const searching = query.length > 0;
   const browseLoading = !searching && cats.length === 0;
@@ -74,6 +76,53 @@ function EmojiList({
     vp?.querySelector<HTMLElement>(`[data-i="${idx}"]`)?.scrollIntoView({ block: "nearest" });
   }, [idx, searching, focusZone]);
 
+  // Announce picker open and selection changes via a live region. Focus
+  // stays in the editor, so without this the screen reader has no way to
+  // know the picker exists or that arrow keys are changing the selection.
+  // The setTimeout defers the open message past the initial render so the
+  // live region is in the DOM before its content changes (screen readers
+  // ignore content that's present at mount time).
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setAnnounce(
+        t("Emoji picker open. Use arrow keys to navigate, Enter to select."),
+      );
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [t]);
+
+  useEffect(() => {
+    // Skip data-driven updates (idx reset, async cat load); only announce
+    // selection changes that come from real user navigation.
+    if (!userInteractedRef.current) return;
+
+    if (focusZone === "tabs") {
+      if (activeCat) setAnnounce(t("{{name}} category", { name: activeCat }));
+      return;
+    }
+    if (searching) {
+      const item = items[idx];
+      if (item)
+        setAnnounce(
+          t("{{name}}, {{n}} of {{total}}", {
+            name: item.id,
+            n: idx + 1,
+            total: items.length,
+          }),
+        );
+      return;
+    }
+    const entry = gridItems[idx];
+    if (entry)
+      setAnnounce(
+        t("{{name}}, {{n}} of {{total}}", {
+          name: entry.id,
+          n: idx + 1,
+          total: gridItems.length,
+        }),
+      );
+  }, [idx, activeCat, focusZone, searching, items, gridItems, t]);
+
   const pickSearchItem = useCallback(
     (i: number) => {
       const item = items[i];
@@ -94,6 +143,13 @@ function EmojiList({
 
   useEffect(() => {
     function onKey(e: KeyboardEvent) {
+      if (
+        ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Enter"].includes(
+          e.key,
+        )
+      ) {
+        userInteractedRef.current = true;
+      }
       if (searching) {
         if      (e.key === "ArrowDown") { e.preventDefault(); setIdx((i) => Math.min(i + 1, items.length - 1)); }
         else if (e.key === "ArrowUp")   { e.preventDefault(); setIdx((i) => Math.max(i - 1, 0)); }
@@ -131,6 +187,24 @@ function EmojiList({
       role="listbox"
       aria-label={t("Emoji picker")}
     >
+      <div
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        style={{
+          position: "absolute",
+          width: 1,
+          height: 1,
+          padding: 0,
+          margin: -1,
+          overflow: "hidden",
+          clip: "rect(0,0,0,0)",
+          whiteSpace: "nowrap",
+          border: 0,
+        }}
+      >
+        {announce}
+      </div>
       {searching ? (
         <>
           {isLoading && <Loader m="xs" size="xs" color="blue" type="dots" />}
@@ -171,6 +245,7 @@ function EmojiList({
                   title={c.id}
                   role="tab"
                   aria-selected={isActive}
+                  aria-label={t("{{name}} category", { name: c.id })}
                   className={clsx(classes.catTab, {
                     [classes.catTabActive]: isActive,
                     [classes.catTabFocused]: isFocused,
@@ -190,6 +265,9 @@ function EmojiList({
                   key={entry.id}
                   data-i={i}
                   title={`:${entry.id}:`}
+                  role="option"
+                  aria-selected={i === idx}
+                  aria-label={entry.id}
                   className={clsx(classes.emojiBtn, { [classes.active]: i === idx })}
                   onClick={() => pickGridItem(entry)}
                   onMouseEnter={() => setIdx(i)}

apps/client/src/features/editor/components/excalidraw/excalidraw-view.tsx

@@ -240,7 +240,11 @@ export default function ExcalidrawView(props: NodeViewProps) {
         className={clsx(selected ? "ProseMirror-selectednode" : "")}
       >
         <div style={{ display: "flex", alignItems: "center" }}>
-          <ActionIcon variant="transparent" color="gray">
+          <ActionIcon
+            variant="transparent"
+            color="gray"
+            aria-label={t("Edit drawing")}
+          >
             <IconEdit size={18} />
           </ActionIcon>
 

apps/client/src/features/editor/components/math/math-block.tsx

@@ -149,8 +149,13 @@ export default function MathBlockView(props: NodeViewProps) {
           ></Textarea>
 
           <Flex justify="flex-end" align="flex-end">
-            <ActionIcon variant="light" color="red">
-              <IconTrashX size={18} onClick={() => props.deleteNode()} />
+            <ActionIcon
+              variant="light"
+              color="red"
+              aria-label={t("Delete equation")}
+              onClick={() => props.deleteNode()}
+            >
+              <IconTrashX size={18} />
             </ActionIcon>
           </Flex>
         </Stack>

apps/client/src/features/editor/components/mention/mention-list.tsx

@@ -3,6 +3,7 @@ import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -15,6 +16,7 @@ import {
   ScrollArea,
   Text,
   UnstyledButton,
+  VisuallyHidden,
 } from "@mantine/core";
 import clsx from "clsx";
 import classes from "./mention.module.css";
@@ -45,6 +47,8 @@ import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";
 const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
   const [selectedIndex, setSelectedIndex] = useState(1);
   const viewportRef = useRef<HTMLDivElement>(null);
+  const [countAnnouncement, setCountAnnouncement] = useState("");
+  const [selectionAnnouncement, setSelectionAnnouncement] = useState("");
   const { pageSlug, spaceSlug } = useParams();
   const { data: page } = usePageQuery({ pageId: extractPageSlugId(pageSlug) });
   const { data: space } = useSpaceQuery(spaceSlug);
@@ -182,6 +186,45 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
     setSelectedIndex(1);
   }, [suggestion]);
 
+  const selectableCount = useMemo(
+    () => renderItems.filter((item) => item.entityType !== "header").length,
+    [renderItems],
+  );
+
+  useEffect(() => {
+    if (renderItems.length === 0) {
+      setCountAnnouncement(t("No results"));
+      return;
+    }
+    setCountAnnouncement(
+      t("{{count}} result available", { count: selectableCount }),
+    );
+  }, [renderItems.length, selectableCount, t]);
+
+  useEffect(() => {
+    const item = renderItems[selectedIndex];
+    if (!item || item.entityType === "header") {
+      setSelectionAnnouncement("");
+      return;
+    }
+    if (item.entityType === "user") {
+      setSelectionAnnouncement(`${t("People")}: ${item.label}`);
+      return;
+    }
+    if (item.entityType === "page") {
+      if (item.id === null) {
+        setSelectionAnnouncement(`${t("Create page")}: ${item.label}`);
+        return;
+      }
+      const pageLabel = item.label || t("Untitled");
+      setSelectionAnnouncement(
+        item.spaceName
+          ? `${t("Pages")}: ${pageLabel}, ${item.spaceName}`
+          : `${t("Pages")}: ${pageLabel}`,
+      );
+    }
+  }, [selectedIndex, renderItems, t]);
+
   useImperativeHandle(ref, () => ({
     onKeyDown: ({ event }) => {
       if (event.key === "ArrowUp") {
@@ -269,6 +312,9 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
   if (renderItems.length === 0) {
     return (
       <Paper id="mention" shadow="md" py="xs" withBorder radius="md">
+        <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
+          {countAnnouncement}
+        </VisuallyHidden>
         <Text c="dimmed" size="sm" px="sm">
           {t("No results")}
         </Text>
@@ -295,6 +341,12 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
       aria-label={t("Mention suggestions")}
       aria-activedescendant={`mention-option-${selectedIndex}`}
     >
+      <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
+        {countAnnouncement}
+      </VisuallyHidden>
+      <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
+        {selectionAnnouncement}
+      </VisuallyHidden>
       <ScrollArea.Autosize
         viewportRef={viewportRef}
         mah={350}

apps/client/src/features/editor/components/slash-menu/command-list.tsx

@@ -10,6 +10,7 @@ import {
   ScrollArea,
   Text,
   UnstyledButton,
+  VisuallyHidden,
 } from "@mantine/core";
 import classes from "./slash-menu.module.css";
 import clsx from "clsx";
@@ -29,6 +30,8 @@ const CommandList = ({
   const { t } = useTranslation();
   const [selectedIndex, setSelectedIndex] = useState(0);
   const viewportRef = useRef<HTMLDivElement>(null);
+  const [countAnnouncement, setCountAnnouncement] = useState("");
+  const [selectionAnnouncement, setSelectionAnnouncement] = useState("");
 
   const flatItems = useMemo(() => {
     return Object.values(items).flat();
@@ -79,6 +82,25 @@ const CommandList = ({
     setSelectedIndex(0);
   }, [flatItems]);
 
+  useEffect(() => {
+    if (flatItems.length === 0) {
+      setCountAnnouncement("");
+      return;
+    }
+    setCountAnnouncement(
+      t("{{count}} command available", { count: flatItems.length }),
+    );
+  }, [flatItems.length, t]);
+
+  useEffect(() => {
+    const item = flatItems[selectedIndex];
+    if (!item) {
+      setSelectionAnnouncement("");
+      return;
+    }
+    setSelectionAnnouncement(`${t(item.title)}, ${t(item.description)}`);
+  }, [selectedIndex, flatItems, t]);
+
   useEffect(() => {
     viewportRef.current
       ?.querySelector(`[data-item-index="${selectedIndex}"]`)
@@ -95,6 +117,12 @@ const CommandList = ({
       aria-label={t("Slash commands")}
       aria-activedescendant={`slash-command-option-${selectedIndex}`}
     >
+      <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
+        {countAnnouncement}
+      </VisuallyHidden>
+      <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
+        {selectionAnnouncement}
+      </VisuallyHidden>
       <ScrollArea
         viewportRef={viewportRef}
         h={350}

apps/client/src/features/editor/components/table-of-contents/table-of-contents.tsx

@@ -3,7 +3,7 @@ import { TextSelection } from "@tiptap/pm/state";
 import React, { FC, useEffect, useRef, useState } from "react";
 import classes from "./table-of-contents.module.css";
 import clsx from "clsx";
-import { Box, Text } from "@mantine/core";
+import { Box, Text, Title } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 
 type TableOfContentsProps = {
@@ -156,9 +156,9 @@ export const TableOfContents: FC<TableOfContentsProps> = (props) => {
   return (
     <>
       {props.isShare && (
-        <Text mb="md" fw={500}>
+        <Title order={2} size="h6" mb="md" fw={500}>
           {t("Table of contents")}
-        </Text>
+        </Title>
       )}
       <div className={props.isShare ? classes.leftBorder : ""}>
         {links.map((item, idx) => (

apps/client/src/features/editor/full-editor.tsx

@@ -22,7 +22,7 @@ import { useTranslation } from "react-i18next";
 import { IContributor } from "@/features/page/types/page.types.ts";
 import { FixedToolbar } from "@/features/editor/components/fixed-toolbar/fixed-toolbar";
 import { PageEditMode } from "@/features/user/types/user.types.ts";
-import useToggleAside from "@/hooks/use-toggle-aside.tsx";
+import { useAsideTriggerProps } from "@/hooks/use-toggle-aside.tsx";
 import { DeletedPageBanner } from "@/features/page/trash/components/deleted-page-banner.tsx";
 import clsx from "clsx";
 import { currentPageEditModeAtom } from "@/features/editor/atoms/editor-atoms.ts";
@@ -125,7 +125,7 @@ type PageBylineProps = {
 
 function PageByline({ creator, contributors, readOnly }: PageBylineProps) {
   const { t } = useTranslation();
-  const toggleAside = useToggleAside();
+  const detailsTriggerProps = useAsideTriggerProps("details");
 
   const otherContributors = (contributors ?? []).filter(
     (c) => c.id !== creator?.id,
@@ -141,7 +141,9 @@ function PageByline({ creator, contributors, readOnly }: PageBylineProps) {
       {creator && (
         <Popover position="bottom-start" shadow="md" width={280} withArrow>
           <Popover.Target>
-            <UnstyledButton>
+            <UnstyledButton
+              aria-label={t("Created by {{name}}", { name: creator.name })}
+            >
               <Group gap={6}>
                 <CustomAvatar
                   avatarUrl={creator.avatarUrl}
@@ -203,7 +205,7 @@ function PageByline({ creator, contributors, readOnly }: PageBylineProps) {
           variant="subtle"
           color="gray"
           aria-label={t("Details")}
-          onClick={() => toggleAside("details")}
+          {...detailsTriggerProps}
         >
           <IconInfoCircle size={20} stroke={1.5} />
         </ActionIcon>

apps/client/src/features/editor/page-editor.tsx

@@ -43,7 +43,6 @@ import {
 import CommentDialog from "@/features/comment/components/comment-dialog";
 import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubble-menu";
 import { ReadonlyBubbleMenu } from "@/features/editor/components/bubble-menu/readonly-bubble-menu";
-import TableCellMenu from "@/features/editor/components/table/table-cell-menu.tsx";
 import TableMenu from "@/features/editor/components/table/table-menu.tsx";
 import { TableHandlesLayer } from "@/features/editor/components/table/handle/table-handles-layer";
 import ImageMenu from "@/features/editor/components/image/image-menu.tsx";
@@ -74,6 +73,7 @@ import { EditorAiMenu } from "@/ee/ai/components/editor/ai-menu/ai-menu";
 import { EditorLinkMenu } from "@/features/editor/components/link/link-menu";
 import ColumnsMenu from "@/features/editor/components/columns/columns-menu.tsx";
 import { TransclusionLookupProvider } from "@/features/editor/components/transclusion/transclusion-lookup-context";
+import { useTranslation } from "react-i18next";
 
 interface PageEditorProps {
   pageId: string;
@@ -88,6 +88,7 @@ export default function PageEditor({
   content,
   canComment,
 }: PageEditorProps) {
+  const { t } = useTranslation();
   const collaborationURL = useCollaborationUrl();
   const isComponentMounted = useRef(false);
   const editorRef = useRef<Editor | null>(null);
@@ -232,6 +233,9 @@ export default function PageEditor({
       editorProps: {
         scrollThreshold: 80,
         scrollMargin: 80,
+        attributes: {
+          "aria-label": t("Page content"),
+        },
         handleDOMEvents: {
           keydown: (_view, event) => {
             if (platformModifierKey(event) && event.code === "KeyS") {
@@ -391,6 +395,11 @@ export default function PageEditor({
           immediatelyRender={true}
           extensions={mainExtensions}
           content={content}
+          editorProps={{
+            attributes: {
+              "aria-label": t("Page content"),
+            },
+          }}
         />
       ) : (
         <div className="editor-container" style={{ position: "relative" }}>
@@ -421,9 +430,7 @@ export default function PageEditor({
             {editor &&
               !editorIsEditable &&
               (editable || canComment) &&
-              providersRef.current && (
-                <ReadonlyBubbleMenu editor={editor} />
-              )}
+              providersRef.current && <ReadonlyBubbleMenu editor={editor} />}
             {showCommentPopup && (
               <CommentDialog editor={editor} pageId={pageId} />
             )}

apps/client/src/features/editor/styles/placeholder.css

@@ -1,7 +1,7 @@
 .ProseMirror .is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
-  color: #adb5bd;
+  color: var(--mantine-color-placeholder);
   pointer-events: none;
   height: 0;
 
@@ -13,7 +13,7 @@
 .ProseMirror .is-empty::before {
   content: attr(data-placeholder);
   float: left;
-  color: #adb5bd;
+  color: var(--mantine-color-placeholder);
   pointer-events: none;
   height: 0;
 

apps/client/src/features/editor/title-editor.tsx

@@ -87,6 +87,9 @@ export function TitleEditor({
     immediatelyRender: true,
     shouldRerenderOnTransaction: false,
     editorProps: {
+      attributes: {
+        "aria-label": t("Page title"),
+      },
       handleDOMEvents: {
         keydown: (_view, event) => {
           if (platformModifierKey(event) && event.code === "KeyS") {

apps/client/src/features/favorite/components/star-button.tsx

@@ -1,4 +1,5 @@
 import { ActionIcon, Tooltip } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
 import { IconStar, IconStarFilled } from "@tabler/icons-react";
 import {
   useFavoriteIds,
@@ -14,6 +15,8 @@ type StarButtonProps = {
   pageId?: string;
   spaceId?: string;
   templateId?: string;
+  /** Name of the item being favorited, used to make the button's accessible name descriptive. */
+  name?: string;
   size?: number;
 };
 
@@ -25,7 +28,7 @@ function getEntityId(props: StarButtonProps): string | undefined {
 }
 
 export default function StarButton(props: StarButtonProps) {
-  const { type, size = 18 } = props;
+  const { type, name, size = 18 } = props;
   const { t } = useTranslation();
   const favoriteIds = useFavoriteIds(type);
   const addMutation = useAddFavoriteMutation();
@@ -47,22 +50,46 @@ export default function StarButton(props: StarButtonProps) {
     };
 
     if (isFavorited) {
-      removeMutation.mutate(params);
+      removeMutation.mutate(params, {
+        onSuccess: () => {
+          notifications.show({
+            message: name
+              ? t("Removed {{name}} from favorites", { name })
+              : t("Removed from favorites"),
+          });
+        },
+      });
     } else {
-      addMutation.mutate(params);
+      addMutation.mutate(params, {
+        onSuccess: () => {
+          notifications.show({
+            message: name
+              ? t("Added {{name}} to favorites", { name })
+              : t("Added to favorites"),
+          });
+        },
+      });
     }
   };
 
-  const label = isFavorited
+  // Tooltip label stays short. Accessible name expands to include the item
+  // so screen reader users can distinguish stars on different rows.
+  const tooltipLabel = isFavorited
     ? t("Remove from favorites")
     : t("Add to favorites");
 
+  const ariaLabel = name
+    ? isFavorited
+      ? t("Remove {{name}} from favorites", { name })
+      : t("Add {{name}} to favorites", { name })
+    : tooltipLabel;
+
   return (
-    <Tooltip label={label} openDelay={250} withArrow>
+    <Tooltip label={tooltipLabel} openDelay={250} withArrow>
       <ActionIcon
         variant="subtle"
         color={isFavorited ? "yellow" : "gray"}
-        aria-label={label}
+        aria-label={ariaLabel}
         aria-pressed={isFavorited}
         onClick={handleToggle}
         loading={isPending}

apps/client/src/features/group/components/add-group-member-modal.tsx

@@ -31,7 +31,12 @@ export default function AddGroupMemberModal() {
     <>
       <Button onClick={open}>{t("Add group members")}</Button>
 
-      <Modal opened={opened} onClose={close} title={t("Add group members")}>
+      <Modal
+        opened={opened}
+        onClose={close}
+        title={t("Add group members")}
+        closeButtonProps={{ "aria-label": t("Close") }}
+      >
         <Divider size="xs" mb="xs" />
 
         <MultiUserSelect

apps/client/src/features/group/components/create-group-form.tsx

@@ -58,6 +58,7 @@ export function CreateGroupForm() {
               label={t("Group name")}
               placeholder={t("e.g Developers")}
               variant="filled"
+              data-autofocus
               {...form.getInputProps("name")}
             />
 

apps/client/src/features/group/components/create-group-modal.tsx

@@ -11,7 +11,12 @@ export default function CreateGroupModal() {
     <>
       <Button onClick={open}>{t("Create group")}</Button>
 
-      <Modal opened={opened} onClose={close} title={t("Create group")}>
+      <Modal
+        opened={opened}
+        onClose={close}
+        title={t("Create group")}
+        closeButtonProps={{ "aria-label": t("Close") }}
+      >
         <Divider size="xs" mb="xs" />
         <CreateGroupForm />
       </Modal>

apps/client/src/features/group/components/edit-group-form.tsx

@@ -9,6 +9,7 @@ import { z } from "zod/v4";
 import { useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { zod4Resolver } from "mantine-form-zod-resolver";
+import { IGroup } from "@/features/group/types/group.types.ts";
 
 const formSchema = z.object({
   name: z.string().min(2).max(100),
@@ -18,13 +19,16 @@ const formSchema = z.object({
 type FormValues = z.infer<typeof formSchema>;
 interface EditGroupFormProps {
   onClose?: () => void;
+  group?: IGroup;
 }
-export function EditGroupForm({ onClose }: EditGroupFormProps) {
+export function EditGroupForm({ onClose, group: groupProp }: EditGroupFormProps) {
   const { t } = useTranslation();
   const updateGroupMutation = useUpdateGroupMutation();
   const { isSuccess } = updateGroupMutation;
-  const { groupId } = useParams();
-  const { data: group } = useGroupQuery(groupId);
+  const { groupId: routeGroupId } = useParams();
+  const groupId = groupProp?.id ?? routeGroupId;
+  const { data: queriedGroup } = useGroupQuery(groupProp ? undefined : groupId);
+  const group = groupProp ?? queriedGroup;
 
   useEffect(() => {
     if (isSuccess) {
@@ -66,6 +70,7 @@ export function EditGroupForm({ onClose }: EditGroupFormProps) {
               label={t("Group name")}
               placeholder={t("e.g Developers")}
               variant="filled"
+              data-autofocus
               {...form.getInputProps("name")}
             />
 

apps/client/src/features/group/components/edit-group-modal.tsx

@@ -1,23 +1,31 @@
 import { Divider, Modal } from "@mantine/core";
 import { EditGroupForm } from "@/features/group/components/edit-group-form.tsx";
 import { useTranslation } from "react-i18next";
+import { IGroup } from "@/features/group/types/group.types.ts";
 
 interface EditGroupModalProps {
   opened: boolean;
   onClose: () => void;
+  group?: IGroup;
 }
 
 export default function EditGroupModal({
   opened,
   onClose,
+  group,
 }: EditGroupModalProps) {
   const { t } = useTranslation();
 
   return (
     <>
-      <Modal opened={opened} onClose={onClose} title={t("Edit group")}>
+      <Modal
+        opened={opened}
+        onClose={onClose}
+        title={t("Edit group")}
+        closeButtonProps={{ "aria-label": t("Close") }}
+      >
         <Divider size="xs" mb="xs" />
-        <EditGroupForm onClose={onClose} />
+        <EditGroupForm onClose={onClose} group={group} />
       </Modal>
     </>
   );

apps/client/src/features/group/components/group-action-menu.tsx

@@ -10,18 +10,28 @@ import { useDisclosure } from "@mantine/hooks";
 import EditGroupModal from "@/features/group/components/edit-group-modal.tsx";
 import { modals } from "@mantine/modals";
 import { useTranslation } from "react-i18next";
+import { IGroup } from "@/features/group/types/group.types.ts";
 
-export default function GroupActionMenu() {
+interface GroupActionMenuProps {
+  group?: IGroup;
+}
+
+export default function GroupActionMenu(props: GroupActionMenuProps = {}) {
   const { t } = useTranslation();
-  const { groupId } = useParams();
-  const { data: group, isLoading } = useGroupQuery(groupId);
+  const { groupId: routeGroupId } = useParams();
+  const groupId = props.group?.id ?? routeGroupId;
+  const { data: queriedGroup } = useGroupQuery(props.group ? undefined : groupId);
+  const group = props.group ?? queriedGroup;
   const deleteGroupMutation = useDeleteGroupMutation();
   const navigate = useNavigate();
   const [opened, { open, close }] = useDisclosure(false);
 
   const onDelete = async () => {
     await deleteGroupMutation.mutateAsync(groupId);
-    navigate("/settings/groups");
+    // Only navigate away if we're currently viewing this group's detail page.
+    if (routeGroupId === groupId) {
+      navigate("/settings/groups");
+    }
   };
 
   const openDeleteModal = () =>
@@ -53,7 +63,11 @@ export default function GroupActionMenu() {
             arrowPosition="center"
           >
             <Menu.Target>
-              <ActionIcon variant="light" aria-label={t("Group menu")}>
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                aria-label={t("Group actions for {{name}}", { name: group.name })}
+              >
                 <IconDots size={20} stroke={2} />
               </ActionIcon>
             </Menu.Target>
@@ -76,7 +90,7 @@ export default function GroupActionMenu() {
         </>
       )}
 
-      <EditGroupModal opened={opened} onClose={close} />
+      <EditGroupModal opened={opened} onClose={close} group={group} />
     </>
   );
 }

apps/client/src/features/group/components/group-list.tsx

@@ -1,4 +1,4 @@
-import { Table, Group, Text, Anchor } from "@mantine/core";
+import { Table, Group, Text, Anchor, VisuallyHidden } from "@mantine/core";
 import { useGetGroupsQuery } from "@/features/group/queries/group-query";
 import { Link } from "react-router-dom";
 import { IconGroupCircle } from "@/components/icons/icon-people-circle.tsx";
@@ -12,6 +12,8 @@ import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";
 import { SearchInput } from "@/components/common/search-input.tsx";
 import NoTableResults from "@/components/common/no-table-results.tsx";
 import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search.tsx";
+import rowClasses from "@/components/ui/clickable-table-row.module.css";
+import GroupActionMenu from "@/features/group/components/group-action-menu.tsx";
 
 export default function GroupList() {
   const { t } = useTranslation();
@@ -34,13 +36,16 @@ export default function GroupList() {
             <Table.Tr>
               <Table.Th>{t("Group")}</Table.Th>
               <Table.Th>{t("Members")}</Table.Th>
+              <Table.Th w={60}>
+                <VisuallyHidden>{t("Actions")}</VisuallyHidden>
+              </Table.Th>
             </Table.Tr>
           </Table.Thead>
 
           <Table.Tbody>
             {data?.items.length > 0 ? (
             data?.items.map((group: IGroup, index: number) => (
-              <Table.Tr key={index}>
+              <Table.Tr key={index} className={rowClasses.row}>
                 <Table.Td onMouseEnter={() => prefetchGroupMembers(group.id)}>
                   <Anchor
                     size="sm"
@@ -49,6 +54,7 @@ export default function GroupList() {
                       cursor: "pointer",
                       color: "var(--mantine-color-text)",
                     }}
+                    className={rowClasses.link}
                     component={Link}
                     to={`/settings/groups/${group.id}`}
                   >
@@ -80,10 +86,13 @@ export default function GroupList() {
                     {formatMemberCount(group.memberCount, t)}
                   </Anchor>
                 </Table.Td>
+                <Table.Td>
+                  <GroupActionMenu group={group} />
+                </Table.Td>
               </Table.Tr>
             ))
             ) : (
-              <NoTableResults colSpan={2} />
+              <NoTableResults colSpan={3} />
             )}
           </Table.Tbody>
         </Table>

apps/client/src/features/group/components/group-members.tsx

@@ -88,7 +88,11 @@ export default function GroupMembersList() {
                       arrowPosition="center"
                     >
                       <Menu.Target>
-                        <ActionIcon variant="subtle" c="gray">
+                        <ActionIcon
+                          variant="subtle"
+                          c="gray"
+                          aria-label={t("Member actions")}
+                        >
                           <IconDots size={20} stroke={2} />
                         </ActionIcon>
                       </Menu.Target>

apps/client/src/features/home/components/created-by-me.tsx

@@ -17,6 +17,7 @@ import { EmptyState } from "@/components/ui/empty-state";
 import { getSpaceUrl } from "@/lib/config";
 import { useTranslation } from "react-i18next";
 import { getInitialsColor } from "@/lib/get-initials-color";
+import rowClasses from "@/components/ui/clickable-table-row.module.css";
 
 type Props = {
   spaceId?: string;
@@ -49,9 +50,10 @@ export default function CreatedByMe({ 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,

apps/client/src/features/home/components/favorites-pages.tsx

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

apps/client/src/features/notification/components/notification-popover.tsx

@@ -7,7 +7,7 @@ import {
   Popover,
   ScrollArea,
   Tabs,
-  Text,
+  Title,
   Tooltip,
 } from "@mantine/core";
 import {
@@ -34,11 +34,14 @@ export function NotificationPopover() {
   const [opened, setOpened] = useState(false);
   const [tab, setTab] = useState<NotificationTab>("direct");
   const [filter, setFilter] = useState<NotificationFilter>("all");
+  const [filterMenuOpened, setFilterMenuOpened] = useState(false);
+  const [moreMenuOpened, setMoreMenuOpened] = useState(false);
 
   const { data: unreadData } = useUnreadCountQuery();
   const markAllRead = useMarkAllReadMutation();
 
   const unreadCount = unreadData?.count ?? 0;
+  const isSubMenuOpen = filterMenuOpened || moreMenuOpened;
 
   const handleMarkAllRead = () => {
     markAllRead.mutate();
@@ -51,6 +54,9 @@ export function NotificationPopover() {
       opened={opened}
       onChange={setOpened}
       withArrow
+      trapFocus
+      returnFocus
+      closeOnEscape={!isSubMenuOpen}
     >
       <Popover.Target>
         <Tooltip label={t("Notifications")} withArrow>
@@ -80,14 +86,25 @@ export function NotificationPopover() {
         style={{ width: "min(420px, calc(100vw - 24px))" }}
       >
         <Group justify="space-between" px="md" py="sm">
-          <Text fw={600} size="sm">
+          <Title order={2} fz="sm" fw={600}>
             {t("Notifications")}
-          </Text>
+          </Title>
           <Group gap={4}>
-            <Menu position="bottom-end" withArrow withinPortal={false}>
+            <Menu
+              position="bottom-end"
+              withArrow
+              withinPortal={false}
+              opened={filterMenuOpened}
+              onChange={setFilterMenuOpened}
+            >
               <Menu.Target>
                 <Tooltip label={t("Filter")} withArrow>
-                  <ActionIcon variant="subtle" color="dark" size="sm">
+                  <ActionIcon
+                    variant="subtle"
+                    color="dark"
+                    size="sm"
+                    aria-label={t("Filter")}
+                  >
                     <IconFilter size={16} />
                   </ActionIcon>
                 </Tooltip>
@@ -113,10 +130,21 @@ export function NotificationPopover() {
               </Menu.Dropdown>
             </Menu>
 
-            <Menu position="bottom-end" withArrow withinPortal={false}>
+            <Menu
+              position="bottom-end"
+              withArrow
+              withinPortal={false}
+              opened={moreMenuOpened}
+              onChange={setMoreMenuOpened}
+            >
               <Menu.Target>
                 <Tooltip label={t("More options")} withArrow>
-                  <ActionIcon variant="subtle" color="dark" size="sm">
+                  <ActionIcon
+                    variant="subtle"
+                    color="dark"
+                    size="sm"
+                    aria-label={t("More options")}
+                  >
                     <IconDots size={16} />
                   </ActionIcon>
                 </Tooltip>

apps/client/src/features/page-details/components/backlinks-modal.tsx

@@ -23,7 +23,7 @@ export function BacklinksModal({
       <Modal.Content>
         <Modal.Header>
           <Modal.Title fw={500}>{t("Backlinks")}</Modal.Title>
-          <Modal.CloseButton />
+          <Modal.CloseButton aria-label={t("Close")} />
         </Modal.Header>
         <Modal.Body>
           <Stack gap="lg">

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

@@ -32,7 +32,7 @@ export default function HistoryModal({ pageId, pageTitle }: Props) {
                 {t("Page history")}
               </Text>
             </Modal.Title>
-            <Modal.CloseButton />
+            <Modal.CloseButton aria-label={t("Close")} />
           </Modal.Header>
           <Modal.Body
             p={0}
@@ -60,7 +60,7 @@ export default function HistoryModal({ pageId, pageTitle }: Props) {
               {t("Page history")}
             </Text>
           </Modal.Title>
-          <Modal.CloseButton />
+          <Modal.CloseButton aria-label={t("Close")} />
         </Modal.Header>
         <Modal.Body>
           <HistoryModalBody pageId={pageId} />

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();

apps/client/src/features/search/components/search-spotlight-filters.tsx

@@ -175,6 +175,8 @@ export function SearchSpotlightFilters({
           {contentTypeOptions.map((option) => (
             <Menu.Item
               key={option.value}
+              role="menuitemradio"
+              aria-checked={contentType === option.value}
               onClick={() =>
                 !option.disabled &&
                 contentType !== option.value &&
@@ -200,7 +202,7 @@ export function SearchSpotlightFilters({
                       </Text>
                     )}
                 </div>
-                {contentType === option.value && <IconCheck size={20} />}
+                {contentType === option.value && <IconCheck size={20} aria-hidden />}
               </Group>
             </Menu.Item>
           ))}

apps/client/src/features/search/components/search-spotlight.tsx

@@ -1,6 +1,6 @@
 import { Spotlight } from "@mantine/spotlight";
 import { IconSearch, IconSparkles } from "@tabler/icons-react";
-import { Group, Button } from "@mantine/core";
+import { Group, Button, VisuallyHidden } from "@mantine/core";
 import React, { useState, useMemo, useEffect } from "react";
 import { useDebouncedValue } from "@mantine/hooks";
 import { useTranslation } from "react-i18next";
@@ -126,6 +126,7 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
         <Group gap="xs" px="sm" pt="sm" pb="xs">
           <Spotlight.Search
             placeholder={isAiMode ? t("Ask a question...") : t("Search...")}
+            aria-label={isAiMode ? t("Ask a question...") : t("Search")}
             leftSection={<IconSearch size={20} stroke={1.5} />}
             style={{ flex: 1 }}
             onKeyDown={(e) => {
@@ -161,6 +162,18 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
           />
         </div>
 
+        <VisuallyHidden role="status" aria-live="polite">
+          {isAiMode
+            ? query.length > 0 && !isAiLoading && !aiSearchResult
+              ? t("No answer available")
+              : ""
+            : query.length > 0 && !isLoading
+              ? resultItems.length === 0
+                ? t("No results found")
+                : t("{{count}} results found", { count: resultItems.length })
+              : ""}
+        </VisuallyHidden>
+
         <Spotlight.ActionsList>
           {isAiMode ? (
             <>

apps/client/src/features/search/components/share-search-spotlight.tsx

@@ -74,6 +74,7 @@ export function ShareSearchSpotlight({ shareId }: ShareSearchSpotlightProps) {
       >
         <Spotlight.Search
           placeholder={t("Search...")}
+          aria-label={t("Search")}
           leftSection={<IconSearch size={20} stroke={1.5} />}
         />
         <Spotlight.ActionsList>

apps/client/src/features/session/components/session-list.tsx

@@ -7,6 +7,7 @@ import {
   Stack,
   Table,
   Text,
+  VisuallyHidden,
 } from "@mantine/core";
 import { IconDevices } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
@@ -33,11 +34,16 @@ export default function SessionList() {
   if (isLoading) {
     return (
       <Table verticalSpacing="md">
+        <Table.Caption>
+          <VisuallyHidden>{t("Active sessions")}</VisuallyHidden>
+        </Table.Caption>
         <Table.Thead>
           <Table.Tr>
             <Table.Th>{t("Device Name")}</Table.Th>
             <Table.Th>{t("Last Active")}</Table.Th>
-            <Table.Th aria-label={t("Action")} />
+            <Table.Th>
+              <VisuallyHidden>{t("Action")}</VisuallyHidden>
+            </Table.Th>
           </Table.Tr>
         </Table.Thead>
         <Table.Tbody>
@@ -90,11 +96,18 @@ export default function SessionList() {
       )}
 
       <Table verticalSpacing="md">
+        <Table.Caption>
+          <VisuallyHidden>{t("Active sessions")}</VisuallyHidden>
+        </Table.Caption>
         <Table.Thead>
           <Table.Tr>
             <Table.Th>{t("Device Name")}</Table.Th>
             <Table.Th>{t("Last Active")}</Table.Th>
-            {otherSessions.length > 0 && <Table.Th aria-label={t("Action")} />}
+            {otherSessions.length > 0 && (
+              <Table.Th>
+                <VisuallyHidden>{t("Action")}</VisuallyHidden>
+              </Table.Th>
+            )}
           </Table.Tr>
         </Table.Thead>
         <Table.Tbody>

apps/client/src/features/share/components/share-list.tsx

@@ -14,6 +14,7 @@ import { getPageIcon } from "@/lib";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { EmptyState } from "@/components/ui/empty-state.tsx";
 import classes from "./share.module.css";
+import rowClasses from "@/components/ui/clickable-table-row.module.css";
 
 export default function ShareList() {
   const { t } = useTranslation();
@@ -38,7 +39,7 @@ export default function ShareList() {
 
           <Table.Tbody>
             {data?.items.map((share: ISharedItem, index: number) => (
-              <Table.Tr key={index}>
+              <Table.Tr key={index} className={rowClasses.row}>
                 <Table.Td>
                   <Anchor
                     size="sm"
@@ -47,6 +48,7 @@ export default function ShareList() {
                       cursor: "pointer",
                       color: "var(--mantine-color-text)",
                     }}
+                    className={rowClasses.link}
                     component={Link}
                     target="_blank"
                     to={buildSharedPageUrl({

apps/client/src/features/share/components/share-shell.tsx

@@ -42,6 +42,7 @@ import {
 import { ShareSearchSpotlight } from "@/features/search/components/share-search-spotlight.tsx";
 import { shareSearchSpotlight } from "@/features/search/constants";
 import ShareBranding from '@/features/share/components/share-branding.tsx';
+import { MAIN_CONTENT_ID, SkipToMain } from "@/components/ui/skip-to-main.tsx";
 
 const MemoizedSharedTree = React.memo(SharedTree);
 
@@ -122,7 +123,9 @@ export default function ShareShell({
   }, [data, treeData, setSharedPageTree, setSharedTreeData]);
 
   return (
-    <AppShell
+    <>
+      <SkipToMain />
+      <AppShell
       header={{ height: 50 }}
       {...(data?.pageTree?.length > 1 && {
         navbar: {
@@ -242,7 +245,7 @@ export default function ShareShell({
         </AppShell.Navbar>
       )}
 
-      <AppShell.Main>
+      <AppShell.Main id={MAIN_CONTENT_ID} tabIndex={-1}>
         {children}
 
         {data && shareId && !(data.features?.length > 0) && <ShareBranding />}
@@ -264,5 +267,6 @@ export default function ShareShell({
 
       <ShareSearchSpotlight shareId={shareId} />
     </AppShell>
+    </>
   );
 }

apps/client/src/features/space/components/add-space-members-modal.tsx

@@ -1,6 +1,6 @@
 import { Button, Divider, Group, Modal, Stack } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import React, { useState } from "react";
+import React, { useId, useState } from "react";
 import { useAddSpaceMemberMutation } from "@/features/space/queries/space-query.ts";
 import { MultiMemberSelect } from "@/features/space/components/multi-member-select.tsx";
 import { SpaceMemberRole } from "@/features/space/components/space-member-role.tsx";
@@ -14,6 +14,7 @@ export default function AddSpaceMembersModal({
   spaceId,
 }: AddSpaceMemberModalProps) {
   const { t } = useTranslation();
+  const titleId = useId();
   const [opened, { open, close }] = useDisclosure(false);
   const [memberIds, setMemberIds] = useState<string[]>([]);
   const [role, setRole] = useState<string>(SpaceRole.WRITER);
@@ -51,24 +52,33 @@ export default function AddSpaceMembersModal({
   return (
     <>
       <Button onClick={open}>{t("Add space members")}</Button>
-      <Modal opened={opened} onClose={close} title={t("Add space members")}>
-        <Divider size="xs" mb="xs" />
+      <Modal.Root opened={opened} onClose={close}>
+        <Modal.Overlay />
+        <Modal.Content aria-labelledby={titleId}>
+          <Modal.Header>
+            <Modal.Title id={titleId}>{t("Add space members")}</Modal.Title>
+            <Modal.CloseButton aria-label={t("Close")} />
+          </Modal.Header>
+          <Modal.Body>
+            <Divider size="xs" mb="xs" />
 
-        <Stack>
-          <MultiMemberSelect onChange={handleMultiSelectChange} />
-          <SpaceMemberRole
-            onSelect={handleRoleSelection}
-            defaultRole={role}
-            label={t("Select role")}
-          />
-        </Stack>
+            <Stack>
+              <MultiMemberSelect onChange={handleMultiSelectChange} />
+              <SpaceMemberRole
+                onSelect={handleRoleSelection}
+                defaultRole={role}
+                label={t("Select role")}
+              />
+            </Stack>
 
-        <Group justify="flex-end" mt="md">
-          <Button onClick={handleSubmit} type="submit">
-            {t("Add")}
-          </Button>
-        </Group>
-      </Modal>
+            <Group justify="flex-end" mt="md">
+              <Button onClick={handleSubmit} type="submit">
+                {t("Add")}
+              </Button>
+            </Group>
+          </Modal.Body>
+        </Modal.Content>
+      </Modal.Root>
     </>
   );
 }

apps/client/src/features/space/components/create-space-form.tsx

@@ -1,4 +1,4 @@
-import { Group, Box, Button, TextInput, Stack, Textarea } from "@mantine/core";
+import { Group, Box, Button, TextInput, Stack, Textarea, Text } from "@mantine/core";
 import React, { useEffect } from "react";
 import { useForm } from "@mantine/form";
 import { zod4Resolver } from "mantine-form-zod-resolver";
@@ -69,10 +69,25 @@ export function CreateSpaceForm() {
     navigate(getSpaceUrl(createdSpace.slug));
   };
 
+  function handleValidationFailure(errors: Record<string, unknown>) {
+    const firstInvalidId = Object.keys(errors)[0];
+    if (firstInvalidId) {
+      document.getElementById(firstInvalidId)?.focus();
+    }
+  }
+
   return (
     <>
       <Box maw="500" mx="auto">
-        <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
+        <form
+          onSubmit={form.onSubmit(
+            (values) => handleSubmit(values),
+            handleValidationFailure,
+          )}
+        >
+          <Text size="sm" c="dimmed" mb="sm">
+            {t("* indicates required fields")}
+          </Text>
           <Stack>
             <TextInput
               withAsterisk
@@ -80,6 +95,8 @@ export function CreateSpaceForm() {
               label={t("Space name")}
               placeholder={t("e.g Product Team")}
               variant="filled"
+              data-autofocus
+              errorProps={{ role: "alert" }}
               {...form.getInputProps("name")}
             />
 
@@ -89,6 +106,7 @@ export function CreateSpaceForm() {
               label={t("Space slug")}
               placeholder={t("e.g product")}
               variant="filled"
+              errorProps={{ role: "alert" }}
               {...form.getInputProps("slug")}
             />
 
@@ -100,6 +118,7 @@ export function CreateSpaceForm() {
               autosize
               minRows={2}
               maxRows={8}
+              errorProps={{ role: "alert" }}
               {...form.getInputProps("description")}
             />
           </Stack>

apps/client/src/features/space/components/create-space-modal.tsx

@@ -11,7 +11,12 @@ export default function CreateSpaceModal() {
     <>
       <Button onClick={open}>{t("Create space")}</Button>
 
-      <Modal opened={opened} onClose={close} title={t("Create space")}>
+      <Modal
+        opened={opened}
+        onClose={close}
+        title={t("Create space")}
+        closeButtonProps={{ "aria-label": t("Close") }}
+      >
         <Divider size="xs" mb="xs" />
         <CreateSpaceForm />
       </Modal>

apps/client/src/features/space/components/settings-modal.tsx

@@ -48,7 +48,7 @@ export default function SpaceSettingsModal({
                 {space?.name}
               </Text>
             </Modal.Title>
-            <Modal.CloseButton />
+            <Modal.CloseButton aria-label={t("Close")} />
           </Modal.Header>
           <Modal.Body>
             <div style={{ height: rem(600) }}>

apps/client/src/features/space/components/sidebar/switch-space.tsx

@@ -38,6 +38,8 @@ export function SwitchSpace({
       shadow="md"
       opened={opened}
       onChange={toggle}
+      trapFocus
+      returnFocus
     >
       <Popover.Target>
         <Button

apps/client/src/features/space/components/space-carousel.module.css

@@ -6,6 +6,11 @@
     box-shadow: var(--mantine-shadow-xs);
     transform: scale(1.02);
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: 2px;
+  }
 }
 
 .cardSection {

apps/client/src/features/space/components/space-carousel.tsx

@@ -1,4 +1,4 @@
-import { Text, Card, rem, Group, Button, Skeleton } from "@mantine/core";
+import { Text, Card, rem, Group, Button, Skeleton, Title } from "@mantine/core";
 import {
   prefetchSpace,
   useGetSpacesQuery,
@@ -32,9 +32,9 @@ export default function SpaceCarousel() {
     return (
       <>
         <Group justify="space-between" align="center" mb="md">
-          <Text fz="sm" fw={500}>
+          <Title order={2} size="h6" fw={500}>
             {t("Spaces you belong to")}
-          </Text>
+          </Title>
         </Group>
         <CardCarousel ariaLabel={t("Spaces you belong to")}>
           {Array.from({ length: 4 }, (_, i) => (
@@ -80,9 +80,9 @@ export default function SpaceCarousel() {
   return (
     <>
       <Group justify="space-between" align="center" mb="md">
-        <Text fz="sm" fw={500}>
+        <Title order={2} size="h6" fw={500}>
           {t("Spaces you belong to")}
-        </Text>
+        </Title>
       </Group>
 
       <CardCarousel ariaLabel={t("Spaces you belong to")}>{cards}</CardCarousel>

apps/client/src/features/space/components/space-details.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { useSpaceQuery } from "@/features/space/queries/space-query.ts";
 import { EditSpaceForm } from "@/features/space/components/edit-space-form.tsx";
-import { Button, Divider, Text } from "@mantine/core";
+import { Button, Divider, Text, Title } from "@mantine/core";
 import DeleteSpaceModal from "./delete-space-modal";
 import { useDisclosure } from "@mantine/hooks";
 import ExportModal from "@/components/common/export-modal.tsx";
@@ -65,9 +65,9 @@ export default function SpaceDetails({ spaceId, readOnly }: SpaceDetailsProps) {
     <>
       {space && (
         <div>
-          <Text my="md" fw={600}>
+          <Title order={3} my="md" size="h6" fw={600}>
             {t("Details")}
-          </Text>
+          </Title>
 
           <div style={{ marginBottom: "20px" }}>
             <Text size="sm" fw={500} mb="xs">

apps/client/src/features/space/components/space-filter-menu.tsx

@@ -74,7 +74,11 @@ export function SpaceFilterMenu({
         />
 
         <ScrollArea.Autosize mah={280}>
-          <Menu.Item onClick={() => onChange(null)}>
+          <Menu.Item
+            role="menuitemradio"
+            aria-checked={!value}
+            onClick={() => onChange(null)}
+          >
             <Group flex="1" gap="xs">
               <Avatar
                 color="initials"
@@ -90,14 +94,19 @@ export function SpaceFilterMenu({
                   {t("Search in all your spaces")}
                 </Text>
               </div>
-              {!value && <IconCheck size={20} />}
+              {!value && <IconCheck size={20} aria-hidden />}
             </Group>
           </Menu.Item>
 
           <Divider my="xs" />
 
           {orderedSpaces.map((space) => (
-            <Menu.Item key={space.id} onClick={() => onChange(space.id)}>
+            <Menu.Item
+              key={space.id}
+              role="menuitemradio"
+              aria-checked={value === space.id}
+              onClick={() => onChange(space.id)}
+            >
               <Group flex="1" gap="xs">
                 <Avatar
                   color="initials"
@@ -108,7 +117,7 @@ export function SpaceFilterMenu({
                 <Text size="sm" fw={500} style={{ flex: 1 }} truncate>
                   {space.name}
                 </Text>
-                {value === space.id && <IconCheck size={20} />}
+                {value === space.id && <IconCheck size={20} aria-hidden />}
               </Group>
             </Menu.Item>
           ))}

apps/client/src/features/space/components/space-grid.module.css

@@ -4,6 +4,11 @@
         box-shadow: var(--mantine-shadow-xs);
         transform: scale(1.02);
     }
+
+    &:focus-visible {
+        outline: 2px solid var(--mantine-primary-color-filled);
+        outline-offset: 2px;
+    }
 }
 
 .cardSection {

apps/client/src/features/space/components/space-grid.tsx

@@ -1,4 +1,4 @@
-import { Text, SimpleGrid, Card, rem, Group, Button } from "@mantine/core";
+import { Text, SimpleGrid, Card, rem, Group, Button, Title } from "@mantine/core";
 import React from "react";
 import {
   prefetchSpace,
@@ -33,7 +33,7 @@ export default function SpaceGrid() {
     >
       <Card.Section className={classes.cardSection} h={40}>
         <div className={classes.starButton} data-favorited={spaceFavoriteIds.has(space.id)}>
-          <StarButton type="space" spaceId={space.id} size={16} />
+          <StarButton type="space" spaceId={space.id} name={space.name} size={16} />
         </div>
       </Card.Section>
       <CustomAvatar
@@ -59,9 +59,9 @@ export default function SpaceGrid() {
   return (
     <>
       <Group justify="space-between" align="center" mb="md">
-        <Text fz="sm" fw={500}>
+        <Title order={2} size="h6" fw={500}>
           {t("Spaces you belong to")}
-        </Text>
+        </Title>
       </Group>
 
       <SimpleGrid cols={{ base: 1, xs: 2, sm: 3 }}>{cards}</SimpleGrid>

apps/client/src/features/space/components/space-list.tsx

@@ -12,6 +12,7 @@ import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";
 import { SearchInput } from "@/components/common/search-input.tsx";
 import NoTableResults from "@/components/common/no-table-results.tsx";
 import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search.tsx";
+import rowClasses from "@/components/ui/clickable-table-row.module.css";
 
 export default function SpaceList() {
   const { t } = useTranslation();
@@ -42,8 +43,17 @@ export default function SpaceList() {
             data?.items.map((space, index) => (
               <Table.Tr
                 key={index}
-                style={{ cursor: "pointer" }}
+                className={rowClasses.row}
+                role="button"
+                tabIndex={0}
+                aria-label={t("Open settings for {{name}}", { name: space.name })}
                 onClick={() => handleClick(space.id)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    handleClick(space.id);
+                  }
+                }}
               >
                 <Table.Td>
                   <Group gap="sm" wrap="nowrap">

apps/client/src/features/space/components/space-members.tsx

@@ -207,7 +207,11 @@ export default function SpaceMembersList({
                         arrowPosition="center"
                       >
                         <Menu.Target>
-                          <ActionIcon variant="subtle" c="gray">
+                          <ActionIcon
+                            variant="subtle"
+                            c="gray"
+                            aria-label={t("Member actions")}
+                          >
                             <IconDots size={20} stroke={2} />
                           </ActionIcon>
                         </Menu.Target>

apps/client/src/features/space/components/space-security-settings.tsx

@@ -1,4 +1,4 @@
-import { Text, Divider } from "@mantine/core";
+import { Text, Divider, Title } from "@mantine/core";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { ISpace } from "@/features/space/types/space.types.ts";
@@ -20,9 +20,9 @@ export default function SpaceSecuritySettings({
 
   return (
     <div>
-      <Text my="md" fw={600}>
+      <Title order={3} my="md" size="h6" fw={600}>
         {t("Security")}
-      </Text>
+      </Title>
 
       <SpacePublicSharingToggle space={space} />
 

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>

apps/client/src/features/user/components/change-email.tsx

@@ -36,7 +36,13 @@ export default function ChangeEmail() {
       </Button>
       */}
 
-      <Modal opened={opened} onClose={close} title={t("Change email")} centered>
+      <Modal
+        opened={opened}
+        onClose={close}
+        title={t("Change email")}
+        centered
+        closeButtonProps={{ "aria-label": t("Close") }}
+      >
         <Text mb="md">
           {t(
             "To change your email, you have to enter your password and new email.",
@@ -80,6 +86,11 @@ function ChangeEmailForm() {
         placeholder={t("Enter your password")}
         variant="filled"
         mb="md"
+        visibilityToggleButtonProps={{
+          "aria-label": t("Toggle password visibility"),
+          "aria-hidden": false,
+          tabIndex: 0,
+        }}
         {...form.getInputProps("password")}
       />
 

apps/client/src/features/user/components/change-password.tsx

@@ -95,6 +95,11 @@ function ChangePasswordForm({ onClose }: ChangePasswordFormProps) {
         variant="filled"
         mb="md"
         data-autofocus
+        visibilityToggleButtonProps={{
+          "aria-label": t("Toggle password visibility"),
+          "aria-hidden": false,
+          tabIndex: 0,
+        }}
         {...form.getInputProps("oldPassword")}
       />
 
@@ -103,6 +108,11 @@ function ChangePasswordForm({ onClose }: ChangePasswordFormProps) {
         placeholder={t("Enter your new password")}
         variant="filled"
         mb="md"
+        visibilityToggleButtonProps={{
+          "aria-label": t("Toggle password visibility"),
+          "aria-hidden": false,
+          tabIndex: 0,
+        }}
         {...form.getInputProps("newPassword")}
       />
 

apps/client/src/features/user/components/notification-pref.tsx

@@ -3,7 +3,7 @@ import { updateUser } from "@/features/user/services/user-service.ts";
 import { IUser, IUserSettings } from "@/features/user/types/user.types.ts";
 import { Switch, Text, Title, Stack } from "@mantine/core";
 import { useAtom } from "jotai";
-import React, { useState } from "react";
+import React, { useId, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   ResponsiveSettingsRow,
@@ -64,6 +64,8 @@ function NotificationToggle({
   description: string;
 }) {
   const { t } = useTranslation();
+  const switchId = useId();
+  const descriptionId = useId();
   const [user, setUser] = useAtom(userAtom);
   const [checked, setChecked] = useState(
     user.settings?.notifications?.[settingKey] !== false,
@@ -83,14 +85,21 @@ function NotificationToggle({
   return (
     <ResponsiveSettingsRow>
       <ResponsiveSettingsContent>
-        <Text size="md">{t(label)}</Text>
-        <Text size="sm" c="dimmed">
+        <Text component="label" htmlFor={switchId} size="md" style={{ cursor: "pointer" }}>
+          {t(label)}
+        </Text>
+        <Text id={descriptionId} size="sm" c="dimmed">
           {t(description)}
         </Text>
       </ResponsiveSettingsContent>
 
       <ResponsiveSettingsControl>
-        <Switch checked={checked} onChange={handleChange} />
+        <Switch
+          id={switchId}
+          checked={checked}
+          onChange={handleChange}
+          aria-describedby={descriptionId}
+        />
       </ResponsiveSettingsControl>
     </ResponsiveSettingsRow>
   );
@@ -101,7 +110,7 @@ export default function NotificationPref() {
 
   return (
     <Stack gap="xs">
-      <Title order={5}>{t("Email notifications")}</Title>
+      <Title order={2} size="h5">{t("Email notifications")}</Title>
 
       {notificationItems.map((item) => (
         <NotificationToggle

apps/client/src/features/workspace/components/members/components/invite-action-menu.tsx

@@ -73,7 +73,11 @@ export default function InviteActionMenu({ invitationId }: Props) {
         arrowPosition="center"
       >
         <Menu.Target>
-          <ActionIcon variant="subtle" c="gray">
+          <ActionIcon
+            variant="subtle"
+            c="gray"
+            aria-label={t("Invite actions")}
+          >
             <IconDots size={20} stroke={2} />
           </ActionIcon>
         </Menu.Target>

apps/client/src/features/workspace/components/members/components/workspace-invite-form.tsx

@@ -56,6 +56,12 @@ export function WorkspaceInviteForm({ onClose }: Props) {
           maxDropdownHeight={200}
           maxTags={50}
           onChange={setEmails}
+          data-autofocus
+          autoComplete="off"
+          data-1p-ignore
+          data-lpignore="true"
+          data-bwignore
+          data-form-type="other"
         />
 
         <Select