From 8ab21ef00d46220b2c989610217cab6d4c694960 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Wed, 24 Sep 2025 09:55:41 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20improve=20semantic=20stru?=
 =?UTF-8?q?cture=20and=20aria=20roles=20of=20leftpanel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

use nav and appropriate aria attributes to enhance accessibility

Signed-off-by: Cyril <c.gromoff@gmail.com>
---
 CHANGELOG.md                                                | 1 +
 .../left-panel/components/LefPanelTargetFilters.tsx         | 2 --
 .../src/features/left-panel/components/LeftPanel.tsx        | 6 ++++++
 .../features/left-panel/components/LeftPanelFavorites.tsx   | 5 +++--
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 57f6cd6a..0dfc5cda 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
index e55de21a..60377a38 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
+++ b/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']}
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
index 5d39d491..0d929bcd 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
+++ b/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;
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx
index e348cce7..d917394c 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx
+++ b/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>