✨(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>

Author: Ovgodd

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
 
 ### 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();
@@ -45,6 +47,8 @@ export const LeftPanel = () => {
  border-right: 1px solid ${colorsTokens['greyscale-200']};
  `}
  className="--docs--left-panel-desktop"
+ as="nav"
+ aria-label={t('Document sections')}
  >
  <Box
  $css={css`
@@ -77,6 +81,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>