fix callout

.env.example

@@ -48,13 +48,6 @@ GOTENBERG_URL=
 
 DISABLE_TELEMETRY=false
 
-# Allow other sites to embed Docmost in an iframe.
-IFRAME_EMBED_ALLOWED=false
-
-# Only used when IFRAME_EMBED_ALLOWED=true. When empty, any origin is allowed.
-# Example: https://intranet.example.com,https://portal.example.com
-IFRAME_ALLOWED_ORIGINS=
-
 # Enable debug logging in production (default: false)
 DEBUG_MODE=false
 

apps/client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "client",
   "private": true,
-  "version": "0.90.0",
+  "version": "0.80.1",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

apps/client/public/locales/en-US/translation.json

@@ -277,9 +277,6 @@
   "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",
@@ -411,10 +408,6 @@
   "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",
@@ -880,12 +873,9 @@
   "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.",
@@ -895,8 +885,6 @@
   "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...",
@@ -948,35 +936,6 @@
   "Page actions": "Page actions",
   "Pick emoji": "Pick emoji",
   "Template menu": "Template menu",
-  "Use": "Use",
-  "Use template": "Use template",
-  "Preview template: {{title}}": "Preview template: {{title}}",
-  "Use a template": "Use a template",
-  "Search templates...": "Search templates...",
-  "Search spaces...": "Search spaces...",
-  "No templates found": "No templates found",
-  "No spaces found": "No spaces found",
-  "Browse all templates": "Browse all templates",
-  "This space": "This space",
-  "All templates": "All templates",
-  "Global": "Global",
-  "New template": "New template",
-  "Edit template": "Edit template",
-  "Are you sure you want to delete this template?": "Are you sure you want to delete this template?",
-  "Template scope updated": "Template scope updated",
-  "Choose which space this template belongs to": "Choose which space this template belongs to",
-  "Scope": "Scope",
-  "Select scope": "Select scope",
-  "Title": "Title",
-  "Saving...": "Saving...",
-  "Saved": "Saved",
-  "Save failed. Retry": "Save failed. Retry",
-  "By {{name}}": "By {{name}}",
-  "Updated {{time}}": "Updated {{time}}",
-  "Choose destination": "Choose destination",
-  "Search pages and spaces...": "Search pages and spaces...",
-  "No results found": "No results found",
-  "You don't have permission to create pages here": "You don't have permission to create pages here",
   "Chat menu": "Chat menu",
   "API key menu": "API key menu",
   "Jump to comment selection": "Jump to comment selection",
@@ -1059,30 +1018,5 @@
   "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}}"
 }

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

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

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

