aria fixes

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

@@ -80,6 +80,12 @@ export default function AvatarUploader({
     }
   };
 
+  const ariaLabel = {
+    [AvatarIconType.AVATAR]: t("Change avatar"),
+    [AvatarIconType.SPACE_ICON]: t("Change space icon"),
+    [AvatarIconType.WORKSPACE_ICON]: t("Change workspace icon"),
+  }[type];
+
   const handleRemove = async () => {
     if (disabled) return;
 
@@ -104,6 +110,8 @@ export default function AvatarUploader({
         ref={fileInputRef}
         onChange={handleFileInputChange}
         accept="image/png,image/jpeg,image/jpg"
+        aria-label={ariaLabel}
+        tabIndex={-1}
         style={{ display: "none" }}
       />
 
@@ -115,6 +123,8 @@ export default function AvatarUploader({
               size={size}
               avatarUrl={currentImageUrl}
               name={fallbackName}
+              aria-label={ariaLabel}
+              aria-haspopup="menu"
               style={{
                 cursor: disabled || isLoading ? "default" : "pointer",
                 opacity: isLoading ? 0.6 : 1,

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

@@ -4,7 +4,7 @@ import {
   UnstyledButton,
   Badge,
   Table,
-  ActionIcon,
+  ThemeIcon,
   Button,
 } from "@mantine/core";
 import { Link } from "react-router-dom";
@@ -49,9 +49,9 @@ export default function RecentChanges({ spaceId }: Props) {
                   >
                     <Group wrap="nowrap">
                       {page.icon || (
-                        <ActionIcon variant="transparent" color="gray" size={18}>
+                        <ThemeIcon variant="transparent" color="gray" size={18}>
                           <IconFileDescription size={18} />
-                        </ActionIcon>
+                        </ThemeIcon>
                       )}
 
                       <Text fw={500} size="md" lineClamp={1}>

apps/client/src/components/icons/icon-people-circle.tsx

@@ -1,11 +1,11 @@
-import { ActionIcon, rem } from "@mantine/core";
+import { ThemeIcon } from "@mantine/core";
 import React from "react";
 import { IconUsersGroup } from "@tabler/icons-react";
 
 export function IconGroupCircle() {
   return (
-    <ActionIcon variant="light" size="lg" color="gray" radius="xl">
+    <ThemeIcon variant="light" size="lg" color="gray" radius="xl">
       <IconUsersGroup stroke={1.5} />
-    </ActionIcon>
+    </ThemeIcon>
   );
 }

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

@@ -141,6 +141,7 @@ export default function SsoProviderList() {
                         <ActionIcon
                           variant="subtle"
                           color="gray"
+                          aria-label={t("Edit {{name}}", { name: provider.name })}
                           onClick={() => handleEdit(provider)}
                         >
                           <IconPencil size={16} />
@@ -152,7 +153,13 @@ export default function SsoProviderList() {
                           withinPortal
                         >
                           <Menu.Target>
-                            <ActionIcon variant="subtle" color="gray">
+                            <ActionIcon
+                              variant="subtle"
+                              color="gray"
+                              aria-label={t("More actions for {{name}}", {
+                                name: provider.name,
+                              })}
+                            >
                               <IconDots size={16} />
                             </ActionIcon>
                           </Menu.Target>

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

@@ -53,15 +53,17 @@ export default function StarButton(props: StarButtonProps) {
     }
   };
 
+  const label = isFavorited
+    ? t("Remove from favorites")
+    : t("Add to favorites");
+
   return (
-    <Tooltip
+    <Tooltip label={label} openDelay={250} withArrow>
-      label={isFavorited ? t("Remove from favorites") : t("Add to favorites")}
-      openDelay={250}
-      withArrow
-    >
       <ActionIcon
         variant="subtle"
         color={isFavorited ? "yellow" : "gray"}
+        aria-label={label}
+        aria-pressed={isFavorited}
         onClick={handleToggle}
         loading={isPending}
       >

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

@@ -4,7 +4,7 @@ import {
   UnstyledButton,
   Badge,
   Table,
-  ActionIcon,
+  ThemeIcon,
   Button,
 } from "@mantine/core";
 import { Link } from "react-router-dom";
@@ -61,13 +61,13 @@ export default function CreatedByMe({ spaceId }: Props) {
                   >
                     <Group wrap="nowrap">
                       {page.icon || (
-                        <ActionIcon
+                        <ThemeIcon
                           variant="transparent"
                           color="gray"
                           size={18}
                         >
                           <IconFileDescription size={18} />
-                        </ActionIcon>
+                        </ThemeIcon>
                       )}
                       <Text fw={500} size="md" lineClamp={1}>
                         {page.title || t("Untitled")}

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

@@ -4,7 +4,7 @@ import {
   UnstyledButton,
   Badge,
   Table,
-  ActionIcon,
+  ThemeIcon,
   Button,
 } from "@mantine/core";
 import { Link } from "react-router-dom";
@@ -62,13 +62,13 @@ export default function FavoritesPages({ spaceId }: Props) {
                     >
                       <Group wrap="nowrap">
                         {fav.page.icon || (
-                          <ActionIcon
+                          <ThemeIcon
                             variant="transparent"
                             color="gray"
                             size={18}
                           >
                             <IconFileDescription size={18} />
-                          </ActionIcon>
+                          </ThemeIcon>
                         )}
                         <Text fw={500} size="md" lineClamp={1}>
                           {fav.page.title || t("Untitled")}

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

@@ -58,6 +58,9 @@ export function NotificationPopover() {
             variant="subtle"
             color="dark"
             size="sm"
+            aria-label={t("Notifications")}
+            aria-haspopup="dialog"
+            aria-expanded={opened}
             onClick={() => setOpened((o) => !o)}
           >
             <Indicator

apps/client/src/features/page/components/header/page-header-menu.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Group, Menu, Text, Tooltip } from "@mantine/core";
+import { ActionIcon, Group, Menu, Text, ThemeIcon, Tooltip } from "@mantine/core";
 import {
   IconArrowRight,
   IconArrowsHorizontal,
@@ -99,6 +99,7 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
         <ActionIcon
           variant="subtle"
           color="dark"
+          aria-label={t("Comments")}
           onClick={() => toggleAside("comments")}
         >
           <IconMessage size={20} stroke={2} />
@@ -109,6 +110,7 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
         <ActionIcon
           variant="subtle"
           color="dark"
+          aria-label={t("Table of contents")}
           onClick={() => toggleAside("toc")}
         >
           <IconList size={20} stroke={2} />
@@ -420,9 +422,15 @@ function ConnectionWarning() {
       openDelay={250}
       withArrow
     >
-      <ActionIcon variant="default" c="red" style={{ border: "none" }}>
+      <ThemeIcon
+        variant="default"
+        c="red"
+        role="status"
+        aria-label={t("Real-time editor connection lost. Retrying...")}
+        style={{ border: "none" }}
+      >
         <IconWifiOff size={20} stroke={2} />
-      </ActionIcon>
+      </ThemeIcon>
     </Tooltip>
   );
 }

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

@@ -49,15 +49,15 @@ function WatchButton({ spaceId, watchedIds, size = 16 }: { spaceId: string; watc
     }
   };
 
+  const label = isWatching ? t("Stop watching space") : t("Watch space");
+
   return (
-    <Tooltip
+    <Tooltip label={label} openDelay={250} withArrow>
-      label={isWatching ? t("Stop watching space") : t("Watch space")}
-      openDelay={250}
-      withArrow
-    >
       <ActionIcon
         variant="subtle"
         color={isWatching ? "blue" : "gray"}
+        aria-label={label}
+        aria-pressed={isWatching}
         onClick={handleToggle}
         loading={isPending}
       >

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

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