✨(frontend) hide decorative icons, label menus, avoid name duplicates

improves a11y by hiding decorative icons, labeling menus and deduping names

Signed-off-by: Cyril <[email protected]>

Author: Ovgodd

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to
   - #1349
   - #1271
   - #1341
+  - #1362
 
 ### Changed
 

src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts

@@ -201,7 +201,7 @@ test.describe('Document create member', () => {
     await page.getByLabel('Reader').click();
 
     const moreActions = userInvitation.getByRole('button', {
-      name: 'more_horiz',
+      name: 'Open invitation actions menu',
     });
     await moreActions.click();
 

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

@@ -227,6 +227,7 @@ export const DropdownMenu = ({
                       $theme="greyscale"
                       $variation={isDisabled ? '400' : '1000'}
                       iconName={option.icon}
+                      aria-hidden="true"
                     />
                   )}
                   <Text $variation={isDisabled ? '400' : '1000'}>
@@ -235,7 +236,12 @@ export const DropdownMenu = ({
                 </Box>
                 {(option.isSelected ||
                   selectedValues?.includes(option.value ?? '')) && (
-                  <Icon iconName="check" $size="20px" $theme="greyscale" />
+                  <Icon
+                    iconName="check"
+                    $size="20px"
+                    $theme="greyscale"
+                    aria-hidden="true"
+                  />
                 )}
               </BoxButton>
               {option.showSeparator && (

src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx

@@ -250,8 +250,9 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
             aria-label={t('Export the document')}
           />
         )}
-        <DropdownMenu options={options}>
+        <DropdownMenu options={options} label={t('Open the document options')}>
           <IconOptions
+            aria-hidden="true"
             isHorizontal
             $theme="primary"
             $padding={{ all: 'xs' }}
@@ -267,7 +268,6 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
                   `
                 : ''}
             `}
-            aria-label={t('Open the document options')}
           />
         </DropdownMenu>
       </Box>

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

@@ -118,8 +118,9 @@ export const DocShareInvitationItem = ({
               <DropdownMenu
                 data-testid="doc-share-invitation-more-actions"
                 options={moreActions}
+                label={t('Open invitation actions menu')}
               >
-                <IconOptions isHorizontal $variation="600" />
+                <IconOptions isHorizontal $variation="600" aria-hidden="true" />
               </DropdownMenu>
             )}
           </Box>
@@ -158,7 +159,12 @@ export const DocShareModalInviteUserRow = ({
             <Text $theme="primary" $variation="800">
               {t('Add')}
             </Text>
-            <Icon $theme="primary" $variation="800" iconName="add" />
+            <Icon
+              $theme="primary"
+              $variation="800"
+              iconName="add"
+              aria-hidden="true"
+            />
           </Box>
         }
       />

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx

@@ -155,6 +155,7 @@ export const DocTreeItemActions = ({
           options={options}
           isOpen={isOpen}
           onOpenChange={onOpenChange}
+          aria-label={t('Open document actions menu')}
         >
           <Icon
             onClick={(e) => {
@@ -166,6 +167,7 @@ export const DocTreeItemActions = ({
             variant="filled"
             $theme="primary"
             $variation="600"
+            aria-hidden="true"
           />
         </DropdownMenu>
         {doc.abilities.children_create && (

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocGridContentList.tsx

@@ -191,6 +191,7 @@ export const DraggableDocGridContentList = ({
             data-testid="drag-doc-overlay"
             $height="auto"
             role="alert"
+            aria-label={t('Drag  and drop status')}
           >
             <Text $size="xs" $variation="000" $weight="500">
               {overlayText}

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx

@@ -100,7 +100,7 @@ export const DocsGrid = ({
         )}
         {hasDocs && (
           <Box $gap="6px" $overflow="auto">
-            <Box role="grid">
+            <Box role="grid" aria-label={t('Documents grid')}>
               <Box role="rowgroup">
                 <Box
                   $direction="row"

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx

@@ -83,19 +83,23 @@ export const DocsGridActions = ({
 
   return (
     <>
-      <DropdownMenu options={options} label={menuLabel}>
+      <DropdownMenu
+        options={options}
+        label={menuLabel}
+        aria-label={t('More options')}
+      >
         <Icon
           data-testid={`docs-grid-actions-button-${doc.id}`}
           iconName="more_horiz"
           $theme="primary"
           $variation="600"
-          aria-label={t('More options')}
           $css={css`
             cursor: pointer;
             &:hover {
               opacity: 0.8;
             }
           `}
+          aria-hidden="true"
         />
       </DropdownMenu>
 

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx

@@ -95,6 +95,11 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
                       $variation="600"
                       $size="14px"
                       iconName={isPublic ? 'public' : 'vpn_lock'}
+                      aria-label={
+                        isPublic
+                          ? t('Accessible to anyone')
+                          : t('Accessible to authenticated users')
+                      }
                     />
                   )}
                   {!dragMode && (
@@ -114,6 +119,11 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
                           $variation="600"
                           $size="14px"
                           iconName={isPublic ? 'public' : 'vpn_lock'}
+                          aria-label={
+                            isPublic
+                              ? t('Accessible to anyone')
+                              : t('Accessible to authenticated users')
+                          }
                         />
                       </div>
                     </Tooltip>