fix: a11y (#2275)

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

@@ -978,7 +978,7 @@
   "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",
+  "Chat menu for {{title}}": "Chat menu for {{title}}",
   "API key menu": "API key menu",
   "Jump to comment selection": "Jump to comment selection",
   "Slash commands": "Slash commands",
@@ -1064,7 +1064,7 @@
   "Filter": "Filter",
   "Page title": "Page title",
   "Page content": "Page content",
-  "Member actions": "Member actions",
+  "Member actions for {{name}}": "Member actions for {{name}}",
   "Toggle password visibility": "Toggle password visibility",
   "Send comment": "Send comment",
   "Token actions": "Token actions",

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

@@ -105,7 +105,7 @@ export default function GlobalSidebar() {
 
         <Divider my="xs" />
         <div className={classes.section}>
-          <Text className={classes.sectionHeader}>{t("Favorite spaces")}</Text>
+          <Text component="h2" className={classes.sectionHeader}>{t("Favorite spaces")}</Text>
           {!isFavoritesPending && sortedFavoriteSpaces.length === 0 ? (
             <Text size="xs" c="dimmed" pl="xs" py={4}>
               {t("Favorite spaces appear here")}

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

@@ -16,13 +16,10 @@ interface CustomAvatarProps {
   mt?: string | number;
 }
 
-// `color.shade` pairs whose contrast meets WCAG AA (4.5:1) in BOTH variants:
-//   - filled: white text on the shade as bg
-//   - light:  shade as text on the color's light-bg (10% color.6 over white)
-// Avoids lime/yellow/green/orange — even their dark shades have weak
-// contrast. grape and indigo were bumped from .7 to darker shades because
-// the original picks failed: grape.7 was 4.02/3.61 (both fail) and
-// indigo.7 was 4.98/4.39 (light fails by a hair).
+// color.shade picks whose FILLED variant (white text on the shade) meets WCAG AA 4.5:1.
+// Avoids lime/yellow/green/orange, too light even at dark shades.
+// For non-filled variants, initials text is forced to the .9 shade at render time:
+// Mantine otherwise caps light-variant placeholder text at .6, dropping contrast to ~3:1.
 const SAFE_INITIALS_COLORS: MantineColor[] = [
   "blue.8",
   "cyan.9",
@@ -54,12 +51,21 @@ function sanitizeInitialsSource(name: string) {
 export const CustomAvatar = React.forwardRef<
   HTMLInputElement,
   CustomAvatarProps
->(({ avatarUrl, name, type, color, ...props }: CustomAvatarProps, ref) => {
+>(({ avatarUrl, name, type, color, variant, ...props }: CustomAvatarProps, ref) => {
   const avatarLink = getAvatarUrl(avatarUrl, type);
-  const resolvedColor =
-    !color || color === "initials" ? pickInitialsColor(name ?? "") : color;
+  const isInitials = !color || color === "initials";
+  const resolvedColor = isInitials ? pickInitialsColor(name ?? "") : color;
   const initialsSource = sanitizeInitialsSource(name ?? "");
 
+  const placeholderStyles =
+    isInitials && variant !== "filled"
+      ? {
+          placeholder: {
+            color: `var(--mantine-color-${resolvedColor.split(".")[0]}-9)`,
+          },
+        }
+      : undefined;
+
   return (
     <Avatar
       ref={ref}
@@ -67,6 +73,8 @@ export const CustomAvatar = React.forwardRef<
       name={initialsSource}
       alt={name}
       color={resolvedColor}
+      variant={variant}
+      styles={placeholderStyles}
       {...props}
     />
   );

apps/client/src/components/ui/radio-menu-item.tsx

@@ -0,0 +1,12 @@
+import { UnstyledButton } from "@mantine/core";
+import { type ComponentPropsWithoutRef, forwardRef } from "react";
+
+// Menu.Item hard-codes role="menuitem"; use as its `component` to restore role="menuitemradio" so aria-checked works.
+export const RadioMenuItem = forwardRef<
+  HTMLButtonElement,
+  ComponentPropsWithoutRef<"button">
+>((props, ref) => (
+  <UnstyledButton ref={ref} {...props} role="menuitemradio" />
+));
+
+RadioMenuItem.displayName = "RadioMenuItem";

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

@@ -66,6 +66,8 @@ export default function AiChatSidebarItem({
     [chat.updatedAt, i18n.language],
   );
 
+  const chatTitle = chat.title || t("Untitled chat");
+
   useEffect(() => {
     if (renaming) {
       // Wait for the input to be mounted before selecting.
@@ -120,9 +122,7 @@ export default function AiChatSidebarItem({
       className={classes.chatItem}
       data-active={isActive || undefined}
     >
-      <span className={classes.chatItemTitle}>
-        {chat.title || t("Untitled chat")}
-      </span>
+      <span className={classes.chatItemTitle}>{chatTitle}</span>
       <span className={classes.chatItemDate}>{formattedDate}</span>
       <div className={classes.chatItemActions}>
         <Menu position="bottom-end" withinPortal>
@@ -132,7 +132,7 @@ export default function AiChatSidebarItem({
               size="xs"
               color="gray"
               onClick={(e) => e.preventDefault()}
-              aria-label={t("Chat menu")}
+              aria-label={t("Chat menu for {{title}}", { title: chatTitle })}
             >
               <IconDots size={14} />
             </ActionIcon>

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

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useEffect, useState } from "react";
+import { useCallback, useId, useRef, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { IconArrowUp, IconPaperclip, IconPlayerStopFilled, IconX, IconFile, IconPhoto, IconPlus, IconAt, IconFileText } from "@tabler/icons-react";
 import { Popover } from "@mantine/core";
@@ -107,6 +107,7 @@ export default function ChatInput({
   const [isEmpty, setIsEmpty] = useState(true);
   const [pendingAttachments, setPendingAttachments] = useState<PendingAttachment[]>([]);
   const [plusMenuOpen, setPlusMenuOpen] = useState(false);
+  const plusMenuId = useId();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const onSendRef = useRef(onSend);
   onSendRef.current = onSend;
@@ -342,6 +343,7 @@ export default function ChatInput({
           position="top-start"
           width={220}
           shadow="md"
+          withRoles={false}
           trapFocus
           returnFocus
         >
@@ -351,13 +353,17 @@ export default function ChatInput({
               className={classes.plusButton}
               onClick={() => setPlusMenuOpen((o) => !o)}
               aria-label="Add content"
+              aria-haspopup="menu"
+              aria-expanded={plusMenuOpen}
+              aria-controls={plusMenuOpen ? plusMenuId : undefined}
             >
               <IconPlus size={14} />
             </button>
           </Popover.Target>
-          <Popover.Dropdown p={4}>
+          <Popover.Dropdown id={plusMenuId} role="menu" p={4}>
             <button
               type="button"
+              role="menuitem"
               className={classes.plusMenuItem}
               onClick={() => {
                 fileInputRef.current?.click();
@@ -377,6 +383,7 @@ export default function ChatInput({
             </button>
             <button
               type="button"
+              role="menuitem"
               className={classes.plusMenuItem}
               onClick={() => {
                 editor?.commands.insertContent("@");
@@ -385,7 +392,7 @@ export default function ChatInput({
               }}
             >
               <IconAt size={16} className={classes.plusMenuIcon} />
-              Mention a page
+              {t("Mention a page")}
             </button>
           </Popover.Dropdown>
         </Popover>

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

@@ -76,7 +76,6 @@
   padding: var(--mantine-spacing-xs) var(--mantine-spacing-lg) var(--mantine-spacing-lg);
 }
 
-/* Empty state - Notion AI style centered layout */
 .emptyState {
   flex: 1;
   display: flex;

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

@@ -91,7 +91,9 @@ export default function GroupMembersList() {
                         <ActionIcon
                           variant="subtle"
                           c="gray"
-                          aria-label={t("Member actions")}
+                          aria-label={t("Member actions for {{name}}", {
+                            name: user.name,
+                          })}
                         >
                           <IconDots size={20} stroke={2} />
                         </ActionIcon>

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useId, useState } from "react";
 import {
   ActionIcon,
   Group,
@@ -31,6 +31,7 @@ import classes from "../notification.module.css";
 
 export function NotificationPopover() {
   const { t } = useTranslation();
+  const titleId = useId();
   const [opened, setOpened] = useState(false);
   const [tab, setTab] = useState<NotificationTab>("direct");
   const [filter, setFilter] = useState<NotificationFilter>("all");
@@ -83,10 +84,11 @@ export function NotificationPopover() {
 
       <Popover.Dropdown
         p={0}
+        aria-labelledby={titleId}
         style={{ width: "min(420px, calc(100vw - 24px))" }}
       >
         <Group justify="space-between" px="md" py="sm">
-          <Title order={2} fz="sm" fw={600}>
+          <Title id={titleId} order={2} fz="sm" fw={600}>
             {t("Notifications")}
           </Title>
           <Group gap={4}>

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

@@ -34,6 +34,7 @@ import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
 import { treeModel } from "@/features/page/tree/model/tree-model";
 import { useTreeMutation } from "@/features/page/tree/hooks/use-tree-mutation.ts";
 import type { SpaceTreeNode } from "@/features/page/tree/types.ts";
+import classes from "@/features/page/tree/styles/tree.module.css";
 
 export interface NodeMenuProps {
   node: SpaceTreeNode;
@@ -123,8 +124,9 @@ export function NodeMenu({ node, canEdit }: NodeMenuProps) {
       <Menu shadow="md" width={200}>
         <Menu.Target>
           <ActionIcon
-            variant="transparent"
-            c="gray"
+            variant="subtle"
+            color="gray"
+            className={classes.actionIcon}
             aria-label={t("Page menu for {{name}}", { name: node.name || t("untitled") })}
             tabIndex={-1}
             onClick={(e) => {

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

@@ -201,13 +201,13 @@ function PageArrow({ isOpen, hasChildren, onToggle }: PageArrowProps) {
     return (
       <span
         aria-hidden
+        className={classes.actionIcon}
         style={{
           width: 20,
           height: 20,
           display: "inline-flex",
           alignItems: "center",
           justifyContent: "center",
-          color: "var(--mantine-color-gray-6)",
           flexShrink: 0,
         }}
       >
@@ -220,7 +220,8 @@ function PageArrow({ isOpen, hasChildren, onToggle }: PageArrowProps) {
     <ActionIcon
       size={20}
       variant="subtle"
-      c="gray"
+      color="gray"
+      className={classes.actionIcon}
       aria-label={isOpen ? t("Collapse") : t("Expand")}
       aria-expanded={isOpen}
       tabIndex={-1}
@@ -272,8 +273,9 @@ function CreateNode({
 
   return (
     <ActionIcon
-      variant="transparent"
-      c="gray"
+      variant="subtle"
+      color="gray"
+      className={classes.actionIcon}
       aria-label={t("Create subpage of {{name}}", { name: node.name || t("untitled") })}
       tabIndex={-1}
       onClick={(e) => {

apps/client/src/features/page/tree/styles/tree.module.css

@@ -57,6 +57,10 @@
     flex-shrink: 0;
 }
 
+.actionIcon {
+    color: light-dark(var(--mantine-color-dark-3), var(--mantine-color-gray-4));
+}
+
 .text {
     flex: 1;
     /* min-width: 0 lets a flex child shrink below its content size — required

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

@@ -17,6 +17,7 @@ import {
 import { useTranslation } from "react-i18next";
 import { useGetSpacesQuery } from "@/features/space/queries/space-query";
 import { SpaceFilterMenu } from "@/features/space/components/space-filter-menu";
+import { RadioMenuItem } from "@/components/ui/radio-menu-item";
 import { useHasFeature } from "@/ee/hooks/use-feature";
 import { Feature } from "@/ee/features";
 import classes from "./search-spotlight-filters.module.css";
@@ -175,7 +176,7 @@ export function SearchSpotlightFilters({
           {contentTypeOptions.map((option) => (
             <Menu.Item
               key={option.value}
-              role="menuitemradio"
+              component={RadioMenuItem}
               aria-checked={contentType === option.value}
               onClick={() =>
                 !option.disabled &&

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

@@ -13,6 +13,7 @@ import { useDebouncedValue } from "@mantine/hooks";
 import { IconCheck, IconSearch } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { useGetSpacesQuery } from "@/features/space/queries/space-query";
+import { RadioMenuItem } from "@/components/ui/radio-menu-item";
 
 type SpaceFilterMenuProps = {
   value: string | null;
@@ -75,7 +76,7 @@ export function SpaceFilterMenu({
 
         <ScrollArea.Autosize mah={280}>
           <Menu.Item
-            role="menuitemradio"
+            component={RadioMenuItem}
             aria-checked={!value}
             onClick={() => onChange(null)}
           >
@@ -103,7 +104,7 @@ export function SpaceFilterMenu({
           {orderedSpaces.map((space) => (
             <Menu.Item
               key={space.id}
-              role="menuitemradio"
+              component={RadioMenuItem}
               aria-checked={value === space.id}
               onClick={() => onChange(space.id)}
             >

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

@@ -210,7 +210,9 @@ export default function SpaceMembersList({
                           <ActionIcon
                             variant="subtle"
                             c="gray"
-                            aria-label={t("Member actions")}
+                            aria-label={t("Member actions for {{name}}", {
+                              name: member.name,
+                            })}
                           >
                             <IconDots size={20} stroke={2} />
                           </ActionIcon>

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

@@ -12,9 +12,14 @@ import useUserRole from "@/hooks/use-user-role.tsx";
 
 interface Props {
   userId: string;
+  name: string;
   deactivatedAt: Date | null;
 }
-export default function MemberActionMenu({ userId, deactivatedAt }: Props) {
+export default function MemberActionMenu({
+  userId,
+  name,
+  deactivatedAt,
+}: Props) {
   const { t } = useTranslation();
   const deleteWorkspaceMemberMutation = useDeleteWorkspaceMemberMutation();
   const deactivateMutation = useDeactivateWorkspaceMemberMutation();
@@ -86,7 +91,7 @@ export default function MemberActionMenu({ userId, deactivatedAt }: Props) {
           <ActionIcon
             variant="subtle"
             c="gray"
-            aria-label={t("Member actions")}
+            aria-label={t("Member actions for {{name}}", { name })}
           >
             <IconDots size={20} stroke={2} />
           </ActionIcon>

apps/client/src/features/workspace/components/members/components/workspace-members-table.tsx

@@ -111,6 +111,7 @@ export default function WorkspaceMembersTable() {
                     {isAdmin && (
                       <MemberActionMenu
                         userId={user.id}
+                        name={user.name}
                         deactivatedAt={user.deactivatedAt}
                       />
                     )}