From 3e5e6d1a499bcaaa4303088495f10f0d4e57b9fa Mon Sep 17 00:00:00 2001
From: Appryll <nataliafabiano.dev@gmail.com>
Date: Tue, 3 Jun 2025 15:50:14 +0200
Subject: [PATCH] add role navigation and semantic list to left panel nav

---
 .../components/LefPanelTargetFilters.tsx      | 88 ++++++++++---------
 1 file changed, 45 insertions(+), 43 deletions(-)

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 3daca863bf..7c8ab58348 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
@@ -2,7 +2,7 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
-import { Box, BoxButton, Icon, Text } from '@/components';
+import { BoxButton, Icon, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { DocDefaultFilter } from '@/features/docs';
 import { useLeftPanelStore } from '@/features/left-panel';
@@ -47,48 +47,50 @@ export const LeftPanelTargetFilters = () => {
   };
 
   return (
-    <Box
-      $justify="center"
-      $padding={{ horizontal: 'sm' }}
-      $gap={spacingsTokens['2xs']}
-      className="--docs--left-panel-target-filters"
-    >
-      {defaultQueries.map((query) => {
-        const isActive = target === query.targetQuery;
+    <nav role="navigation" aria-label="Docs filters">
+      <ul
+        className="--docs--left-panel-target-filters"
+        style={{ listStyle: 'none', padding: 0, margin: 0 }}
+      >
+        {defaultQueries.map((query) => {
+          const isActive = target === query.targetQuery;
 
-        return (
-          <BoxButton
-            aria-label={query.label}
-            key={query.label}
-            onClick={() => onSelectQuery(query.targetQuery)}
-            $direction="row"
-            aria-selected={isActive}
-            $align="center"
-            $justify="flex-start"
-            $gap={spacingsTokens['xs']}
-            $radius={spacingsTokens['3xs']}
-            $padding={{ all: '2xs' }}
-            $css={css`
-              cursor: pointer;
-              background-color: ${isActive
-                ? colorsTokens['greyscale-100']
-                : undefined};
-              font-weight: ${isActive ? 700 : undefined};
-              &:hover {
-                background-color: ${colorsTokens['greyscale-100']};
-              }
-            `}
-          >
-            <Icon
-              $variation={isActive ? '1000' : '700'}
-              iconName={query.icon}
-            />
-            <Text $variation={isActive ? '1000' : '700'} $size="sm">
-              {query.label}
-            </Text>
-          </BoxButton>
-        );
-      })}
-    </Box>
+          return (
+            <li key={query.label}>
+              <BoxButton
+                aria-label={query.label}
+                onClick={() => onSelectQuery(query.targetQuery)}
+                $direction="row"
+                aria-selected={isActive}
+                $align="center"
+                $justify="flex-start"
+                $gap={spacingsTokens['xs']}
+                $radius={spacingsTokens['3xs']}
+                $padding={{ all: '2xs' }}
+                $css={css`
+                  width: 100%;
+                  cursor: pointer;
+                  background-color: ${isActive
+                    ? colorsTokens['greyscale-100']
+                    : undefined};
+                  font-weight: ${isActive ? 700 : undefined};
+                  &:hover {
+                    background-color: ${colorsTokens['greyscale-100']};
+                  }
+                `}
+              >
+                <Icon
+                  $variation={isActive ? '1000' : '700'}
+                  iconName={query.icon}
+                />
+                <Text $variation={isActive ? '1000' : '700'} $size="sm">
+                  {query.label}
+                </Text>
+              </BoxButton>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
   );
 };