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

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

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