♿(frontend) remove redundant aria-label on hidden icons and update tests

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to
   - ♿ add pdf outline property to enable bookmarks display #1368
   - ♿ hide decorative icons from assistive tech with aria-hidden #1404
   - ♿ remove redundant aria-label to avoid over-accessibility #1420
+  - ♿ remove redundant aria-label on hidden icons and update tests #1432
   - ♿ improve semantic structure and aria roles of leftpanel #1431
   - ♿ add default background to left panel for better accessibility #1423
 

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

@@ -117,7 +117,7 @@ test.describe('Document grid item options', () => {
     await page.getByText('push_pin').click();
 
     // Check is pinned
-    await expect(row.locator('[data-testid^="doc-pinned-"]')).toBeVisible();
+    await expect(row.getByTestId('doc-pinned-icon')).toBeVisible();
     const leftPanelFavorites = page.getByTestId('left-panel-favorites');
     await expect(leftPanelFavorites.getByText(docTitle)).toBeVisible();
 
@@ -126,7 +126,7 @@ test.describe('Document grid item options', () => {
     await page.getByText('Unpin').click();
 
     // Check is unpinned
-    await expect(row.locator('[data-testid^="doc-pinned-"]')).toBeHidden();
+    await expect(row.getByTestId('doc-pinned-icon')).toBeHidden();
     await expect(leftPanelFavorites.getByText(docTitle)).toBeHidden();
   });
 

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

@@ -75,15 +75,15 @@ test.describe('Doc Header', () => {
     // Check the tree
     const docTree = page.getByTestId('doc-tree');
     await expect(docTree.getByText('Hello Emoji World')).toBeVisible();
-    await expect(docTree.getByLabel('Document emoji icon')).toBeVisible();
-    await expect(docTree.getByLabel('Simple document icon')).toBeHidden();
+    await expect(docTree.getByTestId('doc-emoji-icon')).toBeVisible();
+    await expect(docTree.getByTestId('doc-simple-icon')).toBeHidden();
 
     await page.getByTestId('home-button').click();
 
     // Check the documents grid
     const gridRow = await getGridRow(page, 'Hello Emoji World');
-    await expect(gridRow.getByLabel('Document emoji icon')).toBeVisible();
-    await expect(gridRow.getByLabel('Simple document icon')).toBeHidden();
+    await expect(gridRow.getByTestId('doc-emoji-icon')).toBeVisible();
+    await expect(gridRow.getByTestId('doc-simple-icon')).toBeHidden();
   });
 
   test('it deletes the doc', async ({ page, browserName }) => {
@@ -456,7 +456,7 @@ test.describe('Doc Header', () => {
     const row = await getGridRow(page, docTitle);
 
     // Check is pinned
-    await expect(row.locator('[data-testid^="doc-pinned-"]')).toBeVisible();
+    await expect(row.getByTestId('doc-pinned-icon')).toBeVisible();
     const leftPanelFavorites = page.getByTestId('left-panel-favorites');
     await expect(leftPanelFavorites.getByText(docTitle)).toBeVisible();
 
@@ -475,7 +475,7 @@ test.describe('Doc Header', () => {
     await page.goto('/');
 
     // Check is unpinned
-    await expect(row.locator('[data-testid^="doc-pinned-"]')).toBeHidden();
+    await expect(row.getByTestId('doc-pinned-icon')).toBeHidden();
     await expect(leftPanelFavorites.getByText(docTitle)).toBeHidden();
   });
 

src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx

@@ -1,5 +1,3 @@
-import { useTranslation } from 'react-i18next';
-
 import { Text, TextType } from '@/components';
 
 type DocIconProps = TextType & {
@@ -15,8 +13,6 @@ export const DocIcon = ({
   $weight = '400',
   ...textProps
 }: DocIconProps) => {
-  const { t } = useTranslation();
-
   if (!emoji) {
     return <>{defaultIcon}</>;
   }
@@ -28,7 +24,7 @@ export const DocIcon = ({
       $variation={$variation}
       $weight={$weight}
       aria-hidden="true"
-      aria-label={t('Document emoji icon')}
+      data-testid="doc-emoji-icon"
     >
       {emoji}
     </Text>

src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx

@@ -66,7 +66,7 @@ export const SimpleDocItem = ({
         {isPinned ? (
           <PinnedDocumentIcon
             aria-hidden="true"
-            aria-label={t('Pin document icon')}
+            data-testid="doc-pinned-icon"
             color={colorsTokens['primary-500']}
           />
         ) : (
@@ -75,7 +75,7 @@ export const SimpleDocItem = ({
             defaultIcon={
               <SimpleFileIcon
                 aria-hidden="true"
-                aria-label={t('Simple document icon')}
+                data-testid="doc-simple-icon"
                 color={colorsTokens['primary-500']}
               />
             }