fix: add i18next_json type to crowdin

v0.90.0
fix(a11y): WCAG 2.1 AA fixes (#2219 )
2026-05-21 01:04:39 +08:00 · 2026-05-20 17:34:34 +01:00 · 2026-05-20 16:55:23 +01:00 · 2026-05-20 16:47:25 +01:00 · 2026-05-20 16:45:59 +01:00 · 2026-05-19 14:07:07 +01:00
134 changed files with 1383 additions and 222 deletions
@@ -1,7 +1,7 @@
 {
  "name": "client",
  "private": true,
-  "version": "0.80.1",
+  "version": "0.90.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
@@ -277,6 +277,9 @@
  "Align left": "Align left",
  "Align right": "Align right",
  "Align center": "Align center",
+  "Alt text": "Alt text",
+  "Describe this for accessibility.": "Describe this for accessibility.",
+  "Add a description": "Add a description",
  "Justify": "Justify",
  "Merge cells": "Merge cells",
  "Split cell": "Split cell",
@@ -408,6 +411,10 @@
  "Write...": "Write...",
  "Column count": "Column count",
  "{{count}} Columns": "{{count}} Columns",
+  "{{count}} command available_one": "1 command available",
+  "{{count}} command available_other": "{{count}} commands available",
+  "{{count}} result available_one": "1 result available",
+  "{{count}} result available_other": "{{count}} results available",
  "Equal columns": "Equal columns",
  "Left sidebar": "Left sidebar",
  "Right sidebar": "Right sidebar",
@@ -873,9 +880,12 @@
  "AI Chat": "AI Chat",
  "Analyze for insights": "Analyze for insights",
  "Ask anything...": "Ask anything...",
+  "Assistant said:": "Assistant said:",
  "Chat history": "Chat history",
  "Chat name": "Chat name",
+  "Chat transcript": "Chat transcript",
  "Close": "Close",
+  "Copy assistant response": "Copy assistant response",
  "Docmost AI": "Docmost AI",
  "Failed to load chat. An error occurred.": "Failed to load chat. An error occurred.",
  "Failed to render this message.": "Failed to render this message.",
@@ -885,6 +895,8 @@
  "No chats found": "No chats found",
  "No conversations yet": "No conversations yet",
  "Open full page": "Open full page",
+  "Scroll to bottom": "Scroll to bottom",
+  "You said:": "You said:",
  "Previous 7 days": "Previous 7 days",
  "Previous 30 days": "Previous 30 days",
  "Search chats...": "Search chats...",
@@ -1047,5 +1059,30 @@
  "Updated {{date}}": "Updated {{date}}",
  "Cell actions": "Cell actions",
  "Column actions": "Column actions",
-  "Row actions": "Row actions"
+  "Row actions": "Row actions",
+  "Filter": "Filter",
+  "Page title": "Page title",
+  "Page content": "Page content",
+  "Member actions": "Member actions",
+  "Toggle password visibility": "Toggle password visibility",
+  "Send comment": "Send comment",
+  "Token actions": "Token actions",
+  "Template settings": "Template settings",
+  "Edit diagram": "Edit diagram",
+  "Edit embed": "Edit embed",
+  "Edit drawing": "Edit drawing",
+  "Delete equation": "Delete equation",
+  "Invite actions": "Invite actions",
+  "Get started": "Get started",
+  "* indicates required fields": "* indicates required fields",
+  "List of spaces in this workspace": "List of spaces in this workspace",
+  "Active sessions": "Active sessions",
+  "Add {{name}} to favorites": "Add {{name}} to favorites",
+  "Remove {{name}} from favorites": "Remove {{name}} from favorites",
+  "Added to favorites": "Added to favorites",
+  "Removed from favorites": "Removed from favorites",
+  "Added {{name}} to favorites": "Added {{name}} to favorites",
+  "Removed {{name}} from favorites": "Removed {{name}} from favorites",
+  "Page menu for {{name}}": "Page menu for {{name}}",
+  "Create subpage of {{name}}": "Create subpage of {{name}}"
 }
@@ -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;

@@ -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>
@@ -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">
@@ -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)}
                  >
@@ -1,22 +1,28 @@
-import { ActionIcon, Box, Group, ScrollArea, Text, Tooltip } from "@mantine/core";
+import { ActionIcon, Box, Group, ScrollArea, Title, Tooltip } from "@mantine/core";
 import { IconX } from "@tabler/icons-react";
 import CommentListWithTabs from "@/features/comment/components/comment-list-with-tabs.tsx";
 import { useAtom } from "jotai";
 import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
