✨(frontend) update labels and shared document icon accessibility

remove aria-labels from decorative icons and add sr-only text to shared doc icon

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

Author: Ovgodd

CHANGELOG.md

@@ -26,6 +26,9 @@ and this project adheres to
   - ♿ improve semantic structure and aria roles of leftpanel #1431
   - ♿ add default background to left panel for better accessibility #1423
   - ♿ add h1 for SR on 40X pages and remove alt texts #1438
+  - ♿ update labels and shared document icon accessibility #1442
+
+
 ### Fixed
 
 - 🐛(backend) duplicate sub docs as root for reader users

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

@@ -102,17 +102,19 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
                   }
                 >
                   {dragMode && (
-                    <Icon
-                      $theme="greyscale"
-                      $variation="600"
-                      $size="14px"
-                      iconName={isPublic ? 'public' : 'vpn_lock'}
-                      aria-label={
-                        isPublic
+                    <>
+                      <Icon
+                        $theme="greyscale"
+                        $variation="600"
+                        $size="14px"
+                        iconName={isPublic ? 'public' : 'vpn_lock'}
+                      />
+                      <span className="sr-only">
+                        {isPublic
                           ? t('Accessible to anyone')
-                          : t('Accessible to authenticated users')
-                      }
-                    />
+                          : t('Accessible to authenticated users')}
+                      </span>
+                    </>
                   )}
                   {!dragMode && (
                     <Tooltip
@@ -131,12 +133,12 @@ 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')
-                          }
                         />
+                        <span className="sr-only">
+                          {isPublic
+                            ? t('Accessible to anyone')
+                            : t('Accessible to authenticated users')}
+                        </span>
                       </div>
                     </Tooltip>
                   )}