✨(frontend) improve semantic structure and aria roles of leftpanel

use nav and appropriate aria attributes to enhance accessibility

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

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
+  - ♿ improve semantic structure and aria roles of leftpanel #1431
   - ♿ add default background to left panel for better accessibility #1423
 
 ### Fixed

src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx

@@ -49,8 +49,6 @@ export const LeftPanelTargetFilters = () => {
 
   return (
     <Box
-      as="nav"
-      aria-label={t('Document sections')}
       $justify="center"
       $padding={{ horizontal: 'sm' }}
       $gap={spacingsTokens['2xs']}

src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx

@@ -1,5 +1,6 @@
 import { usePathname } from 'next/navigation';
 import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { createGlobalStyle, css } from 'styled-components';
 
 import { Box, SeparatedSection } from '@/components';
@@ -22,6 +23,7 @@ const MobileLeftPanelStyle = createGlobalStyle`
 
 export const LeftPanel = () => {
   const { isDesktop } = useResponsiveStore();
+  const { t } = useTranslation();
 
   const { colorsTokens, spacingsTokens } = useCunninghamTheme();
   const { togglePanel, isPanelOpen } = useLeftPanelStore();
@@ -46,6 +48,8 @@ export const LeftPanel = () => {
             background-color: ${colorsTokens['greyscale-000']};
           `}
           className="--docs--left-panel-desktop"
+          as="nav"
+          aria-label={t('Document sections')}
         >
           <Box
             $css={css`
@@ -78,6 +82,8 @@ export const LeftPanel = () => {
           >
             <Box
               data-testid="left-panel-mobile"
+              as="nav"
+              aria-label={t('Document sections')}
               $css={css`
                 width: 100%;
                 justify-content: center;

src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx

@@ -24,8 +24,8 @@ export const LeftPanelFavorites = () => {
 
   return (
     <Box
-      as="nav"
-      aria-label={t('Pinned documents')}
+      as="section"
+      aria-labelledby="pinned-docs-title"
       className="--docs--left-panel-favorites"
     >
       <HorizontalSeparator $withPadding={false} />
@@ -41,6 +41,7 @@ export const LeftPanelFavorites = () => {
           $variation="700"
           $padding={{ horizontal: '3xs' }}
           $weight="700"
+          id="pinned-docs-title"
         >
           {t('Pinned documents')}
         </Text>