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

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

@@ -175,6 +175,8 @@ export function SearchSpotlightFilters({
           {contentTypeOptions.map((option) => (
             <Menu.Item
               key={option.value}
+              role="menuitemradio"
+              aria-checked={contentType === option.value}
               onClick={() =>
                 !option.disabled &&
                 contentType !== option.value &&
@@ -200,7 +202,7 @@ export function SearchSpotlightFilters({
                       </Text>
                     )}
                 </div>
-                {contentType === option.value && <IconCheck size={20} />}
+                {contentType === option.value && <IconCheck size={20} aria-hidden />}
               </Group>
             </Menu.Item>
           ))}

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

@@ -1,6 +1,6 @@
 import { Spotlight } from "@mantine/spotlight";
 import { IconSearch, IconSparkles } from "@tabler/icons-react";
-import { Group, Button } from "@mantine/core";
+import { Group, Button, VisuallyHidden } from "@mantine/core";
 import React, { useState, useMemo, useEffect } from "react";
 import { useDebouncedValue } from "@mantine/hooks";
 import { useTranslation } from "react-i18next";
@@ -126,6 +126,7 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
         <Group gap="xs" px="sm" pt="sm" pb="xs">
           <Spotlight.Search
             placeholder={isAiMode ? t("Ask a question...") : t("Search...")}
+            aria-label={isAiMode ? t("Ask a question...") : t("Search")}
             leftSection={<IconSearch size={20} stroke={1.5} />}
             style={{ flex: 1 }}
             onKeyDown={(e) => {
@@ -161,6 +162,18 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
           />
         </div>
 
+        <VisuallyHidden role="status" aria-live="polite">
+          {isAiMode
+            ? query.length > 0 && !isAiLoading && !aiSearchResult
+              ? t("No answer available")
+              : ""
+            : query.length > 0 && !isLoading
+              ? resultItems.length === 0
+                ? t("No results found")
+                : t("{{count}} results found", { count: resultItems.length })
+              : ""}
+        </VisuallyHidden>
+
         <Spotlight.ActionsList>
           {isAiMode ? (
             <>

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

@@ -74,6 +74,7 @@ export function ShareSearchSpotlight({ shareId }: ShareSearchSpotlightProps) {
       >
         <Spotlight.Search
           placeholder={t("Search...")}
+          aria-label={t("Search")}
           leftSection={<IconSearch size={20} stroke={1.5} />}
         />
         <Spotlight.ActionsList>