✨(frontend) improve accessibility of search modal for screen readers

added clearer sr-only translations and aria-hidden for non-essential content

Signed-off-by: Cyril <c.gromoff@gmail.com>

src/frontend/apps/impress/src/components/DropButton.tsx

@@ -48,6 +48,7 @@ export interface DropButtonProps {
   isOpen?: boolean;
   onOpenChange?: (isOpen: boolean) => void;
   label?: string;
+  testId?: string;
 }
 
 export const DropButton = ({
@@ -57,6 +58,7 @@ export const DropButton = ({
   onOpenChange,
   children,
   label,
+  testId,
 }: PropsWithChildren<DropButtonProps>) => {
   const { themeTokens } = useCunninghamTheme();
   const font = themeTokens['font']?.['families']['base'];
@@ -79,6 +81,7 @@ export const DropButton = ({
         ref={triggerRef}
         onPress={() => onOpenChangeHandler(true)}
         aria-label={label}
+        data-testid={testId}
         $css={css`
           font-family: ${font};
           ${buttonCss};

src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx

@@ -38,6 +38,7 @@ export type DropdownMenuProps = {
   topMessage?: string;
   selectedValues?: string[];
   afterOpenChange?: (isOpen: boolean) => void;
+  testId?: string;
 };
 
 export const DropdownMenu = ({
@@ -52,6 +53,7 @@ export const DropdownMenu = ({
   topMessage,
   afterOpenChange,
   selectedValues,
+  testId,
 }: PropsWithChildren<DropdownMenuProps>) => {
   const { spacingsTokens, colorsTokens } = useCunninghamTheme();
   const [isOpen, setIsOpen] = useState(opened ?? false);
@@ -100,6 +102,7 @@ export const DropdownMenu = ({
       onOpenChange={onOpenChange}
       label={label}
       buttonCss={buttonCss}
+      testId={testId}
       button={
         showArrow ? (
           <Box

src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx

@@ -46,7 +46,9 @@ export const QuickSearchInput = ({
         $gap={spacingsTokens['2xs']}
         $padding={{ horizontal: 'base', vertical: 'sm' }}
       >
-        {!loading && <Icon iconName="search" $variation="600" />}
+        {!loading && (
+          <Icon iconName="search" $variation="600" aria-hidden="true" />
+        )}
         {loading && (
           <div>
             <Loader size="small" />

src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx

@@ -119,7 +119,11 @@ export const DocVersionEditor = ({
           causes={error.cause}
           icon={
             error.status === 502 ? (
-              <Text className="material-icons" $theme="danger">
+              <Text
+                className="material-icons"
+                $theme="danger"
+                aria-hidden={true}
+              >
                 wifi_off
               </Text>
             ) : undefined

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx

@@ -39,7 +39,11 @@ export const DocShareModalFooter = ({
           fullWidth={false}
           onClick={copyDocLink}
           color="tertiary"
-          icon={<span className="material-icons">add_link</span>}
+          icon={
+            <span className="material-icons" aria-hidden={true}>
+              add_link
+            </span>
+          }
         >
           {t('Copy link')}
         </Button>

src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx

@@ -129,7 +129,8 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
           $gap={canManage ? spacingsTokens['3xs'] : spacingsTokens['base']}
         >
           <DropdownMenu
-            label={t('Visibility')}
+            testId="doc-visibility"
+            label={t('Document visibility')}
             arrowCss={css`
               color: ${colorsTokens['primary-800']} !important;
             `}
@@ -170,6 +171,7 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
           <Box $direction="row" $align="center" $gap={spacingsTokens['3xs']}>
             {docLinkReach !== LinkReach.RESTRICTED && (
               <DropdownMenu
+                testId="doc-access-mode"
                 disabled={!canManage}
                 showArrow={true}
                 options={linkRoleOptions}
@@ -180,7 +182,7 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
                       )
                     : undefined
                 }
-                label={t('Visibility mode')}
+                label={t('Document access mode')}
               >
                 <Text $weight="initial" $variation="600">
                   {linkModeTranslations[docLinkRole]}

src/frontend/apps/impress/src/i18n/translations.json

@@ -152,6 +152,8 @@
       "Version restored successfully": "Stumm assavet gant berzh",
       "Visibility": "Gwelusted",
       "Visibility mode": "Mod gwelusted",
+      "Document visibility": "Gwelusted an teul",
+      "Document access mode": "Mod aotreet an teul",
       "Warning": "Diwallit",
       "Why you can't edit the document?": "Perak ne c'hellit ket aozañ ar restr?",
       "Write": "Skrivañ"
@@ -354,6 +356,8 @@
       "Version restored successfully": "Version erfolgreich wiederhergestellt",
       "Visibility": "Sichtbarkeit",
       "Visibility mode": "Sichtbarkeitseinstellungen",
+      "Document visibility": "Dokumentensichtbarkeit",
+      "Document access mode": "Dokumentenzugriffsmodus",
       "Warning": "Warnung",
       "Why you can't edit the document?": "Warum können Sie dieses Dokument nicht bearbeiten?",
       "Write": "Schreiben",
@@ -561,6 +565,8 @@
       "Version restored successfully": "Versión restaurada con éxito",
       "Visibility": "Visibilidad",
       "Visibility mode": "Modo de visibilidad",
+      "Document visibility": "Visibilidad del documento",
+      "Document access mode": "Modo de acceso al documento",
       "Warning": "Aviso",
       "Write": "Escribe",
       "You are the sole owner of this group, make another member the group owner before you can change your own role or be removed from your document.": "Eres el único propietario de este grupo, haz que otro miembro sea el propietario del grupo para poder cambiar tu propio rol o ser eliminado del documento.",
@@ -792,6 +798,8 @@
       "Version restored successfully": "Version restaurée avec succès",
       "Visibility": "Visibilité",
       "Visibility mode": "Mode de visibilité",
+      "Document visibility": "Visibilité du document",
+      "Document access mode": "Mode d'accès au document",
       "Warning": "Attention",
       "Why you can't edit the document?": "Pourquoi vous ne pouvez pas modifier le document ?",
       "Write": "Écrire",
@@ -951,6 +959,8 @@
       "Version restored successfully": "Revisione ripristinata correttamente",
       "Visibility": "Visibilità",
       "Visibility mode": "Modalità visibilità",
+      "Document visibility": "Visibilità del documento",
+      "Document access mode": "Modalità di accesso al documento",
       "Warning": "Attenzione",
       "Write": "Scrivi",
       "You are the sole owner of this group, make another member the group owner before you can change your own role or be removed from your document.": "Sei l'unico proprietario di questo gruppo, devi nominare proprietario un altro membro del gruppo prima di poter cambiare il proprio ruolo o di essere rimosso dal documento.",
@@ -1128,6 +1138,8 @@
       "Version restored successfully": "Versie teruggezet",
       "Visibility": "Zichtbaarheid",
       "Visibility mode": "Zichtbaarheid modus",
+      "Document visibility": "Document zichtbaarheid",
+      "Document access mode": "Document toegangsmodus",
       "Warning": "Waarschuwing",
       "Write": "Schrijf",
       "You are the sole owner of this group, make another member the group owner before you can change your own role or be removed from your document.": "U bent de enige eigenaar van deze groep, maak een ander lid de groepseigenaar voordat u uw eigen rol kunt wijzigen of kan worden verwijderd van het document.",
@@ -1415,6 +1427,8 @@
       "Version restored successfully": "已成功还原版本",
       "Visibility": "可见性",
       "Visibility mode": "可见模式",
+      "Document visibility": "文档可见性",
+      "Document access mode": "文档访问模式",
       "Warning": "警告",
       "Write": "写入",
       "You are the sole owner of this group, make another member the group owner before you can change your own role or be removed from your document.": "您是当前群组唯一所有者，需先指定另一管理员，才能更改自身角色或退出文档。",