@@ -8,19 +8,15 @@ 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, label }: CopyProps) {
+export default function CopyTextButton({ text, size }: CopyProps) {
   const { t } = useTranslation();
 
-  const copyLabel = label ?? t("Copy");
-
   return (
     <CopyButton value={text} timeout={2000}>
       {({ copied, copy }) => (
         <Tooltip
-          label={copied ? t("Copied") : copyLabel}
+          label={copied ? t("Copied") : t("Copy")}
           withArrow
           position="right"
         >
@@ -29,7 +25,7 @@ export default function CopyTextButton({ text, size, label }: CopyProps) {
             variant="subtle"
             onClick={copy}
             size={size}
-            aria-label={copied ? t("Copied") : copyLabel}
+            aria-label={copied ? t("Copied") : t("Copy")}
           >
             {copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
           </ActionIcon>

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

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

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

@@ -17,7 +17,6 @@ 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;
@@ -42,10 +41,9 @@ export default function RecentChanges({ spaceId }: Props) {
         <Table highlightOnHover verticalSpacing="sm">
           <Table.Tbody>
             {pages.map((page) => (
-              <Table.Tr key={page.id} className={rowClasses.row}>
+              <Table.Tr key={page.id}>
                 <Table.Td>
                   <UnstyledButton
-                    className={rowClasses.link}
                     component={Link}
                     to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
                   >

apps/client/src/components/layouts/global/aside.tsx

@@ -1,28 +1,22 @@
-import { ActionIcon, Box, Group, ScrollArea, Title, Tooltip } from "@mantine/core";
+import { ActionIcon, Box, Group, ScrollArea, Text, 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, useEffect } from "react";
+import React, { ReactNode } 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, isAsideOpen }, setAsideState] = useAtom(asideStateAtom);
+  const [{ tab }, 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;
 
@@ -54,7 +48,7 @@ export default function Aside() {
         <>
           {tab !== "chat" && (
             <Group justify="space-between" wrap="nowrap" mb="md">
-              <Title order={2} size="h6" fw={500}>{t(title)}</Title>
+              <Text fw={500}>{t(title)}</Text>
               <Tooltip label={t("Close")} withArrow>
                 <ActionIcon
                   variant="subtle"

apps/client/src/components/layouts/global/global-app-shell.tsx

@@ -18,8 +18,6 @@ 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,
@@ -83,8 +81,6 @@ export default function GlobalAppShell({
   const showGlobalSidebar = !isSpaceRoute && !isSettingsRoute && !isAiRoute;
 
   return (
-    <>
-      <SkipToMain />
     <AppShell
       header={{ height: 45 }}
       navbar={{
@@ -129,7 +125,7 @@ export default function GlobalAppShell({
         {isAiRoute && <AiChatSidebar />}
         {showGlobalSidebar && <GlobalSidebar />}
       </AppShell.Navbar>
-      <AppShell.Main id={MAIN_CONTENT_ID} tabIndex={-1}>
+      <AppShell.Main id="main-content">
         {isSettingsRoute ? (
           <Container size={900} pb={80}>
             {children}
@@ -141,8 +137,6 @@ export default function GlobalAppShell({
 
       {isPageRoute && (
         <AppShell.Aside
-          id={ASIDE_PANEL_ID}
-          tabIndex={-1}
           className={classes.aside}
           p="md"
           withBorder={false}
@@ -162,6 +156,5 @@ export default function GlobalAppShell({
         </AppShell.Aside>
       )}
     </AppShell>
-    </>
   );
 }

apps/client/src/components/layouts/global/global-sidebar.module.css

@@ -31,11 +31,6 @@
         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 {
@@ -43,16 +38,6 @@
             color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
         }
     }
-
-    &[data-disabled] {
-        cursor: not-allowed;
-        opacity: 0.5;
-
-        @mixin hover {
-            background-color: transparent;
-            color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-        }
-    }
 }
 
 .linkIcon {
@@ -101,9 +86,4 @@
         );
         color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
     }
-
-    &:focus-visible {
-        outline: 2px solid var(--mantine-primary-color-filled);
-        outline-offset: 2px;
-    }
 }

apps/client/src/components/layouts/global/global-sidebar.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { ScrollArea, Text, Divider, Modal, UnstyledButton, Tooltip } from "@mantine/core";
+import { ScrollArea, Text, Divider, Modal, UnstyledButton } from "@mantine/core";
 import {
   IconHome,
   IconClock,
@@ -7,7 +7,6 @@ import {
   IconLayoutGrid,
   IconSettings,
   IconUserPlus,
-  IconTemplate,
 } from "@tabler/icons-react";
 import { Link, useLocation } from "react-router-dom";
 import classes from "./global-sidebar.module.css";
@@ -21,9 +20,12 @@ import { useDisclosure } from "@mantine/hooks";
 import { WorkspaceInviteForm } from "@/features/workspace/components/members/components/workspace-invite-form";
 import { CustomAvatar } from "@/components/ui/custom-avatar";
 import { AvatarIconType } from "@/features/attachments/types/attachment.types";
-import { useHasFeature } from "@/ee/hooks/use-feature";
+
-import { Feature } from "@/ee/features";
+const mainNavItems = [
-import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
+  { label: "Home", icon: IconHome, path: "/home" },
+  { label: "Favorites", icon: IconStar, path: "/favorites" },
+  { label: "Spaces", icon: IconLayoutGrid, path: "/spaces" },
+];
 
 export default function GlobalSidebar() {
   const { t } = useTranslation();
@@ -31,19 +33,6 @@ export default function GlobalSidebar() {
   const [active, setActive] = useState(location.pathname);
   const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
   const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
-  const hasTemplates = useHasFeature(Feature.TEMPLATES);
-  const upgradeLabel = useUpgradeLabel();
-  const mainNavItems = [
-    { label: "Home", icon: IconHome, path: "/home" },
-    { label: "Favorites", icon: IconStar, path: "/favorites" },
-    { label: "Spaces", icon: IconLayoutGrid, path: "/spaces" },
-    {
-      label: "Templates",
-      icon: IconTemplate,
-      path: "/templates",
-      disabled: !hasTemplates,
-    },
-  ];
   const { data: favoriteSpacesData, isPending: isFavoritesPending } = useFavoritesQuery("space");
   const favoriteSpaces = favoriteSpacesData?.pages.flatMap((p) => p.items) ?? [];
   const sortedFavoriteSpaces = [...favoriteSpaces]
@@ -69,38 +58,18 @@ export default function GlobalSidebar() {
     <div className={classes.navbar}>
       <ScrollArea w="100%" style={{ flex: 1 }}>
         <div className={classes.section}>
-          {mainNavItems.map((item) =>
+          {mainNavItems.map((item) => (
-            item.disabled ? (
-              <Tooltip
-                key={item.label}
-                label={upgradeLabel}
-                position="right"
-                withArrow
-              >
-                <UnstyledButton
-                  className={classes.link}
-                  data-disabled
-                  aria-disabled="true"
-                  tabIndex={-1}
-                >
-                  <item.icon className={classes.linkIcon} stroke={2} />
-                  <span>{t(item.label)}</span>
-                </UnstyledButton>
-              </Tooltip>
-            ) : (
             <Link
               key={item.label}
               className={classes.link}
               data-active={active === item.path || undefined}
-                aria-current={active === item.path ? "page" : undefined}
               to={item.path}
               onClick={handleNavClick}
             >
               <item.icon className={classes.linkIcon} stroke={2} />
               <span>{t(item.label)}</span>
             </Link>
-            ),
+          ))}
-          )}
         </div>
 
         <Divider my="xs" />
@@ -160,7 +129,6 @@ 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}
         >

apps/client/src/components/settings/settings-title.tsx

@@ -4,7 +4,7 @@ import { Divider, Title } from '@mantine/core';
 export default function SettingsTitle({ title }: { title: string }) {
   return (
     <>
-      <Title order={1} size="h3">
+      <Title order={3}>
         {title}
       </Title>
       <Divider my="md" />

apps/client/src/components/ui/clickable-table-row.module.css

@@ -1,29 +0,0 @@
-/*
- * 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);
-}

apps/client/src/components/ui/custom-avatar.tsx

@@ -16,18 +16,14 @@ interface CustomAvatarProps {
   mt?: string | number;
 }
 
-// `color.shade` pairs whose contrast meets WCAG AA (4.5:1) in BOTH variants:
+// `color.shade` pairs whose filled background meets WCAG AA (4.5:1) against
-//   - filled: white text on the shade as bg
+// white text. Avoids lime/yellow/green/orange — even their dark shades have
-//   - light:  shade as text on the color's light-bg (10% color.6 over white)
+// weak white-text contrast.
-// 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.9",
+  "grape.7",
-  "indigo.8",
+  "indigo.7",
   "pink.8",
   "red.8",
   "violet.7",

apps/client/src/components/ui/destination-picker/destination-picker-modal.tsx

@@ -16,8 +16,6 @@ export function DestinationPickerModal({
   loading,
   excludePageId,
   pageLimit,
-  initialSpaceId,
-  searchSpacesOnly,
 }: DestinationPickerModalProps) {
   const { t } = useTranslation();
   const [selection, setSelection] = useState<DestinationSelection | null>(null);
@@ -41,15 +39,13 @@ export function DestinationPickerModal({
       <Modal.Content>
         <Modal.Header py={0}>
           <Modal.Title fw={500}>{title}</Modal.Title>
-          <Modal.CloseButton aria-label={t("Close")} />
+          <Modal.CloseButton />
         </Modal.Header>
         <Modal.Body>
           <DestinationPicker
             onSelectionChange={setSelection}
             excludePageId={excludePageId}
             pageLimit={pageLimit}
-            initialSpaceId={initialSpaceId}
-            searchSpacesOnly={searchSpacesOnly}
           />
 
           <Group justify="flex-end" mt="md">

apps/client/src/components/ui/destination-picker/destination-picker.module.css

@@ -13,7 +13,6 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
     transition: background-color 150ms ease;
     user-select: none;
 
@@ -23,11 +22,6 @@
                 var(--mantine-color-dark-6)
         );
     }
-
-    &:focus-visible {
-        outline: 2px solid var(--mantine-primary-color-filled);
-        outline-offset: -2px;
-    }
 }
 
 .selected {
@@ -63,7 +57,7 @@
     border-radius: var(--mantine-radius-sm);
     flex-shrink: 0;
     transition: transform 150ms ease;
-    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+    color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
 
     @mixin hover {
         background-color: light-dark(
@@ -117,7 +111,7 @@
 }
 
 .spaceName {
-    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+    color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
     font-size: var(--mantine-font-size-xs);
     flex-shrink: 0;
 }

apps/client/src/components/ui/destination-picker/destination-picker.tsx

@@ -1,7 +1,7 @@
-import { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { useState, useCallback } from "react";
-import { ActionIcon, TextInput, ScrollArea, Loader } from "@mantine/core";
+import { TextInput, ScrollArea, Loader } from "@mantine/core";
 import { useDebouncedValue } from "@mantine/hooks";
-import { IconSearch, IconFileDescription } from "@tabler/icons-react";
+import { IconSearch, IconFile } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { useGetSpacesQuery } from "@/features/space/queries/space-query";
 import { useSearchSuggestionsQuery } from "@/features/search/queries/search-query";
@@ -15,29 +15,23 @@ type DestinationPickerProps = {
   onSelectionChange: (selection: DestinationSelection | null) => void;
   excludePageId?: string;
   pageLimit?: number;
-  initialSpaceId?: string;
-  searchSpacesOnly?: boolean;
 };
 
 export function DestinationPicker({
   onSelectionChange,
   excludePageId,
   pageLimit = 15,
-  initialSpaceId,
-  searchSpacesOnly,
 }: DestinationPickerProps) {
   const { t } = useTranslation();
   const [searchQuery, setSearchQuery] = useState("");
   const [selection, setSelection] = useState<DestinationSelection | null>(null);
   const [debouncedQuery] = useDebouncedValue(searchQuery, 300);
-  const viewportRef = useRef<HTMLDivElement>(null);
 
   const { data: spacesData, isLoading: spacesLoading } = useGetSpacesQuery({
     limit: 100,
   });
 
-  const searchEnabled =
+  const searchEnabled = debouncedQuery && debouncedQuery.length >= 2;
-    !searchSpacesOnly && debouncedQuery && debouncedQuery.length >= 2;
 
   const { data: searchData, isLoading: searchLoading } =
     useSearchSuggestionsQuery({
@@ -48,18 +42,6 @@ export function DestinationPicker({
 
   const isSearching = !!searchEnabled;
 
-  const filteredSpaces = useMemo(() => {
-    const items = spacesData?.items ?? [];
-    if (!searchSpacesOnly || !debouncedQuery) return items;
-    const fold = (s: string) =>
-      s
-        .normalize("NFD")
-        .replace(/[̀-ͯ]/g, "")
-        .toLocaleLowerCase();
-    const term = fold(debouncedQuery);
-    return items.filter((s) => fold(s.name).includes(term));
-  }, [spacesData, searchSpacesOnly, debouncedQuery]);
-
   const selectedId =
     selection?.type === "space" ? selection.spaceId : selection?.pageId ?? null;
 
@@ -105,48 +87,18 @@ export function DestinationPicker({
     [updateSelection],
   );
 
-  // Pre-select space when initialSpaceId is set and spaces have loaded.
-  // Only runs once: skip if user has already made a selection.
-  useEffect(() => {
-    if (!initialSpaceId || selection) return;
-    const match = spacesData?.items?.find((s) => s.id === initialSpaceId);
-    if (match) {
-      updateSelection({ type: "space", spaceId: match.id, space: match });
-      requestAnimationFrame(() => {
-        const el = viewportRef.current?.querySelector<HTMLElement>(
-          `[data-space-id="${match.id}"]`,
-        );
-        el?.scrollIntoView({ block: "nearest" });
-      });
-    }
-  }, [initialSpaceId, selection, spacesData, updateSelection]);
-
   return (
     <>
       <TextInput
         leftSection={<IconSearch size={16} />}
-        placeholder={
+        placeholder={t("Search pages and spaces...")}
-          searchSpacesOnly
-            ? t("Search spaces...")
-            : t("Search pages and spaces...")
-        }
-        aria-label={
-          searchSpacesOnly
-            ? t("Search spaces...")
-            : t("Search pages and spaces...")
-        }
         variant="filled"
         value={searchQuery}
         onChange={(e) => setSearchQuery(e.currentTarget.value)}
         className={classes.searchInput}
       />
 
-      <ScrollArea
+      <ScrollArea h="50vh" offsetScrollbars className={classes.scrollArea}>
-        h="50vh"
-        offsetScrollbars
-        className={classes.scrollArea}
-        viewportRef={viewportRef}
-      >
         {isSearching ? (
           searchLoading ? (
             <div className={classes.emptyState}>
@@ -159,28 +111,16 @@ export function DestinationPicker({
                   <div
                     key={page.id}
                     className={classes.searchResult}
-                    role="button"
-                    tabIndex={0}
                     onClick={() => handleSearchResultClick(page)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        handleSearchResultClick(page);
-                      }
-                    }}
                   >
                     <div className={classes.iconWrapper}>
                       {page.icon ? (
                         page.icon
                       ) : (
-                        <ActionIcon
+                        <IconFile
-                          component="div"
+                          size={16}
-                          variant="transparent"
+                          color="var(--mantine-color-gray-5)"
-                          c="gray"
+                        />
-                          size={22}
-                        >
-                          <IconFileDescription size={18} />
-                        </ActionIcon>
                       )}
                     </div>
                     <div className={classes.pageTitle}>
@@ -201,14 +141,8 @@ export function DestinationPicker({
           <div className={classes.emptyState}>
             <Loader size="xs" />
           </div>
-        ) : filteredSpaces.length === 0 ? (
-          <div className={classes.emptyState}>
-            {searchSpacesOnly && debouncedQuery
-              ? t("No spaces found")
-              : t("No results found")}
-          </div>
         ) : (
-          filteredSpaces.map((space) => (
+          spacesData?.items?.map((space) => (
             <SpaceRow
               key={space.id}
               space={space}

apps/client/src/components/ui/destination-picker/destination-picker.types.ts

@@ -20,6 +20,4 @@ export type DestinationPickerModalProps = {
   loading?: boolean;
   excludePageId?: string;
   pageLimit?: number;
-  initialSpaceId?: string;
-  searchSpacesOnly?: boolean;
 };

apps/client/src/components/ui/destination-picker/page-row.tsx

@@ -1,6 +1,5 @@
-import { KeyboardEvent, useState } from "react";
+import { useState } from "react";
-import { ActionIcon } from "@mantine/core";
+import { IconChevronRight, IconFile } from "@tabler/icons-react";
-import { IconChevronRight, IconFileDescription } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { IPage } from "@/features/page/types/page.types";
 import { PageChildren } from "./page-children";
@@ -37,44 +36,23 @@ export function PageRow({
     .filter(Boolean)
     .join(" ");
 
-  const handleSelect = () => {
-    if (!isExcluded) onSelect(page);
-  };
-
-  const handleRowKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    if (e.target !== e.currentTarget) return;
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      handleSelect();
-    }
-  };
-
   return (
     <>
       <div
         className={rowClasses}
         style={{ paddingLeft: depth * 20 + 12 }}
-        role="button"
+        onClick={() => !isExcluded && onSelect(page)}
-        tabIndex={isExcluded ? -1 : 0}
-        aria-disabled={isExcluded || undefined}
-        onClick={handleSelect}
-        onKeyDown={handleRowKeyDown}
       >
         {page.hasChildren ? (
-          <ActionIcon
+          <div
             className={`${classes.chevron} ${expanded ? classes.chevronExpanded : ""}`}
-            variant="subtle"
-            color="gray"
-            size="sm"
-            aria-label={expanded ? t("Collapse") : t("Expand")}
-            aria-expanded={expanded}
             onClick={(e) => {
               e.stopPropagation();
               setExpanded(!expanded);
             }}
           >
             <IconChevronRight size={14} />
-          </ActionIcon>
+          </div>
         ) : (
           <div style={{ width: 20, flexShrink: 0 }} />
         )}
@@ -83,14 +61,10 @@ export function PageRow({
           {page.icon ? (
             page.icon
           ) : (
-            <ActionIcon
+            <IconFile
-              component="div"
+              size={16}
-              variant="transparent"
+              color="var(--mantine-color-gray-5)"
-              c="gray"
+            />
-              size={22}
-            >
-              <IconFileDescription size={18} />
-            </ActionIcon>
           )}
         </div>
 

apps/client/src/components/ui/destination-picker/space-row.tsx

@@ -1,5 +1,5 @@
-import { KeyboardEvent, useState } from "react";
+import { useState } from "react";
-import { ActionIcon, Tooltip } from "@mantine/core";
+import { Tooltip } from "@mantine/core";
 import { IconChevronRight, IconLock } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { ISpace } from "@/features/space/types/space.types";
@@ -42,43 +42,21 @@ export function SpaceRow({
     .filter(Boolean)
     .join(" ");
 
-  const handleSelect = () => {
-    if (writable) onSelectSpace(space);
-  };
-
-  const handleRowKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    if (e.target !== e.currentTarget) return;
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      handleSelect();
-    }
-  };
-
   const rowContent = (
     <div
       className={rowClasses}
-      data-space-id={space.id}
+      onClick={() => writable && onSelectSpace(space)}
-      role="button"
-      tabIndex={writable ? 0 : -1}
-      aria-disabled={!writable || undefined}
-      onClick={handleSelect}
-      onKeyDown={handleRowKeyDown}
     >
       {writable ? (
-        <ActionIcon
+        <div
           className={`${classes.chevron} ${expanded ? classes.chevronExpanded : ""}`}
-          variant="subtle"
-          color="gray"
-          size="sm"
-          aria-label={expanded ? t("Collapse") : t("Expand")}
-          aria-expanded={expanded}
           onClick={(e) => {
             e.stopPropagation();
             setExpanded(!expanded);
           }}
         >
           <IconChevronRight size={14} />
-        </ActionIcon>
+        </div>
       ) : (
         <div style={{ width: 20, flexShrink: 0 }} />
       )}

apps/client/src/components/ui/sidebar-toggle-button.tsx

@@ -14,14 +14,7 @@ export interface SidebarToggleProps extends BoxProps, ElementProps<"button"> {
 const SidebarToggle = React.forwardRef<HTMLButtonElement, SidebarToggleProps>(
   ({ opened, size = "sm", ...others }, ref) => {
     return (
-      <ActionIcon
+      <ActionIcon size={size} {...others} variant="subtle" color="gray" ref={ref}>
-        size={size}
-        aria-expanded={opened}
-        {...others}
-        variant="subtle"
-        color="gray"
-        ref={ref}
-      >
         {opened ? (
           <IconLayoutSidebarRightExpand />
         ) : (

apps/client/src/components/ui/skip-to-main.module.css

@@ -1,27 +0,0 @@
-.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;
-  }
-}

apps/client/src/components/ui/skip-to-main.tsx

@@ -1,13 +0,0 @@
-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>
-  );
-}

apps/client/src/ee/ai-chat/components/ai-chat-sidebar.tsx

@@ -120,7 +120,7 @@ export default function AiChatSidebar() {
   return (
     <div className={classes.sidebar}>
       <div className={classes.header}>
-        <h2 className={classes.title}>{t("AI Chat")}</h2>
+        <span className={classes.title}>{t("AI Chat")}</span>
         <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}>
-                <h3 className={classes.chatGroupLabel}>{group.label}</h3>
+                <div className={classes.chatGroupLabel}>{group.label}</div>
                 {group.chats.map((chat) => (
                   <AiChatSidebarItem
                     key={chat.id}

apps/client/src/ee/ai-chat/components/chat-empty-state.tsx

@@ -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>
-      <h1 className={classes.emptyStateTitle}>
+      <div className={classes.emptyStateTitle}>
         {t("What can I help you with?")}
-      </h1>
+      </div>
 
       <div className={classes.emptyStateInput}>
         <ChatInput
@@ -71,7 +71,7 @@ export default function ChatEmptyState({ isStreaming, onSend, onStop }: Props) {
       </div>
 
       <div className={classes.suggestionsSection}>
-        <h2 className={classes.suggestionsLabel}>{t("Get started")}</h2>
+        <div className={classes.suggestionsLabel}>Get started</div>
         <div className={classes.suggestionsGrid}>
           {SUGGESTIONS.map((s) => (
             <button

apps/client/src/ee/ai-chat/components/chat-input.tsx

@@ -226,7 +226,6 @@ export default function ChatInput({
     ],
     editorProps: {
       attributes: {
-        role: "textbox",
         "aria-label": placeholder || t("Ask anything... Use @ to mention pages"),
         "aria-multiline": "true",
       },
@@ -336,15 +335,7 @@ export default function ChatInput({
 
       <EditorContent editor={editor} className={classes.editorContent} />
       <div className={classes.actions}>
-        <Popover
+        <Popover opened={plusMenuOpen} onChange={setPlusMenuOpen} position="top-start" width={220} shadow="md">
-          opened={plusMenuOpen}
-          onChange={setPlusMenuOpen}
-          position="top-start"
-          width={220}
-          shadow="md"
-          trapFocus
-          returnFocus
-        >
           <Popover.Target>
             <button
               type="button"

apps/client/src/ee/ai-chat/components/chat-message-list.tsx

@@ -2,7 +2,6 @@ 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";
@@ -34,7 +33,6 @@ export default function ChatMessageList({
   streamingContent,
   streamingToolCalls,
 }: Props) {
-  const { t } = useTranslation();
   const containerRef = useRef<HTMLDivElement>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
   const isAtBottomRef = useRef(true);
@@ -42,38 +40,6 @@ 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;
@@ -161,18 +127,7 @@ export default function ChatMessageList({
 
   return (
     <div className={classes.messageListWrapper}>
-      {/* Single status region for chat announcements. Kept outside the
+      <div ref={containerRef} className={classes.messageList}>
-          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}
@@ -207,7 +162,7 @@ export default function ChatMessageList({
       {showScrollButton && (
         <button
           type="button"
-          aria-label={t("Scroll to bottom")}
+          aria-label="Scroll to bottom"
           className={classes.scrollToBottomButton}
           onClick={() => scrollToBottom("smooth")}
         >

apps/client/src/ee/ai-chat/components/chat-message.tsx

@@ -1,6 +1,5 @@
 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 {
@@ -44,7 +43,6 @@ export default function ChatMessage({
   streamingToolCalls,
 }: Props) {
   const navigate = useNavigate();
-  const { t } = useTranslation();
 
   const handleContentClick = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
@@ -80,11 +78,7 @@ export default function ChatMessage({
       }[]) || [];
 
     return (
-      <div
+      <div className={classes.userMessage}>
-        className={classes.userMessage}
-        role="article"
-        aria-label={t("You said:")}
-      >
         <div className={classes.userBubble}>
           {attachments.length > 0 && (
             <div className={classes.messageAttachments}>
@@ -106,16 +100,8 @@ 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
+    <div className={classes.assistantMessage}>
-      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} />
@@ -145,10 +131,7 @@ export default function ChatMessage({
       </div>
       {!isStreaming && message.content && (
         <div className={classes.messageActions}>
-          <CopyTextButton
+          <CopyTextButton text={message?.content} />
-            text={message?.content}
-            label={t("Copy assistant response")}
-          />
         </div>
       )}
     </div>

apps/client/src/ee/ai-chat/styles/ai-chat.module.css

@@ -106,7 +106,6 @@
   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;
 }
@@ -129,7 +128,6 @@
   color: var(--mantine-color-dimmed);
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  margin-top: 0;
   margin-bottom: var(--mantine-spacing-sm);
 }
 

apps/client/src/ee/ai-chat/styles/chat-input.module.css

@@ -114,7 +114,7 @@
   }
 
   :global(.ProseMirror p.is-editor-empty:first-child::before) {
-    color: var(--mantine-color-placeholder);
+    color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
     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-6), var(--mantine-color-dark-3));
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
   transition: color 150ms, background-color 150ms;
 
   @mixin hover {

apps/client/src/ee/ai-chat/styles/chat-sidebar.module.css

@@ -15,7 +15,6 @@
 }
 
 .title {
-  margin: 0;
   font-weight: 600;
   font-size: var(--mantine-font-size-sm);
 }
@@ -34,7 +33,6 @@
 }
 
 .chatGroupLabel {
-  margin: 0;
   padding: 4px var(--mantine-spacing-xs);
   font-size: var(--mantine-font-size-xs);
   font-weight: 600;
@@ -120,8 +118,7 @@
   color: inherit;
 }
 
-.chatItem:hover .chatItemDate,
+.chatItem:hover .chatItemDate {
-.chatItem:focus-within .chatItemDate {
   opacity: 0;
 }
 
@@ -136,12 +133,6 @@
   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;
-}

apps/client/src/ee/api-key/components/api-key-created-modal.tsx

@@ -33,7 +33,6 @@ export function ApiKeyCreatedModal({
       onClose={onClose}
       title={t("{{credential}} created", { credential: t("API key") })}
       size="lg"
-      closeButtonProps={{ "aria-label": t("Close") }}
     >
       <Stack gap="md">
         <Alert

apps/client/src/ee/api-key/components/create-api-key-modal.tsx

@@ -107,7 +107,6 @@ 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">

apps/client/src/ee/api-key/components/revoke-api-key-modal.tsx

@@ -32,7 +32,6 @@ export function RevokeApiKeyModal({
       onClose={onClose}
       title={t("Revoke {{credential}}", { credential: t("API key") })}
       size="md"
-      closeButtonProps={{ "aria-label": t("Close") }}
     >
       <Stack gap="md">
         <Text>

apps/client/src/ee/api-key/components/update-api-key-modal.tsx

@@ -55,7 +55,6 @@ 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">

apps/client/src/ee/components/ldap-login-modal.tsx

@@ -111,11 +111,6 @@ 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")}
           />
 

apps/client/src/ee/mfa/components/mfa-backup-codes-modal.tsx

@@ -130,11 +130,6 @@ 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

apps/client/src/ee/mfa/components/mfa-disable-modal.tsx

@@ -107,11 +107,6 @@ 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

apps/client/src/ee/page-permission/components/page-share-modal.tsx

@@ -79,13 +79,7 @@ export function PageShareModal({ readOnly }: PageShareModalProps) {
         {t("Share")}
       </Button>
 
-      <Modal
+      <Modal opened={opened} onClose={close} title={t("Share")} size={600}>
-        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>

apps/client/src/ee/page-verification/components/page-verification-modal.tsx

@@ -4,8 +4,8 @@ import {
   Menu,
   Modal,
   Text,
+  ThemeIcon,
   Tooltip,
-  UnstyledButton,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import {
@@ -100,20 +100,15 @@ 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={lockedLabel} withArrow openDelay={250}>
+      <Tooltip
-        <ActionIcon
+        label={`${t("Add verification")} — ${upgradeLabel}`}
-          variant="subtle"
+        withArrow
-          color="gray"
+        openDelay={250}
-          aria-label={lockedLabel}
       >
+        <ThemeIcon variant="subtle" color="gray">
           <IconShieldCheck size={20} stroke={1.5} />
-        </ActionIcon>
+        </ThemeIcon>
       </Tooltip>
     );
   }
@@ -137,25 +132,20 @@ export function PageVerificationBadge({
     <>
       {status !== "none" ? (
         <Tooltip label={tooltipLabel} withArrow openDelay={250}>
-          <UnstyledButton
+          <Group
+            gap={4}
             onClick={open}
-            aria-label={tooltipLabel}
+            style={{ cursor: "pointer" }}
-            style={{
+            wrap="nowrap"
-              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>
-          </UnstyledButton>
+          </Group>
         </Tooltip>
       ) : !readOnly ? (
         <Tooltip label={t("Set up verification")} withArrow openDelay={250}>

apps/client/src/ee/page-verification/components/verification-list-table.tsx

@@ -18,7 +18,6 @@ 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;
 
@@ -125,13 +124,12 @@ export default function VerificationListTable({
               );
 
               return (
-                <Table.Tr key={item.id} className={rowClasses.row}>
+                <Table.Tr key={item.id}>
                   <Table.Td>
                     <Anchor
                       size="sm"
                       underline="never"
                       style={{ color: "var(--mantine-color-text)" }}
-                      className={rowClasses.link}
                       component={Link}
                       to={pageUrl}
                     >

apps/client/src/ee/scim/components/create-scim-token-modal.tsx

@@ -52,7 +52,6 @@ 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">

apps/client/src/ee/scim/components/revoke-scim-token-modal.tsx

@@ -29,7 +29,6 @@ export function RevokeScimTokenModal({
       onClose={onClose}
       title={t("Revoke {{credential}}", { credential: t("SCIM token") })}
       size="md"
-      closeButtonProps={{ "aria-label": t("Close") }}
     >
       <Stack gap="md">
         <Text>

apps/client/src/ee/scim/components/scim-token-created-modal.tsx

@@ -32,7 +32,6 @@ export function ScimTokenCreatedModal({
       onClose={onClose}
       title={t("{{credential}} created", { credential: t("SCIM token") })}
       size="lg"
-      closeButtonProps={{ "aria-label": t("Close") }}
     >
       <Stack gap="md">
         <Alert

apps/client/src/ee/scim/components/scim-token-table.tsx

@@ -93,11 +93,7 @@ export function ScimTokenTable({
                 <Table.Td>
                   <Menu position="bottom-end" withinPortal>
                     <Menu.Target>
-                      <ActionIcon
+                      <ActionIcon variant="subtle" color="gray">
-                        variant="subtle"
-                        color="gray"
-                        aria-label={t("Token actions")}
-                      >
                         <IconDots size={16} />
                       </ActionIcon>
                     </Menu.Target>

apps/client/src/ee/scim/components/update-scim-token-modal.tsx

@@ -52,7 +52,6 @@ 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">

apps/client/src/ee/security/components/allow-member-templates.tsx

@@ -34,7 +34,7 @@ function AllowMemberTemplatesToggle() {
   const [checked, setChecked] = useState(
     workspace?.settings?.templates?.allowMemberTemplates === true,
   );
-  const hasTemplates = useHasFeature(Feature.TEMPLATES);
+  const hasSecuritySettings = useHasFeature(Feature.SECURITY_SETTINGS);
   const upgradeLabel = useUpgradeLabel();
 
   const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -54,11 +54,15 @@ function AllowMemberTemplatesToggle() {
   };
 
   return (
-    <Tooltip label={upgradeLabel} disabled={hasTemplates} refProp="rootRef">
+    <Tooltip
+      label={upgradeLabel}
+      disabled={hasSecuritySettings}
+      refProp="rootRef"
+    >
       <Switch
         checked={checked}
         onChange={handleChange}
-        disabled={!hasTemplates}
+        disabled={!hasSecuritySettings}
         aria-label={t("Toggle allow members to create templates")}
       />
     </Tooltip>

apps/client/src/ee/security/components/sso-provider-modal.tsx

@@ -32,7 +32,6 @@ 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} />

apps/client/src/ee/security/pages/security.tsx

@@ -137,6 +137,7 @@ export default function Security() {
                     { max: SCIM_TOKEN_LIMIT },
                   )}
                   disabled={(scimData?.items.length ?? 0) < SCIM_TOKEN_LIMIT}
+                  refProp="rootRef"
                 >
                   <Button
                     onClick={() => setCreateOpen(true)}

apps/client/src/ee/template/components/template-card.module.css

@@ -8,11 +8,6 @@
     @mixin hover {
         transform: scale(1.02);
     }
-
-    &:focus-visible {
-        outline: 2px solid var(--mantine-primary-color-filled);
-        outline-offset: 2px;
-    }
 }
 
 .cardBody {
@@ -55,27 +50,18 @@
 .footer {
     display: flex;
     align-items: center;
-    gap: 6px;
+    justify-content: space-between;
+    gap: var(--mantine-spacing-xs);
     padding-top: var(--mantine-spacing-sm);
     margin-top: var(--mantine-spacing-lg);
     border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
 }
 
-.scopeDot {
-    display: inline-block;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    flex-shrink: 0;
-    background-color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
-}
-
 .menuTarget {
     opacity: 0;
     transition: opacity 100ms ease;
 
-    .card:hover &,
+    .card:hover & {
-    .card:focus-within & {
         opacity: 1;
     }
 }

apps/client/src/ee/template/components/template-card.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, Text, ActionIcon, Menu, Group } from "@mantine/core";
+import { Card, Text, ActionIcon, Menu, Group } from "@mantine/core";
 import {
   IconDots,
   IconEdit,
@@ -12,7 +12,6 @@ import classes from "./template-card.module.css";
 type TemplateCardProps = {
   template: ITemplate;
   spaceName?: string;
-  onPreview: (template: ITemplate) => void;
   onUse: (template: ITemplate) => void;
   onEdit?: (template: ITemplate) => void;
   onDelete?: (template: ITemplate) => void;
@@ -22,7 +21,6 @@ type TemplateCardProps = {
 export default function TemplateCard({
   template,
   spaceName,
-  onPreview,
   onUse,
   onEdit,
   onDelete,
@@ -36,17 +34,7 @@ export default function TemplateCard({
       padding="lg"
       className={classes.card}
       style={{ cursor: "pointer" }}
-      role="button"
+      onClick={() => onUse(template)}
-      tabIndex={0}
-      aria-label={t("Preview template: {{title}}", { title: template.title })}
-      onClick={() => onPreview(template)}
-      onKeyDown={(e) => {
-        if (e.target !== e.currentTarget) return;
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onPreview(template);
-        }
-      }}
     >
       <div className={classes.cardBody}>
         <Group justify="space-between" align="flex-start" wrap="nowrap" mb="md">
@@ -59,17 +47,6 @@ export default function TemplateCard({
           )}
 
           <Group gap={6} wrap="nowrap">
-            <Button
-              size="compact-xs"
-              variant="filled"
-              className={classes.menuTarget}
-              onClick={(e) => {
-                e.stopPropagation();
-                onUse(template);
-              }}
-            >
-              {t("Use")}
-            </Button>
             {canManage && (
               <Menu width={150} shadow="md" withArrow>
                 <Menu.Target>
@@ -114,7 +91,6 @@ export default function TemplateCard({
         <div className={classes.title}>{template.title}</div>
 
         <div className={classes.footer}>
-          <span className={classes.scopeDot} aria-hidden="true" />
           <Text size="sm" fw={500} c="dimmed">
             {template.spaceId ? (spaceName || t("Space")) : t("Global")}
           </Text>

apps/client/src/ee/template/components/template-picker-modal.module.css

@@ -1,70 +0,0 @@
-.row {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: var(--mantine-spacing-sm);
-    padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
-    border-radius: var(--mantine-radius-sm);
-    width: 100%;
-
-    @mixin hover {
-        background-color: light-dark(
-                var(--mantine-color-gray-1),
-                var(--mantine-color-dark-6)
-        );
-    }
-}
-
-.icon {
-    width: 22px;
-    height: 22px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    font-size: 16px;
-    line-height: 1;
-}
-
-.title {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: var(--mantine-font-size-sm);
-    text-align: left;
-}
-
-.scope {
-    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
-    font-size: var(--mantine-font-size-xs);
-    flex-shrink: 0;
-    transition: opacity 100ms ease;
-
-    .row:hover &,
-    .row:focus-within & {
-        opacity: 0;
-    }
-}
-
-.useButton {
-    position: absolute;
-    top: 50%;
-    right: var(--mantine-spacing-sm);
-    transform: translateY(-50%);
-    opacity: 0;
-    transition: opacity 100ms ease;
-
-    .row:hover &,
-    .row:focus-within &,
-    &:focus-visible {
-        opacity: 1;
-    }
-}
-
-.empty {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--mantine-spacing-xl);
-}

apps/client/src/ee/template/components/template-picker-modal.tsx

@@ -1,259 +0,0 @@
-import { useMemo, useState } from "react";
-import {
-  Button,
-  Modal,
-  TextInput,
-  ScrollArea,
-  Loader,
-  Text,
-  UnstyledButton,
-  Group,
-  SegmentedControl,
-} from "@mantine/core";
-import { useDebouncedValue } from "@mantine/hooks";
-import {
-  IconArrowRight,
-  IconSearch,
-  IconFileText,
-} from "@tabler/icons-react";
-import { Link, useNavigate } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import {
-  useGetTemplatesQuery,
-  useUseTemplateMutation,
-} from "@/ee/template/queries/template-query";
-import { useGetSpacesQuery } from "@/features/space/queries/space-query";
-import { ITemplate } from "@/ee/template/types/template.types";
-import UseTemplateModal from "@/ee/template/components/use-template-modal";
-import TemplatePreviewModal from "@/ee/template/components/template-preview-modal";
-import { buildPageUrl } from "@/features/page/page.utils";
-import classes from "./template-picker-modal.module.css";
-
-type TemplatePickerModalProps = {
-  opened: boolean;
-  onClose: () => void;
-  /** Pre-select this space in the destination picker after a template is chosen. */
-  initialSpaceId?: string;
-};
-
-type ScopeFilter = "current" | "all";
-
-export default function TemplatePickerModal({
-  opened,
-  onClose,
-  initialSpaceId,
-}: TemplatePickerModalProps) {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const useTemplateMutation = useUseTemplateMutation();
-  const [query, setQuery] = useState("");
-  const [debouncedQuery] = useDebouncedValue(query, 200);
-  const [scope, setScope] = useState<ScopeFilter>(
-    initialSpaceId ? "current" : "all",
-  );
-  // Two-stage selection: previewing first, then destination-picker.
-  // `previewTemplate` is set when the user clicks a row in the picker.
-  // `destinationTemplate` is set when they click "Use template" in the preview.
-  const [previewTemplate, setPreviewTemplate] = useState<ITemplate | null>(
-    null,
-  );
-  const [destinationTemplate, setDestinationTemplate] =
-    useState<ITemplate | null>(null);
-
-  const { data, isPending } = useGetTemplatesQuery({
-    spaceId: scope === "current" ? initialSpaceId : undefined,
-  });
-  const { data: spacesData } = useGetSpacesQuery({ limit: 100 });
-
-  const spaceNamesById = useMemo(() => {
-    const map = new Map<string, string>();
-    spacesData?.items?.forEach((s) => map.set(s.id, s.name));
-    return map;
-  }, [spacesData]);
-
-  const filtered = useMemo(() => {
-    const all = data?.pages.flatMap((p) => p.items) ?? [];
-    const term = debouncedQuery.trim().toLowerCase();
-    if (!term) return all;
-    return all.filter((tpl) => tpl.title.toLowerCase().includes(term));
-  }, [data, debouncedQuery]);
-
-  const createInInitialSpace = async (tpl: ITemplate) => {
-    if (!initialSpaceId) return;
-    try {
-      const page = await useTemplateMutation.mutateAsync({
-        templateId: tpl.id,
-        spaceId: initialSpaceId,
-      });
-      setPreviewTemplate(null);
-      onClose();
-      const space = spacesData?.items?.find((s) => s.id === initialSpaceId);
-      if (page?.slugId && space?.slug) {
-        navigate(buildPageUrl(space.slug, page.slugId, page.title));
-      }
-    } catch {
-      // error notification handled by mutation's onError
-    }
-  };
-
-  const handlePick = (tpl: ITemplate) => {
-    setPreviewTemplate(tpl);
-  };
-
-  const handleQuickUse = (tpl: ITemplate) => {
-    if (initialSpaceId) {
-      createInInitialSpace(tpl);
-      return;
-    }
-    setDestinationTemplate(tpl);
-  };
-
-  const handlePreviewClose = () => {
-    // Closing preview returns to the picker list (no full unmount).
-    setPreviewTemplate(null);
-  };
-
-  const handlePreviewUse = () => {
-    if (initialSpaceId && previewTemplate) {
-      createInInitialSpace(previewTemplate);
-      return;
-    }
-    // Move from preview into destination-picker stage.
-    setDestinationTemplate(previewTemplate);
-    setPreviewTemplate(null);
-  };
-
-  const handleDestinationClose = () => {
-    setDestinationTemplate(null);
-    onClose();
-  };
-
-  const handleClose = () => {
-    setQuery("");
-    setScope(initialSpaceId ? "current" : "all");
-    setPreviewTemplate(null);
-    setDestinationTemplate(null);
-    onClose();
-  };
-
-  return (
-    <>
-      <Modal
-        opened={opened && !previewTemplate && !destinationTemplate}
-        onClose={handleClose}
-        size={550}
-        padding="lg"
-        yOffset="10vh"
-        title={<Text fw={500}>{t("Use a template")}</Text>}
-      >
-        <TextInput
-          leftSection={<IconSearch size={16} />}
-          placeholder={t("Search templates...")}
-          variant="filled"
-          value={query}
-          onChange={(e) => setQuery(e.currentTarget.value)}
-          mb="xs"
-          autoFocus
-        />
-
-        {initialSpaceId && (
-          <SegmentedControl
-            fullWidth
-            size="xs"
-            mb="sm"
-            value={scope}
-            onChange={(v) => setScope(v as ScopeFilter)}
-            data={[
-              { label: t("This space"), value: "current" },
-              { label: t("All templates"), value: "all" },
-            ]}
-          />
-        )}
-
-        <ScrollArea h="50vh" offsetScrollbars>
-          {isPending ? (
-            <div className={classes.empty}>
-              <Loader size="xs" />
-            </div>
-          ) : filtered.length === 0 ? (
-            <div className={classes.empty}>
-              <Text size="sm" c="dimmed">
-                {t("No templates found")}
-              </Text>
-            </div>
-          ) : (
-            filtered.map((tpl) => (
-              <UnstyledButton
-                key={tpl.id}
-                className={classes.row}
-                onClick={() => handlePick(tpl)}
-              >
-                <div className={classes.icon}>
-                  {tpl.icon ? (
-                    <span>{tpl.icon}</span>
-                  ) : (
-                    <IconFileText
-                      size={16}
-                      color="var(--mantine-color-gray-6)"
-                    />
-                  )}
-                </div>
-                <div className={classes.title}>{tpl.title}</div>
-                <div className={classes.scope}>
-                  {tpl.spaceId
-                    ? spaceNamesById.get(tpl.spaceId) ?? t("Space")
-                    : t("Global")}
-                </div>
-                <Button
-                  size="compact-xs"
-                  variant="filled"
-                  className={classes.useButton}
-                  loading={useTemplateMutation.isPending}
-                  disabled={useTemplateMutation.isPending}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleQuickUse(tpl);
-                  }}
-                >
-                  {t("Use")}
-                </Button>
-              </UnstyledButton>
-            ))
-          )}
-        </ScrollArea>
-
-        <Group justify="flex-end" mt="md">
-          <Button
-            component={Link}
-            to="/templates"
-            variant="subtle"
-            size="sm"
-            rightSection={<IconArrowRight size={16} />}
-            onClick={handleClose}
-          >
-            {t("Browse all templates")}
-          </Button>
-        </Group>
-      </Modal>
-
-      {previewTemplate && (
-        <TemplatePreviewModal
-          templateId={previewTemplate.id}
-          opened={true}
-          onClose={handlePreviewClose}
-          onUse={handlePreviewUse}
-          useLoading={useTemplateMutation.isPending}
-        />
-      )}
-
-      {destinationTemplate && (
-        <UseTemplateModal
-          template={destinationTemplate}
-          opened={true}
-          onClose={handleDestinationClose}
-          initialSpaceId={initialSpaceId}
-        />
-      )}
-    </>
-  );
-}

apps/client/src/ee/template/components/template-preview-modal.tsx

@@ -9,7 +9,6 @@ type TemplatePreviewModalProps = {
   onClose: () => void;
   onUse: () => void;
   onEdit?: () => void;
-  useLoading?: boolean;
 };
 
 export default function TemplatePreviewModal({
@@ -18,7 +17,6 @@ export default function TemplatePreviewModal({
   onClose,
   onUse,
   onEdit,
-  useLoading,
 }: TemplatePreviewModalProps) {
   const { t } = useTranslation();
   const { data: template, isLoading } = useGetTemplateByIdQuery(templateId);
@@ -39,20 +37,15 @@ export default function TemplatePreviewModal({
             </Group>
           </Modal.Title>
           <Group gap="sm">
-            <Button
-              size="xs"
-              onClick={onUse}
-              loading={useLoading}
-              disabled={useLoading}
-            >
-              {t("Use template")}
-            </Button>
             {onEdit && (
               <Button size="xs" variant="default" onClick={onEdit}>
                 {t("Edit")}
               </Button>
             )}
-            <Modal.CloseButton aria-label={t("Close")} />
+            <Button size="xs" onClick={onUse}>
+              {t("Use template")}
+            </Button>
+            <Modal.CloseButton />
           </Group>
         </Modal.Header>
         <Modal.Body p={0}>

apps/client/src/ee/template/components/use-template-modal.tsx

@@ -10,14 +10,12 @@ type UseTemplateModalProps = {
   template: ITemplate;
   opened: boolean;
   onClose: () => void;
-  initialSpaceId?: string;
 };
 
 export default function UseTemplateModal({
   template,
   opened,
   onClose,
-  initialSpaceId,
 }: UseTemplateModalProps) {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -56,8 +54,6 @@ export default function UseTemplateModal({
       actionLabel={t("Create page")}
       onSelect={handleSelect}
       loading={useTemplateMutation.isPending}
-      initialSpaceId={initialSpaceId ?? template.spaceId}
-      searchSpacesOnly
     />
   );
 }

apps/client/src/ee/template/pages/template-editor.tsx

@@ -75,18 +75,6 @@ export default function TemplateEditor() {
   const editor = useEditor({
     extensions: templateExtensions,
     content: "",
-    editorProps: {
-      handleDOMEvents: {
-        keydown: (_view, event) => {
-          if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
-            const slashCommand = document.querySelector("#slash-command");
-            if (slashCommand) {
-              return true;
-            }
-          }
-        },
-      },
-    },
     onUpdate() {
       if (loadedRef.current) {
         markDirty();
@@ -283,7 +271,6 @@ export default function TemplateEditor() {
                   variant="subtle"
                   color="gray"
                   size="md"
-                  aria-label={t("Template settings")}
                   onClick={() => {
                     setDraftSpaceId(spaceId);
                     openSettings();

apps/client/src/ee/template/pages/template-list.tsx

@@ -160,8 +160,7 @@ export default function TemplateList() {
                       ? spaceNameMap.get(template.spaceId)
                       : undefined
                   }
-                  onPreview={handlePreview}
+                  onUse={handlePreview}
-                  onUse={handleUse}
                   onEdit={handleEdit}
                   onDelete={handleDelete}
                   canManage={isWorkspaceAdmin}

apps/client/src/ee/template/queries/template-query.ts

@@ -6,7 +6,6 @@ import {
   UseQueryResult,
   InfiniteData,
 } from "@tanstack/react-query";
-import { useAtom, useStore } from "jotai";
 import {
   getTemplates,
   getTemplateById,
@@ -19,12 +18,6 @@ import { ITemplate } from "@/ee/template/types/template.types";
 import { IPagination } from "@/lib/types.ts";
 import { notifications } from "@mantine/notifications";
 import { useTranslation } from "react-i18next";
-import { invalidateOnCreatePage } from "@/features/page/queries/page-query.ts";
-import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
-import { treeModel } from "@/features/page/tree/model/tree-model";
-import { SpaceTreeNode } from "@/features/page/tree/types.ts";
-import { IPage } from "@/features/page/types/page.types.ts";
-import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
 
 export function useGetTemplatesQuery(params?: { spaceId?: string }) {
   const { spaceId } = params ?? {};
@@ -156,64 +149,13 @@ export function useDeleteTemplateMutation() {
 
 export function useUseTemplateMutation() {
   const { t } = useTranslation();
-  const [, setTreeData] = useAtom(treeDataAtom);
-  const store = useStore();
-  const emit = useQueryEmit();
 
-  return useMutation<
+  return useMutation({
-    IPage,
+    mutationFn: (data: {
-    Error,
+      templateId: string;
-    { templateId: string; spaceId: string; parentPageId?: string }
+      spaceId: string;
-  >({
+      parentPageId?: string;
-    mutationFn: (data) => useTemplate(data),
+    }) => useTemplate(data),
-    onSuccess: (page) => {
-      // React Query sidebar-pages cache update (same path useCreatePageMutation takes).
-      invalidateOnCreatePage(page);
-
-      const parentId = page.parentPageId ?? null;
-      const newNode: SpaceTreeNode = {
-        id: page.id,
-        slugId: page.slugId,
-        name: page.title,
-        icon: page.icon,
-        position: page.position,
-        spaceId: page.spaceId,
-        parentPageId: page.parentPageId,
-        hasChildren: false,
-        children: [],
-      };
-
-      // Only mutate the tree atom and broadcast if it currently represents
-      // this space. Cross-space template-use (e.g., from the gallery picking
-      // a different space) lets the target space's clients pick up the new
-      // page on their next React Query refetch (focus, navigation, etc.).
-      // Without this guard we'd both pollute the local tree and send a wrong
-      // `index` to remote clients in the target space.
-      const current = store.get(treeDataAtom);
-      const treeIsForThisSpace = current[0]?.spaceId === page.spaceId;
-      if (!treeIsForThisSpace) return;
-
-      const lastIndex =
-        parentId === null
-          ? current.length
-          : (treeModel.find(current, parentId)?.children?.length ?? 0);
-
-      setTreeData((prev) =>
-        treeModel.insert(prev, parentId, newNode, lastIndex),
-      );
-
-      setTimeout(() => {
-        emit({
-          operation: "addTreeNode",
-          spaceId: page.spaceId,
-          payload: {
-            parentId,
-            index: lastIndex,
-            data: newNode,
-          },
-        });
-      }, 50);
-    },
     onError: (error) => {
       const errorMessage = error["response"]?.data?.message;
       notifications.show({

apps/client/src/ee/template/services/template-service.ts

@@ -1,6 +1,5 @@
 import api from "@/lib/api-client";
 import { ITemplate } from "@/ee/template/types/template.types";
-import { IPage } from "@/features/page/types/page.types";
 import { IPagination } from "@/lib/types.ts";
 
 export async function getTemplates(params?: {
@@ -41,7 +40,7 @@ export async function useTemplate(data: {
   templateId: string;
   spaceId: string;
   parentPageId?: string;
-}): Promise<IPage> {
+}): Promise<any> {
-  const req = await api.post<IPage>("/templates/use", data);
+  const req = await api.post("/templates/use", data);
   return req.data;
 }

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

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

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

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

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

@@ -54,13 +54,6 @@ 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;
   }
@@ -73,7 +66,7 @@ export function LoginForm() {
     <AuthLayout>
       <Container size={420} className={classes.container}>
         <Box p="xl" className={classes.containerBox}>
-          <Title order={1} size="h2" ta="center" fw={500} mb="md">
+          <Title order={2} ta="center" fw={500} mb="md">
             {t("Login")}
           </Title>
 
@@ -81,31 +74,21 @@ export function LoginForm() {
 
           {!data?.enforceSso && (
             <>
-              <form onSubmit={form.onSubmit(onSubmit, handleValidationFailure)}>
+              <form onSubmit={form.onSubmit(onSubmit)}>
                 <TextInput
                   id="email"
                   type="email"
                   label={t("Email")}
                   placeholder="email@example.com"
                   variant="filled"
-                  autoComplete="email"
-                  errorProps={{ role: "alert" }}
                   {...form.getInputProps("email")}
                 />
 
                 <PasswordInput
-                  id="password"
                   label={t("Password")}
                   placeholder={t("Your password")}
                   variant="filled"
                   mt="md"
-                  autoComplete="current-password"
-                  errorProps={{ role: "alert" }}
-                  visibilityToggleButtonProps={{
-                    "aria-label": t("Toggle password visibility"),
-                    "aria-hidden": false,
-                    tabIndex: 0,
-                  }}
                   {...form.getInputProps("password")}
                 />
 

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

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

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

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

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

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

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

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

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

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

apps/client/src/features/editor/components/common/use-alt-text-control.tsx

@@ -1,139 +0,0 @@
-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 };
-}

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

@@ -38,7 +38,6 @@ 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) {
@@ -67,7 +66,6 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
         isAlignRight: ctx.editor.isActive("drawio", { align: "right" }),
         src: drawioAttr?.src || null,
         attachmentId: drawioAttr?.attachmentId || null,
-        alt: drawioAttr?.alt || "",
       };
     },
   });
@@ -142,16 +140,6 @@ 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;
 
@@ -278,9 +266,6 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
         }}
         shouldShow={shouldShow}
       >
-        {isEditingAlt ? (
-          altTextPanel
-        ) : (
         <div className={classes.toolbar}>
           <Tooltip position="top" label={t("Align left")} withinPortal={false}>
             <ActionIcon
@@ -324,10 +309,6 @@ 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}
@@ -362,7 +343,6 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
             </ActionIcon>
           </Tooltip>
         </div>
-        )}
       </BaseBubbleMenu>
 
       <Modal.Root opened={opened} onClose={handleClose} fullScreen closeOnEscape={false}>

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

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

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

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

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

@@ -44,11 +44,9 @@ 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;
@@ -76,53 +74,6 @@ 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];
@@ -143,13 +94,6 @@ 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)); }
@@ -187,24 +131,6 @@ 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" />}
@@ -245,7 +171,6 @@ 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,
@@ -265,9 +190,6 @@ function EmojiList({
                   key={entry.id}
                   data-i={i}
                   title={`:${entry.id}:`}
-                  role="option"
-                  aria-selected={i === idx}
-                  aria-label={entry.id}
                   className={clsx(classes.emojiBtn, { [classes.active]: i === idx })}
                   onClick={() => pickGridItem(entry)}
                   onMouseEnter={() => setIdx(i)}

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

@@ -36,7 +36,6 @@ 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(() =>
@@ -78,7 +77,6 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
         isAlignRight: ctx.editor.isActive("excalidraw", { align: "right" }),
         src: excalidrawAttr?.src || null,
         attachmentId: excalidrawAttr?.attachmentId || null,
-        alt: excalidrawAttr?.alt || "",
       };
     },
   });
@@ -155,16 +153,6 @@ 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;
 
@@ -303,9 +291,6 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
         }}
         shouldShow={shouldShow}
       >
-        {isEditingAlt ? (
-          altTextPanel
-        ) : (
         <div className={classes.toolbar}>
           <Tooltip position="top" label={t("Align left")} withinPortal={false}>
             <ActionIcon
@@ -355,10 +340,6 @@ 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}
@@ -393,7 +374,6 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
             </ActionIcon>
           </Tooltip>
         </div>
-        )}
       </BaseBubbleMenu>
 
       <ReactClearModal

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

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

apps/client/src/features/editor/components/image/image-menu.tsx

@@ -20,7 +20,6 @@ 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) {
@@ -42,7 +41,6 @@ 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 || "",
       };
     },
   });
@@ -138,16 +136,6 @@ 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}
@@ -161,9 +149,6 @@ export function ImageMenu({ editor }: EditorMenuProps) {
       }}
       shouldShow={shouldShow}
     >
-      {isEditingAlt ? (
-        altTextPanel
-      ) : (
       <div className={classes.toolbar}>
         <Tooltip position="top" label={t("Align left")} withinPortal={false}>
           <ActionIcon
@@ -203,10 +188,6 @@ 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}
@@ -240,7 +221,6 @@ export function ImageMenu({ editor }: EditorMenuProps) {
           </ActionIcon>
         </Tooltip>
       </div>
-      )}
 
       <input
         ref={fileInputRef}

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

@@ -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, alt, aspectRatio, placeholder } = node.attrs;
+  const { src, width, align, title, 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={alt} />
+          <Image radius="md" fit="contain" src={getFileUrl(src)} alt={title} />
         )}
         {!src && previewSrc && (
           <Group pos="relative" h="100%" w="100%">

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

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

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

@@ -3,7 +3,6 @@ import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
-  useMemo,
   useRef,
   useState,
 } from "react";
@@ -16,7 +15,6 @@ import {
   ScrollArea,
   Text,
   UnstyledButton,
-  VisuallyHidden,
 } from "@mantine/core";
 import clsx from "clsx";
 import classes from "./mention.module.css";
@@ -47,8 +45,6 @@ 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);
@@ -186,45 +182,6 @@ 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") {
@@ -312,9 +269,6 @@ 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>
@@ -341,12 +295,6 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
       aria-label={t("Mention suggestions")}
       aria-activedescendant={`mention-option-${selectedIndex}`}
     >
-      <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
-        {countAnnouncement}
-      </VisuallyHidden>
-      <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
-        {selectionAnnouncement}
-      </VisuallyHidden>
       <ScrollArea.Autosize
         viewportRef={viewportRef}
         mah={350}

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

@@ -10,7 +10,6 @@ import {
   ScrollArea,
   Text,
   UnstyledButton,
-  VisuallyHidden,
 } from "@mantine/core";
 import classes from "./slash-menu.module.css";
 import clsx from "clsx";
@@ -30,8 +29,6 @@ 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();
@@ -82,25 +79,6 @@ 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}"]`)
@@ -117,12 +95,6 @@ const CommandList = ({
       aria-label={t("Slash commands")}
       aria-activedescendant={`slash-command-option-${selectedIndex}`}
     >
-      <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
-        {countAnnouncement}
-      </VisuallyHidden>
-      <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
-        {selectionAnnouncement}
-      </VisuallyHidden>
       <ScrollArea
         viewportRef={viewportRef}
         h={350}

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

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

apps/client/src/features/editor/components/video/video-menu.tsx

@@ -18,7 +18,6 @@ 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) {
@@ -39,7 +38,6 @@ 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 || "",
       };
     },
   });
@@ -114,16 +112,6 @@ 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}
@@ -137,9 +125,6 @@ export function VideoMenu({ editor }: EditorMenuProps) {
       }}
       shouldShow={shouldShow}
     >
-      {isEditingAlt ? (
-        altTextPanel
-      ) : (
       <div className={classes.toolbar}>
         <Tooltip position="top" label={t("Align left")} withinPortal={false}>
           <ActionIcon
@@ -179,10 +164,6 @@ 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}
@@ -205,7 +186,6 @@ export function VideoMenu({ editor }: EditorMenuProps) {
           </ActionIcon>
         </Tooltip>
       </div>
-      )}
     </BaseBubbleMenu>
   );
 }

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

@@ -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, alt, aspectRatio, placeholder } = node.attrs;
+  const { src, width, align, 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={alt || undefined}
+            aria-label={placeholder?.name || t("Video")}
           />
         )}
         {!src && previewSrc && (

apps/client/src/features/editor/extensions/extensions.ts

@@ -416,9 +416,7 @@ const TEMPLATE_EXCLUDED_SLASH_ITEMS = new Set([
   "Video",
   "File attachment",
   "Draw.io (diagrams.net)",
-  "Excalidraw (Whiteboard)",
+  "Excalidraw diagram",
-  "Audio",
-  "Synced block"
 ]);
 
 const TemplateSlashCommand = Command.configure({

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

@@ -22,7 +22,7 @@ import { useTranslation } from "react-i18next";
 import { IContributor } from "@/features/page/types/page.types.ts";
 import { FixedToolbar } from "@/features/editor/components/fixed-toolbar/fixed-toolbar";
 import { PageEditMode } from "@/features/user/types/user.types.ts";
-import { useAsideTriggerProps } from "@/hooks/use-toggle-aside.tsx";
+import useToggleAside 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 detailsTriggerProps = useAsideTriggerProps("details");
+  const toggleAside = useToggleAside();
 
   const otherContributors = (contributors ?? []).filter(
     (c) => c.id !== creator?.id,
@@ -141,9 +141,7 @@ 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}
@@ -205,7 +203,7 @@ function PageByline({ creator, contributors, readOnly }: PageBylineProps) {
           variant="subtle"
           color="gray"
           aria-label={t("Details")}
-          {...detailsTriggerProps}
+          onClick={() => toggleAside("details")}
         >
           <IconInfoCircle size={20} stroke={1.5} />
         </ActionIcon>

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

@@ -43,6 +43,7 @@ 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";
@@ -73,7 +74,6 @@ 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,7 +88,6 @@ export default function PageEditor({
   content,
   canComment,
 }: PageEditorProps) {
-  const { t } = useTranslation();
   const collaborationURL = useCollaborationUrl();
   const isComponentMounted = useRef(false);
   const editorRef = useRef<Editor | null>(null);
@@ -233,15 +232,20 @@ 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;
@@ -395,11 +399,6 @@ export default function PageEditor({
           immediatelyRender={true}
           extensions={mainExtensions}
           content={content}
-          editorProps={{
-            attributes: {
-              "aria-label": t("Page content"),
-            },
-          }}
         />
       ) : (
         <div className="editor-container" style={{ position: "relative" }}>
@@ -430,7 +429,9 @@ export default function PageEditor({
             {editor &&
               !editorIsEditable &&
               (editable || canComment) &&
-              providersRef.current && <ReadonlyBubbleMenu editor={editor} />}
+              providersRef.current && (
+                <ReadonlyBubbleMenu editor={editor} />
+              )}
             {showCommentPopup && (
               <CommentDialog editor={editor} pageId={pageId} />
             )}

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

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

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

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

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

@@ -1,5 +1,4 @@
 import { ActionIcon, Tooltip } from "@mantine/core";
-import { notifications } from "@mantine/notifications";
 import { IconStar, IconStarFilled } from "@tabler/icons-react";
 import {
   useFavoriteIds,
@@ -15,8 +14,6 @@ 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;
 };
 
@@ -28,7 +25,7 @@ function getEntityId(props: StarButtonProps): string | undefined {
 }
 
 export default function StarButton(props: StarButtonProps) {
-  const { type, name, size = 18 } = props;
+  const { type, size = 18 } = props;
   const { t } = useTranslation();
   const favoriteIds = useFavoriteIds(type);
   const addMutation = useAddFavoriteMutation();
@@ -50,46 +47,22 @@ 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"),
-          });
-        },
-      });
     }
   };
 
-  // Tooltip label stays short. Accessible name expands to include the item
+  const label = isFavorited
-  // 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={tooltipLabel} openDelay={250} withArrow>
+    <Tooltip label={label} openDelay={250} withArrow>
       <ActionIcon
         variant="subtle"
         color={isFavorited ? "yellow" : "gray"}
-        aria-label={ariaLabel}
+        aria-label={label}
         aria-pressed={isFavorited}
         onClick={handleToggle}
         loading={isPending}

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

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

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

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

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

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

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

@@ -9,7 +9,6 @@ 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),
@@ -19,16 +18,13 @@ const formSchema = z.object({
 type FormValues = z.infer<typeof formSchema>;
 interface EditGroupFormProps {
   onClose?: () => void;
-  group?: IGroup;
 }
-export function EditGroupForm({ onClose, group: groupProp }: EditGroupFormProps) {
+export function EditGroupForm({ onClose }: EditGroupFormProps) {
   const { t } = useTranslation();
   const updateGroupMutation = useUpdateGroupMutation();
   const { isSuccess } = updateGroupMutation;
-  const { groupId: routeGroupId } = useParams();
+  const { groupId } = useParams();
-  const groupId = groupProp?.id ?? routeGroupId;
+  const { data: group } = useGroupQuery(groupId);
-  const { data: queriedGroup } = useGroupQuery(groupProp ? undefined : groupId);
-  const group = groupProp ?? queriedGroup;
 
   useEffect(() => {
     if (isSuccess) {
@@ -70,7 +66,6 @@ export function EditGroupForm({ onClose, group: groupProp }: EditGroupFormProps)
               label={t("Group name")}
               placeholder={t("e.g Developers")}
               variant="filled"
-              data-autofocus
               {...form.getInputProps("name")}
             />
 

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

@@ -1,31 +1,23 @@
 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
+      <Modal opened={opened} onClose={onClose} title={t("Edit group")}>
-        opened={opened}
-        onClose={onClose}
-        title={t("Edit group")}
-        closeButtonProps={{ "aria-label": t("Close") }}
-      >
         <Divider size="xs" mb="xs" />
-        <EditGroupForm onClose={onClose} group={group} />
+        <EditGroupForm onClose={onClose} />
       </Modal>
     </>
   );

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

@@ -10,28 +10,18 @@ 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";
 
-interface GroupActionMenuProps {
+export default function GroupActionMenu() {
-  group?: IGroup;
-}
-
-export default function GroupActionMenu(props: GroupActionMenuProps = {}) {
   const { t } = useTranslation();
-  const { groupId: routeGroupId } = useParams();
+  const { groupId } = useParams();
-  const groupId = props.group?.id ?? routeGroupId;
+  const { data: group, isLoading } = useGroupQuery(groupId);
-  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);
-    // Only navigate away if we're currently viewing this group's detail page.
-    if (routeGroupId === groupId) {
     navigate("/settings/groups");
-    }
   };
 
   const openDeleteModal = () =>
@@ -63,11 +53,7 @@ export default function GroupActionMenu(props: GroupActionMenuProps = {}) {
             arrowPosition="center"
           >
             <Menu.Target>
-              <ActionIcon
+              <ActionIcon variant="light" aria-label={t("Group menu")}>
-                variant="subtle"
-                color="gray"
-                aria-label={t("Group actions for {{name}}", { name: group.name })}
-              >
                 <IconDots size={20} stroke={2} />
               </ActionIcon>
             </Menu.Target>
@@ -90,7 +76,7 @@ export default function GroupActionMenu(props: GroupActionMenuProps = {}) {
         </>
       )}
 
-      <EditGroupModal opened={opened} onClose={close} group={group} />
+      <EditGroupModal opened={opened} onClose={close} />
     </>
   );
 }

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

@@ -1,4 +1,4 @@
-import { Table, Group, Text, Anchor, VisuallyHidden } from "@mantine/core";
+import { Table, Group, Text, Anchor } 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,8 +12,6 @@ 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();
@@ -36,16 +34,13 @@ 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} className={rowClasses.row}>
+              <Table.Tr key={index}>
                 <Table.Td onMouseEnter={() => prefetchGroupMembers(group.id)}>
                   <Anchor
                     size="sm"
@@ -54,7 +49,6 @@ export default function GroupList() {
                       cursor: "pointer",
                       color: "var(--mantine-color-text)",
                     }}
-                    className={rowClasses.link}
                     component={Link}
                     to={`/settings/groups/${group.id}`}
                   >
@@ -86,13 +80,10 @@ export default function GroupList() {
                     {formatMemberCount(group.memberCount, t)}
                   </Anchor>
                 </Table.Td>
-                <Table.Td>
-                  <GroupActionMenu group={group} />
-                </Table.Td>
               </Table.Tr>
             ))
             ) : (
-              <NoTableResults colSpan={3} />
+              <NoTableResults colSpan={2} />
             )}
           </Table.Tbody>
         </Table>

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

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

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

@@ -17,7 +17,6 @@ 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;
@@ -50,10 +49,9 @@ export default function CreatedByMe({ spaceId }: Props) {
         <Table highlightOnHover verticalSpacing="sm">
           <Table.Tbody>
             {pages.map((page) => (
-              <Table.Tr key={page.id} className={rowClasses.row}>
+              <Table.Tr key={page.id}>
                 <Table.Td>
                   <UnstyledButton
-                    className={rowClasses.link}
                     component={Link}
                     to={buildPageUrl(
                       page?.space.slug,

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

@@ -17,7 +17,6 @@ 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;
@@ -51,10 +50,9 @@ export default function FavoritesPages({ spaceId }: Props) {
           <Table.Tbody>
             {favorites.map((fav) =>
               fav.page ? (
-                <Table.Tr key={fav.id} className={rowClasses.row}>
+                <Table.Tr key={fav.id}>
                   <Table.Td>
                     <UnstyledButton
-                      className={rowClasses.link}
                       component={Link}
                       to={buildPageUrl(
                         fav.space?.slug,

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

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

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

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