-import React, { ReactNode } from "react";
+import React, { ReactNode, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { TableOfContents } from "@/features/editor/components/table-of-contents/table-of-contents.tsx";
 import { useAtomValue } from "jotai";
 import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
 import AsideChatPanel from "@/ee/ai-chat/components/aside-chat-panel";
 import { PageDetailsAside } from "@/features/page-details/components/page-details-aside.tsx";
+import { ASIDE_PANEL_ID } from "@/hooks/use-toggle-aside.tsx";

 export default function Aside() {
-  const [{ tab }, setAsideState] = useAtom(asideStateAtom);
+  const [{ tab, isAsideOpen }, setAsideState] = useAtom(asideStateAtom);
  const { t } = useTranslation();
  const pageEditor = useAtomValue(pageEditorAtom);
  const closeAside = () => setAsideState((s) => ({ ...s, isAsideOpen: false }));

+  useEffect(() => {
+    if (!isAsideOpen) return;
+    document.getElementById(ASIDE_PANEL_ID)?.focus();
+  }, [isAsideOpen, tab]);
+
  let title: string;
  let component: ReactNode;

@@ -48,7 +54,7 @@ export default function Aside() {
        <>
          {tab !== "chat" && (
            <Group justify="space-between" wrap="nowrap" mb="md">
-              <Text fw={500}>{t(title)}</Text>
+              <Title order={2} size="h6" fw={500}>{t(title)}</Title>
              <Tooltip label={t("Close")} withArrow>
                <ActionIcon
                  variant="subtle"
@@ -18,6 +18,8 @@ import classes from "./app-shell.module.css";
 import { useTrialEndAction } from "@/ee/hooks/use-trial-end-action.tsx";
 import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
 import GlobalSidebar from "@/components/layouts/global/global-sidebar.tsx";
+import { ASIDE_PANEL_ID } from "@/hooks/use-toggle-aside.tsx";
+import { MAIN_CONTENT_ID, SkipToMain } from "@/components/ui/skip-to-main.tsx";

 export default function GlobalAppShell({
  children,
@@ -81,7 +83,9 @@ export default function GlobalAppShell({
  const showGlobalSidebar = !isSpaceRoute && !isSettingsRoute && !isAiRoute;

  return (
-    <AppShell
+    <>
+      <SkipToMain />
+      <AppShell
      header={{ height: 45 }}
      navbar={{
        width: isSpaceRoute ? sidebarWidth : 300,
@@ -125,7 +129,7 @@ export default function GlobalAppShell({
        {isAiRoute && <AiChatSidebar />}
        {showGlobalSidebar && <GlobalSidebar />}
      </AppShell.Navbar>
-      <AppShell.Main id="main-content">
+      <AppShell.Main id={MAIN_CONTENT_ID} tabIndex={-1}>
        {isSettingsRoute ? (
          <Container size={900} pb={80}>
            {children}
@@ -137,6 +141,8 @@ export default function GlobalAppShell({

      {isPageRoute && (
        <AppShell.Aside
+          id={ASIDE_PANEL_ID}
+          tabIndex={-1}
          className={classes.aside}
          p="md"
          withBorder={false}
@@ -156,5 +162,6 @@ export default function GlobalAppShell({
        </AppShell.Aside>
      )}
    </AppShell>
+    </>
  );
 }
@@ -31,6 +31,11 @@
        color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
    }

+    &:focus-visible {
+        outline: 2px solid var(--mantine-primary-color-filled);
+        outline-offset: 2px;
+    }
+
    &[data-active] {
        &,
        & :hover {
@@ -96,4 +101,9 @@
        );
        color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
    }
+
+    &:focus-visible {
+        outline: 2px solid var(--mantine-primary-color-filled);
+        outline-offset: 2px;
+    }
 }
@@ -92,6 +92,7 @@ export default function GlobalSidebar() {
                key={item.label}
                className={classes.link}
                data-active={active === item.path || undefined}
+                aria-current={active === item.path ? "page" : undefined}
                to={item.path}
                onClick={handleNavClick}
              >
@@ -159,6 +160,7 @@ export default function GlobalSidebar() {
        <Link
          className={classes.link}
          data-active={active.startsWith("/settings") || undefined}
+          aria-current={active.startsWith("/settings") ? "page" : undefined}
          to="/settings/account/profile"
          onClick={handleNavClick}
        >
@@ -4,7 +4,7 @@ import { Divider, Title } from '@mantine/core';
 export default function SettingsTitle({ title }: { title: string }) {
  return (
    <>
-      <Title order={3}>
+      <Title order={1} size="h3">
        {title}
      </Title>
      <Divider my="md" />
@@ -0,0 +1,29 @@
+/*
+ * Focus styling for list-style tables (recent changes, favorites, all
+ * spaces, groups, verified pages, shares).
+ *
+ * Per WAI-ARIA Authoring Practices and Adrian Roselli's guidance on table
+ * accessibility (https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html),
+ * data tables should not be made fully clickable. Only the title cell is the
+ * link, and that link is what receives Tab focus.
+ *
+ * - `.row` adds a subtle background tint when the row contains the focused
+ *   element, so keyboard users can see which row they're inspecting.
+ * - `.link` adds a visible :focus-visible outline on the title link itself.
+ *
+ * No stretched-link pseudo here on purpose: absolutely-positioned pseudos
+ * inside table cells cause column reflow on focus in Chromium.
+ */
+
+.row:focus-within {
+  background-color: light-dark(
+    var(--mantine-color-gray-1),
+    var(--mantine-color-dark-6)
+  );
+}
+
+.link:focus-visible {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: 2px;
+  border-radius: var(--mantine-radius-sm);
+}
@@ -16,14 +16,18 @@ interface CustomAvatarProps {
  mt?: string | number;
 }

-// `color.shade` pairs whose filled background meets WCAG AA (4.5:1) against
-// white text. Avoids lime/yellow/green/orange — even their dark shades have
-// weak white-text contrast.
+// `color.shade` pairs whose contrast meets WCAG AA (4.5:1) in BOTH variants:
+//   - filled: white text on the shade as bg
+//   - light:  shade as text on the color's light-bg (10% color.6 over white)
+// Avoids lime/yellow/green/orange — even their dark shades have weak
+// contrast. grape and indigo were bumped from .7 to darker shades because
+// the original picks failed: grape.7 was 4.02/3.61 (both fail) and
+// indigo.7 was 4.98/4.39 (light fails by a hair).
 const SAFE_INITIALS_COLORS: MantineColor[] = [
  "blue.8",
  "cyan.9",
-  "grape.7",
-  "indigo.7",
+  "grape.9",
+  "indigo.8",
  "pink.8",
  "red.8",
  "violet.7",
@@ -41,7 +41,7 @@ export function DestinationPickerModal({
      <Modal.Content>
        <Modal.Header py={0}>
          <Modal.Title fw={500}>{title}</Modal.Title>
-          <Modal.CloseButton />
+          <Modal.CloseButton aria-label={t("Close")} />
        </Modal.Header>
        <Modal.Body>
          <DestinationPicker
@@ -14,7 +14,14 @@ export interface SidebarToggleProps extends BoxProps, ElementProps<"button"> {
 const SidebarToggle = React.forwardRef<HTMLButtonElement, SidebarToggleProps>(
  ({ opened, size = "sm", ...others }, ref) => {
    return (
-      <ActionIcon size={size} {...others} variant="subtle" color="gray" ref={ref}>
+      <ActionIcon
+        size={size}
+        aria-expanded={opened}
+        {...others}
+        variant="subtle"
+        color="gray"
+        ref={ref}
+      >
        {opened ? (
          <IconLayoutSidebarRightExpand />
        ) : (
@@ -0,0 +1,27 @@
+.skipLink {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  z-index: 9999;
+  padding: 8px 16px;
+  background: var(--mantine-color-body);
+  color: var(--mantine-color-text);
+  border: 2px solid var(--mantine-color-blue-6);
+  border-radius: 4px;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: var(--mantine-font-size-sm);
+  transform: translateY(-200%);
+  transition: transform 0.15s ease-out;
+}
+
+.skipLink:focus {
+  transform: translateY(0);
+  outline: none;
+}
+
+@media print {
+  .skipLink {
+    display: none !important;
+  }
+}
@@ -0,0 +1,13 @@
+import { useTranslation } from "react-i18next";
+import classes from "./skip-to-main.module.css";
+
+export const MAIN_CONTENT_ID = "main-content";
+
+export function SkipToMain() {
+  const { t } = useTranslation();
+  return (
+    <a href={`#${MAIN_CONTENT_ID}`} className={classes.skipLink}>
+      {t("Skip to main content")}
+    </a>
+  );
+}
@@ -120,7 +120,7 @@ export default function AiChatSidebar() {
  return (
    <div className={classes.sidebar}>
      <div className={classes.header}>
-        <span className={classes.title}>{t("AI Chat")}</span>
+        <h2 className={classes.title}>{t("AI Chat")}</h2>
        <Tooltip label={t("New chat")} openDelay={250} withArrow>
          <ActionIcon
            component={Link}
@@ -176,7 +176,7 @@ export default function AiChatSidebar() {
            ))
          : groupedChats.map((group) => (
              <div key={group.key} className={classes.chatGroup}>
-                <div className={classes.chatGroupLabel}>{group.label}</div>
+                <h3 className={classes.chatGroupLabel}>{group.label}</h3>
                {group.chats.map((chat) => (
                  <AiChatSidebarItem
                    key={chat.id}
@@ -56,9 +56,9 @@ export default function ChatEmptyState({ isStreaming, onSend, onStop }: Props) {
    <div className={classes.emptyState}>
      <IconSparkles size={48} stroke={1.5} className={classes.emptyStateIcon} />
      <div className={classes.emptyStateBrand}>{t("Docmost AI")}</div>
-      <div className={classes.emptyStateTitle}>
+      <h1 className={classes.emptyStateTitle}>
        {t("What can I help you with?")}
-      </div>
+      </h1>

      <div className={classes.emptyStateInput}>
        <ChatInput
@@ -71,7 +71,7 @@ export default function ChatEmptyState({ isStreaming, onSend, onStop }: Props) {
      </div>

      <div className={classes.suggestionsSection}>
-        <div className={classes.suggestionsLabel}>Get started</div>
+        <h2 className={classes.suggestionsLabel}>{t("Get started")}</h2>
        <div className={classes.suggestionsGrid}>
          {SUGGESTIONS.map((s) => (
            <button
@@ -226,6 +226,7 @@ export default function ChatInput({
    ],
    editorProps: {
      attributes: {
+        role: "textbox",
        "aria-label": placeholder || t("Ask anything... Use @ to mention pages"),
        "aria-multiline": "true",
      },
@@ -335,7 +336,15 @@ export default function ChatInput({

      <EditorContent editor={editor} className={classes.editorContent} />
      <div className={classes.actions}>
-        <Popover opened={plusMenuOpen} onChange={setPlusMenuOpen} position="top-start" width={220} shadow="md">
+        <Popover
+          opened={plusMenuOpen}
+          onChange={setPlusMenuOpen}
+          position="top-start"
+          width={220}
+          shadow="md"
+          trapFocus
+          returnFocus
+        >
          <Popover.Target>
            <button
              type="button"
@@ -2,6 +2,7 @@ import { useEffect, useRef, useCallback, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { IconArrowDown, IconAlertTriangle } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
+import { VisuallyHidden } from "@mantine/core";
 import type { AiChatMessage, AiChatToolCall } from "../types/ai-chat.types";
 import ChatMessage from "./chat-message";
 import classes from "../styles/ai-chat.module.css";
@@ -33,6 +34,7 @@ export default function ChatMessageList({
  streamingContent,
  streamingToolCalls,
 }: Props) {
+  const { t } = useTranslation();
  const containerRef = useRef<HTMLDivElement>(null);
  const bottomRef = useRef<HTMLDivElement>(null);
  const isAtBottomRef = useRef(true);
@@ -40,6 +42,38 @@ export default function ChatMessageList({
  const prevScrollTopRef = useRef(0);
  const [showScrollButton, setShowScrollButton] = useState(false);

+  // Dedicated status-region announcement for screen readers. Rather than
+  // putting aria-live on the whole transcript (which re-fires for every
+  // streamed token), announce "AI is thinking…" when streaming starts and
+  // the full assistant reply once streaming completes — a single, clean read.
+  const [statusAnnouncement, setStatusAnnouncement] = useState("");
+  const wasStreamingRef = useRef(false);
+
+  useEffect(() => {
+    const justStartedStreaming = isStreaming && !wasStreamingRef.current;
+    const justFinishedStreaming = !isStreaming && wasStreamingRef.current;
+
+    if (justStartedStreaming) {
+      setStatusAnnouncement(t("AI is thinking..."));
+    } else if (justFinishedStreaming) {
+      const lastMessage = messages[messages.length - 1];
+      if (lastMessage?.role === "assistant" && lastMessage.content) {
+        // Strip markdown punctuation so screen readers don't read symbols
+        // like # * _ ` ~ aloud. A plain-text version is fine — the styled
+        // version stays in the DOM for visual users.
+        const plainText = lastMessage.content
+          .replace(/[#*_`~]/g, "")
+          .replace(/\s+/g, " ")
+          .trim();
+        setStatusAnnouncement(plainText);
+      } else {
+        setStatusAnnouncement("");
+      }
+    }
+
+    wasStreamingRef.current = isStreaming;
+  }, [isStreaming, messages, t]);
+
  const scrollToBottom = useCallback((behavior: ScrollBehavior = "smooth") => {
    const container = containerRef.current;
    if (!container) return;
@@ -127,7 +161,18 @@ export default function ChatMessageList({

  return (
    <div className={classes.messageListWrapper}>
-      <div ref={containerRef} className={classes.messageList}>
+      {/* Single status region for chat announcements. Kept outside the
+          scrolling transcript so changes here trigger one polite read per
+          state change instead of re-announcing every streamed token. */}
+      <VisuallyHidden role="status" aria-live="polite">
+        {statusAnnouncement}
+      </VisuallyHidden>
+
+      <div
+        ref={containerRef}
+        className={classes.messageList}
+        aria-label={t("Chat transcript")}
+      >
        {messages.map((msg) => (
          <ErrorBoundary
            key={msg.id}
@@ -162,7 +207,7 @@ export default function ChatMessageList({
      {showScrollButton && (
        <button
          type="button"
-          aria-label="Scroll to bottom"
+          aria-label={t("Scroll to bottom")}
          className={classes.scrollToBottomButton}
          onClick={() => scrollToBottom("smooth")}
        >
@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 import { useNavigate } from "react-router";
+import { useTranslation } from "react-i18next";
 import DOMPurify from "dompurify";
 import { ActionIcon, Tooltip } from "@mantine/core";
 import {
@@ -43,6 +44,7 @@ export default function ChatMessage({
  streamingToolCalls,
 }: Props) {
  const navigate = useNavigate();
+  const { t } = useTranslation();

  const handleContentClick = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
@@ -78,7 +80,11 @@ export default function ChatMessage({
      }[]) || [];

    return (
-      <div className={classes.userMessage}>
+      <div
+        className={classes.userMessage}
+        role="article"
+        aria-label={t("You said:")}
+      >
        <div className={classes.userBubble}>
          {attachments.length > 0 && (
            <div className={classes.messageAttachments}>
@@ -100,8 +106,16 @@ export default function ChatMessage({
    );
  }

+  // Only label the article when there's something meaningful to announce.
+  // Tool-only assistant turns (no text) shouldn't announce "Assistant said:" with empty content.
+  const hasAnnouncableContent = Boolean(content);
+
  return (
-    <div className={classes.assistantMessage}>
+    <div
+      className={classes.assistantMessage}
+      role="article"
+      aria-label={hasAnnouncableContent ? t("Assistant said:") : undefined}
+    >
      <div className={classes.messageContent}>
        {toolCalls && toolCalls.length > 0 && (
          <ChatToolGroup toolCalls={toolCalls} isStreaming={isStreaming} />
@@ -131,7 +145,10 @@ export default function ChatMessage({
      </div>
      {!isStreaming && message.content && (
        <div className={classes.messageActions}>
-          <CopyTextButton text={message?.content} />
+          <CopyTextButton
+            text={message?.content}
+            label={t("Copy assistant response")}
+          />
        </div>
      )}
    </div>
@@ -106,6 +106,7 @@
  font-size: 1.5rem;
  font-weight: 600;
  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
+  margin-top: 0;
  margin-bottom: var(--mantine-spacing-xl);
  text-align: center;
 }
@@ -128,6 +129,7 @@
  color: var(--mantine-color-dimmed);
  text-transform: uppercase;
  letter-spacing: 0.5px;
+  margin-top: 0;
  margin-bottom: var(--mantine-spacing-sm);
 }

@@ -114,7 +114,7 @@
  }

  :global(.ProseMirror p.is-editor-empty:first-child::before) {
-    color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
+    color: var(--mantine-color-placeholder);
    content: attr(data-placeholder);
    float: left;
    height: 0;
@@ -183,7 +183,7 @@
  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
  background: none;
  cursor: pointer;
-  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-3));
  transition: color 150ms, background-color 150ms;

  @mixin hover {
@@ -15,6 +15,7 @@
 }

 .title {
+  margin: 0;
  font-weight: 600;
  font-size: var(--mantine-font-size-sm);
 }
@@ -33,6 +34,7 @@
 }

 .chatGroupLabel {
+  margin: 0;
  padding: 4px var(--mantine-spacing-xs);
  font-size: var(--mantine-font-size-xs);
  font-weight: 600;
@@ -118,7 +120,8 @@
  color: inherit;
 }

-.chatItem:hover .chatItemDate {
+.chatItem:hover .chatItemDate,
+.chatItem:focus-within .chatItemDate {
  opacity: 0;
 }

@@ -133,6 +136,12 @@
  position: relative;
 }

-.chatItem:hover .chatItemActions {
+.chatItem:hover .chatItemActions,
+.chatItem:focus-within .chatItemActions {
  opacity: 1;
 }
+
+.chatItemActions :global(.mantine-ActionIcon-root):focus-visible {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: 2px;
+}
@@ -33,6 +33,7 @@ export function ApiKeyCreatedModal({
      onClose={onClose}
      title={t("{{credential}} created", { credential: t("API key") })}
      size="lg"
+      closeButtonProps={{ "aria-label": t("Close") }}
    >
      <Stack gap="md">
        <Alert
@@ -107,6 +107,7 @@ export function CreateApiKeyModal({
      onClose={handleClose}
      title={t("Create {{credential}}", { credential: t("API key") })}
      size="md"
+      closeButtonProps={{ "aria-label": t("Close") }}
    >
      <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
        <Stack gap="md">
@@ -32,6 +32,7 @@ export function RevokeApiKeyModal({
      onClose={onClose}
      title={t("Revoke {{credential}}", { credential: t("API key") })}
      size="md"
+      closeButtonProps={{ "aria-label": t("Close") }}
    >
      <Stack gap="md">
        <Text>
@@ -55,6 +55,7 @@ export function UpdateApiKeyModal({
      onClose={onClose}
      title={t("Update {{credential}}", { credential: t("API key") })}
      size="md"
+      closeButtonProps={{ "aria-label": t("Close") }}
    >
      <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
        <Stack gap="md">
@@ -111,6 +111,11 @@ export function LdapLoginModal({
            placeholder={t("Enter your LDAP password")}
            variant="filled"
            disabled={isLoading}
+            visibilityToggleButtonProps={{
+              "aria-label": t("Toggle password visibility"),
+              "aria-hidden": false,
+              tabIndex: 0,
+            }}
            {...form.getInputProps("password")}
          />

@@ -130,6 +130,11 @@ export function MfaBackupCodesModal({
                  label={t("Confirm password")}
                  placeholder={t("Enter your password")}
                  variant="filled"
+                  visibilityToggleButtonProps={{
+                    "aria-label": t("Toggle password visibility"),
+                    "aria-hidden": false,
+                    tabIndex: 0,
+                  }}
                  {...form.getInputProps("confirmPassword")}
                  autoFocus
                  data-autofocus
@@ -107,6 +107,11 @@ export function MfaDisableModal({
              <PasswordInput
                label={t("Password")}
                placeholder={t("Enter your password")}
+                visibilityToggleButtonProps={{
+                  "aria-label": t("Toggle password visibility"),
+                  "aria-hidden": false,
+                  tabIndex: 0,
+                }}
                {...form.getInputProps("confirmPassword")}
                autoFocus
                data-autofocus
@@ -79,7 +79,13 @@ export function PageShareModal({ readOnly }: PageShareModalProps) {
        {t("Share")}
      </Button>

-      <Modal opened={opened} onClose={close} title={t("Share")} size={600}>
+      <Modal
+        opened={opened}
+        onClose={close}
+        title={t("Share")}
+        size={600}
+        closeButtonProps={{ "aria-label": t("Close") }}
+      >
        <Tabs value={activeTab} color="dark" onChange={setActiveTab}>
          <Tabs.List mb="md">
            <Tabs.Tab value="access">{t("Access")}</Tabs.Tab>
@@ -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}>
@@ -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}
                    >
@@ -52,6 +52,7 @@ export function CreateScimTokenModal({
      onClose={handleClose}
      title={t("Create {{credential}}", { credential: t("SCIM token") })}
      size="md"
+      closeButtonProps={{ "aria-label": t("Close") }}
    >
      <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
        <Stack gap="md">
@@ -29,6 +29,7 @@ export function RevokeScimTokenModal({
      onClose={onClose}
      title={t("Revoke {{credential}}", { credential: t("SCIM token") })}
      size="md"
+      closeButtonProps={{ "aria-label": t("Close") }}
    >
      <Stack gap="md">
        <Text>
@@ -32,6 +32,7 @@ export function ScimTokenCreatedModal({
      onClose={onClose}
      title={t("{{credential}} created", { credential: t("SCIM token") })}
      size="lg"
+      closeButtonProps={{ "aria-label": t("Close") }}
    >
      <Stack gap="md">
        <Alert
@@ -93,7 +93,11 @@ export function ScimTokenTable({
                <Table.Td>
                  <Menu position="bottom-end" withinPortal>
                    <Menu.Target>
-                      <ActionIcon variant="subtle" color="gray">
+                      <ActionIcon
+                        variant="subtle"
+                        color="gray"
+                        aria-label={t("Token actions")}
+                      >
                        <IconDots size={16} />
                      </ActionIcon>
                    </Menu.Target>
@@ -52,6 +52,7 @@ export function UpdateScimTokenModal({
      onClose={onClose}
      title={t("Update {{credential}}", { credential: t("SCIM token") })}
      size="md"
+      closeButtonProps={{ "aria-label": t("Close") }}
    >
      <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
        <Stack gap="md">
@@ -32,6 +32,7 @@ export default function SsoProviderModal({
        ssoProviderType: provider.type.toUpperCase(),
      })}
      onClose={onClose}
+      closeButtonProps={{ "aria-label": t("Close") }}
    >
      {provider.type === SSO_PROVIDER.SAML && (
        <SsoSamlForm provider={provider} onClose={onClose} />
@@ -52,7 +52,7 @@ export default function TemplatePreviewModal({
                {t("Edit")}
              </Button>
            )}
-            <Modal.CloseButton />
+            <Modal.CloseButton aria-label={t("Close")} />
          </Group>
        </Modal.Header>
        <Modal.Body p={0}>
@@ -283,6 +283,7 @@ export default function TemplateEditor() {
                  variant="subtle"
                  color="gray"
                  size="md"
+                  aria-label={t("Template settings")}
                  onClick={() => {
                    setDraftSpaceId(spaceId);
                    openSettings();
@@ -20,7 +20,7 @@ export function AuthLayout({ children }: AuthLayoutProps) {
          Docmost
        </Text>
      </Group>
-      {children}
+      <main>{children}</main>
    </>
  );
 }
@@ -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}>
@@ -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")}
                />

@@ -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")}
          />

@@ -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}>
@@ -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}
@@ -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}
@@ -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);
@@ -0,0 +1,139 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Editor } from "@tiptap/react";
+import {
+  ActionIcon,
+  Button,
+  Group,
+  Paper,
+  Text,
+  Textarea,
+  Tooltip,
+} from "@mantine/core";
+import { IconAlt } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+
+const ALT_MAX_LENGTH = 300;
+
+function sanitizeAlt(value: string): string {
+  return value
+    .replace(/[\\\[\]!]/g, "")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+type UseAltTextControlArgs = {
+  editor: Editor;
+  nodeName: string;
+  currentAlt: string;
+};
+
+export function useAltTextControl({
+  editor,
+  nodeName,
+  currentAlt,
+}: UseAltTextControlArgs) {
+  const { t } = useTranslation();
+  const [showInput, setShowInput] = useState(false);
+  const [draft, setDraft] = useState("");
+
+  const open = useCallback(() => {
+    setDraft(currentAlt || "");
+    setShowInput(true);
+  }, [currentAlt]);
+
+  useEffect(() => {
+    const handler = () => {
+      if (!editor.isActive(nodeName)) {
+        setShowInput(false);
+      }
+    };
+    editor.on("selectionUpdate", handler);
+    return () => {
+      editor.off("selectionUpdate", handler);
+    };
+  }, [editor, nodeName]);
+
+  const cancel = useCallback(() => {
+    setShowInput(false);
+  }, []);
+
+  const save = useCallback(() => {
+    editor
+      .chain()
+      .focus(undefined, { scrollIntoView: false })
+      .updateAttributes(nodeName, { alt: sanitizeAlt(draft) || undefined })
+      .run();
+    setShowInput(false);
+  }, [editor, nodeName, draft]);
+
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        save();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        cancel();
+      }
+    },
+    [save, cancel],
+  );
+
+  const button = (
+    <Tooltip position="top" label={t("Alt text")} withinPortal={false}>
+      <ActionIcon
+        onClick={open}
+        size="lg"
+        aria-label={t("Alt text")}
+        variant="subtle"
+      >
+        <IconAlt size={18} />
+      </ActionIcon>
+    </Tooltip>
+  );
+
+  const panel = showInput ? (
+    <Paper
+      withBorder
+      shadow="md"
+      radius={6}
+      p="sm"
+      w={320}
+      style={{ position: "relative", zIndex: 100 }}
+    >
+      <Text size="sm" fw={600} mb={2}>
+        {t("Alt text")}
+      </Text>
+      <Text size="xs" c="dimmed" mb="xs">
+        {t("Describe this for accessibility.")}
+      </Text>
+      <Textarea
+        size="xs"
+        placeholder={t("Add a description")}
+        value={draft}
+        onChange={(e) => setDraft(e.currentTarget.value)}
+        onKeyDown={onKeyDown}
+        autoFocus
+        autosize
+        minRows={2}
+        maxRows={5}
+        maxLength={ALT_MAX_LENGTH}
+      />
+      <Group justify="space-between" align="center" mt="xs" wrap="nowrap">
+        <Text size="xs" c="dimmed">
+          {draft.length}/{ALT_MAX_LENGTH}
+        </Text>
+        <Group gap="xs">
+          <Button size="compact-xs" variant="default" onClick={cancel}>
+            {t("Cancel")}
+          </Button>
+          <Button size="compact-xs" onClick={save}>
+            {t("Save")}
+          </Button>
+        </Group>
+      </Group>
+    </Paper>
+  ) : null;
+
+  return { button, panel, isEditing: showInput };
+}
@@ -38,6 +38,7 @@ import {
 import { decodeBase64ToSvgString, svgStringToFile } from "@/lib/utils";
 import { IAttachment } from "@/features/attachments/types/attachment.types";
 import { modals } from "@mantine/modals";
+import { useAltTextControl } from "@/features/editor/components/common/use-alt-text-control.tsx";
 import classes from "../common/toolbar-menu.module.css";

 export function DrawioMenu({ editor }: EditorMenuProps) {
@@ -66,6 +67,7 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
        isAlignRight: ctx.editor.isActive("drawio", { align: "right" }),
        src: drawioAttr?.src || null,
        attachmentId: drawioAttr?.attachmentId || null,
+        alt: drawioAttr?.alt || "",
      };
    },
  });
@@ -140,6 +142,16 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
    editor.commands.deleteSelection();
  }, [editor]);

+  const {
+    button: altTextButton,
+    panel: altTextPanel,
+    isEditing: isEditingAlt,
+  } = useAltTextControl({
+    editor,
+    nodeName: "drawio",
+    currentAlt: editorState?.alt || "",
+  });
+
  const saveData = useCallback(async (svgXml: string) => {
    if (isSavingRef.current) return;

@@ -266,7 +278,10 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
        }}
        shouldShow={shouldShow}
      >
-        <div className={classes.toolbar}>
+        {isEditingAlt ? (
+          altTextPanel
+        ) : (
+          <div className={classes.toolbar}>
          <Tooltip position="top" label={t("Align left")} withinPortal={false}>
            <ActionIcon
              onClick={alignLeft}
@@ -309,6 +324,10 @@ export function DrawioMenu({ editor }: EditorMenuProps) {

          <div className={classes.divider} />

+          {altTextButton}
+
+          <div className={classes.divider} />
+
          <Tooltip position="top" label={t("Edit")} withinPortal={false}>
            <ActionIcon
              onClick={handleOpen}
@@ -342,7 +361,8 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
              <IconTrash size={18} />
            </ActionIcon>
          </Tooltip>
-        </div>
+          </div>
+        )}
      </BaseBubbleMenu>

      <Modal.Root opened={opened} onClose={handleClose} fullScreen closeOnEscape={false}>
@@ -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>

@@ -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>

@@ -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)}
@@ -36,6 +36,7 @@ import { IAttachment } from "@/features/attachments/types/attachment.types";
 import ReactClearModal from "react-clear-modal";
 import { useHandleLibrary } from "@excalidraw/excalidraw";
 import { localStorageLibraryAdapter } from "@/features/editor/components/excalidraw/excalidraw-utils.ts";
+import { useAltTextControl } from "@/features/editor/components/common/use-alt-text-control.tsx";
 import classes from "../common/toolbar-menu.module.css";

 const ExcalidrawComponent = lazy(() =>
@@ -77,6 +78,7 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
        isAlignRight: ctx.editor.isActive("excalidraw", { align: "right" }),
        src: excalidrawAttr?.src || null,
        attachmentId: excalidrawAttr?.attachmentId || null,
+        alt: excalidrawAttr?.alt || "",
      };
    },
  });
@@ -153,6 +155,16 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
    editor.commands.deleteSelection();
  }, [editor]);

+  const {
+    button: altTextButton,
+    panel: altTextPanel,
+    isEditing: isEditingAlt,
+  } = useAltTextControl({
+    editor,
+    nodeName: "excalidraw",
+    currentAlt: editorState?.alt || "",
+  });
+
  const handleOpen = useCallback(async () => {
    if (!editorState?.src) return;

@@ -291,7 +303,10 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
        }}
        shouldShow={shouldShow}
      >
-        <div className={classes.toolbar}>
+        {isEditingAlt ? (
+          altTextPanel
+        ) : (
+          <div className={classes.toolbar}>
          <Tooltip position="top" label={t("Align left")} withinPortal={false}>
            <ActionIcon
              onClick={alignLeft}
@@ -340,6 +355,10 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {

          <div className={classes.divider} />

+          {altTextButton}
+
+          <div className={classes.divider} />
+
          <Tooltip position="top" label={t("Edit")} withinPortal={false}>
            <ActionIcon
              onClick={handleOpen}
@@ -373,7 +392,8 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
              <IconTrash size={18} />
            </ActionIcon>
          </Tooltip>
-        </div>
+          </div>
+        )}
      </BaseBubbleMenu>

      <ReactClearModal
@@ -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>

@@ -20,6 +20,7 @@ import {
 import { useTranslation } from "react-i18next";
 import { getFileUrl } from "@/lib/config.ts";
 import { uploadImageAction } from "@/features/editor/components/image/upload-image-action.tsx";
+import { useAltTextControl } from "@/features/editor/components/common/use-alt-text-control.tsx";
 import classes from "../common/toolbar-menu.module.css";

 export function ImageMenu({ editor }: EditorMenuProps) {
@@ -41,6 +42,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
        isAlignCenter: ctx.editor.isActive("image", { align: "center" }),
        isAlignRight: ctx.editor.isActive("image", { align: "right" }),
        src: imageAttrs?.src || null,
+        alt: imageAttrs?.alt || "",
      };
    },
  });
@@ -136,6 +138,16 @@ export function ImageMenu({ editor }: EditorMenuProps) {
    editor.commands.deleteSelection();
  }, [editor]);

+  const {
+    button: altTextButton,
+    panel: altTextPanel,
+    isEditing: isEditingAlt,
+  } = useAltTextControl({
+    editor,
+    nodeName: "image",
+    currentAlt: editorState?.alt || "",
+  });
+
  return (
    <BaseBubbleMenu
      editor={editor}
@@ -149,7 +161,10 @@ export function ImageMenu({ editor }: EditorMenuProps) {
      }}
      shouldShow={shouldShow}
    >
-      <div className={classes.toolbar}>
+      {isEditingAlt ? (
+        altTextPanel
+      ) : (
+        <div className={classes.toolbar}>
        <Tooltip position="top" label={t("Align left")} withinPortal={false}>
          <ActionIcon
            onClick={alignImageLeft}
@@ -188,6 +203,10 @@ export function ImageMenu({ editor }: EditorMenuProps) {

        <div className={classes.divider} />

+        {altTextButton}
+
+        <div className={classes.divider} />
+
        <Tooltip position="top" label={t("Download")} withinPortal={false}>
          <ActionIcon
            onClick={handleDownload}
@@ -220,7 +239,8 @@ export function ImageMenu({ editor }: EditorMenuProps) {
            <IconTrash size={18} />
          </ActionIcon>
        </Tooltip>
-      </div>
+        </div>
+      )}

      <input
        ref={fileInputRef}
@@ -9,7 +9,7 @@ import { useTranslation } from "react-i18next";
 export default function ImageView(props: NodeViewProps) {
  const { t } = useTranslation();
  const { editor, node, selected } = props;
-  const { src, width, align, title, aspectRatio, placeholder } = node.attrs;
+  const { src, width, align, alt, aspectRatio, placeholder } = node.attrs;
  const alignClass = useMemo(() => {
    if (align === "left") return "alignLeft";
    if (align === "right") return "alignRight";
@@ -42,7 +42,7 @@ export default function ImageView(props: NodeViewProps) {
        }}
      >
        {src && (
-          <Image radius="md" fit="contain" src={getFileUrl(src)} alt={title} />
+          <Image radius="md" fit="contain" src={getFileUrl(src)} alt={alt} />
        )}
        {!src && previewSrc && (
          <Group pos="relative" h="100%" w="100%">
@@ -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>
@@ -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}
@@ -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}
@@ -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) => (
@@ -18,6 +18,7 @@ import {
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { getFileUrl } from "@/lib/config.ts";
+import { useAltTextControl } from "@/features/editor/components/common/use-alt-text-control.tsx";
 import classes from "../common/toolbar-menu.module.css";

 export function VideoMenu({ editor }: EditorMenuProps) {
@@ -38,6 +39,7 @@ export function VideoMenu({ editor }: EditorMenuProps) {
        isAlignCenter: ctx.editor.isActive("video", { align: "center" }),
        isAlignRight: ctx.editor.isActive("video", { align: "right" }),
        src: videoAttrs?.src || null,
+        alt: videoAttrs?.alt || "",
      };
    },
  });
@@ -112,6 +114,16 @@ export function VideoMenu({ editor }: EditorMenuProps) {
    editor.commands.deleteSelection();
  }, [editor]);

+  const {
+    button: altTextButton,
+    panel: altTextPanel,
+    isEditing: isEditingAlt,
+  } = useAltTextControl({
+    editor,
+    nodeName: "video",
+    currentAlt: editorState?.alt || "",
+  });
+
  return (
    <BaseBubbleMenu
      editor={editor}
@@ -125,7 +137,10 @@ export function VideoMenu({ editor }: EditorMenuProps) {
      }}
      shouldShow={shouldShow}
    >
-      <div className={classes.toolbar}>
+      {isEditingAlt ? (
+        altTextPanel
+      ) : (
+        <div className={classes.toolbar}>
        <Tooltip position="top" label={t("Align left")} withinPortal={false}>
          <ActionIcon
            onClick={alignLeft}
@@ -164,6 +179,10 @@ export function VideoMenu({ editor }: EditorMenuProps) {

        <div className={classes.divider} />

+        {altTextButton}
+
+        <div className={classes.divider} />
+
        <Tooltip position="top" label={t("Download")} withinPortal={false}>
          <ActionIcon
            onClick={handleDownload}
@@ -185,7 +204,8 @@ export function VideoMenu({ editor }: EditorMenuProps) {
            <IconTrash size={18} />
          </ActionIcon>
        </Tooltip>
-      </div>
+        </div>
+      )}
    </BaseBubbleMenu>
  );
 }
@@ -9,7 +9,7 @@ import { useTranslation } from "react-i18next";
 export default function VideoView(props: NodeViewProps) {
  const { t } = useTranslation();
  const { editor, node, selected } = props;
-  const { src, width, align, aspectRatio, placeholder } = node.attrs;
+  const { src, width, align, alt, aspectRatio, placeholder } = node.attrs;
  const alignClass = useMemo(() => {
    if (align === "left") return "alignLeft";
    if (align === "right") return "alignRight";
@@ -47,7 +47,7 @@ export default function VideoView(props: NodeViewProps) {
            preload="metadata"
            controls
            src={getFileUrl(src)}
-            aria-label={placeholder?.name || t("Video")}
+            aria-label={alt || undefined}
          />
        )}
        {!src && previewSrc && (
@@ -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>
@@ -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,20 +233,15 @@ 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") {
              event.preventDefault();
              return true;
            }
-            if (event.key === "Tab") {
-                const editor = editorRef.current;
-                if (!editor) return false;
-                event.preventDefault();
-                return editor.view.someProp("handleKeyDown", (f) =>
-                  f(editor.view, event)
-                );
-            }
            if (platformModifierKey(event) && event.code === "KeyK") {
              searchSpotlight.open();
              return true;
@@ -399,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" }}>
@@ -429,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} />
            )}
@@ -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;

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

@@ -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>
@@ -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")}
            />

@@ -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>
    </>
  );
@@ -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} />
    </>
  );
 }
@@ -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>
@@ -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>
@@ -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,
@@ -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,
@@ -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>
@@ -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">
@@ -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} />
@@ -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">
@@ -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>
@@ -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">
@@ -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}>
@@ -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>
@@ -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();
@@ -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();
@@ -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>
          ))}
@@ -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 ? (
            <>
@@ -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>
@@ -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>
@@ -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({
@@ -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>
+    </>
  );
 }
@@ -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>
    </>
  );
 }
@@ -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>
@@ -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>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Philipinho	e02f0acc65	fix: add i18next_json type to crowdin	2026-05-20 17:34:34 +01:00
Philipinho	adb1f27767	v0.90.0	2026-05-20 16:55:23 +01:00
Philip Okugbe	92c0e36e46	fix(a11y): WCAG 2.1 AA fixes (#2219 )	2026-05-20 16:47:25 +01:00
Olivier Lambert	1c166c4736	feat(editor): add alt text support for images (#2097 ) * feat(editor): add alt text support for images * feat: extend alt text support to videos and diagrams --------- Co-authored-by: Philipinho <16838612+Philipinho@users.noreply.github.com>	2026-05-20 16:45:59 +01:00
Philip Okugbe	66a754c9eb	Revert "fix: prevent browser tab fallback in editor (#2123 )" (#2216 ) This reverts commit `1d2486455f`.	2026-05-19 14:07:07 +01:00