navs

gitpod-io · Nov 11, 2023 · e8d3b3f · e8d3b3f
1 parent 711274c
commit e8d3b3f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/components/dashboard/src/components/WidePageWithSubmenu.tsx b/components/dashboard/src/components/WidePageWithSubmenu.tsx
@@ -10,6 +10,10 @@ import { cn } from "@podkit/lib/cn";
 import { SubmenuItem, SubmenuItemProps } from "./PageWithSubMenu";
 
 export interface PageWithSubMenuProps {
+    /**
+     * The name of the navigation menu, as read by screen readers.
+     */
+    navTitle?: string;
     subMenu: SubmenuItemProps[];
     children: React.ReactNode;
 }
@@ -19,7 +23,7 @@ export function WidePageWithSubMenu(p: PageWithSubMenuProps) {
         <div className="w-full">
             <div className={cn("app-container flex flex-col md:flex-row")}>
                 {/* TODO: extract into SubMenu component and show scrolling indicators */}
-                <div>
+                <nav aria-label={p.navTitle}>
                     <ul
                         className={classNames(
                             // Handle flipping between row and column layout
@@ -34,7 +38,7 @@ export function WidePageWithSubMenu(p: PageWithSubMenuProps) {
                             return <SubmenuItem title={e.title} link={e.link} key={e.title} icon={e.icon} />;
                         })}
                     </ul>
-                </div>
+                </nav>
                 <div className="md:ml-4 w-full pt-1 mb-40">
                     <Separator className="md:hidden" />
                     <div className="pt-4 md:pt-0">{p.children}</div>

diff --git a/components/dashboard/src/configurations/detail/ConfigurationDetailPage.tsx b/components/dashboard/src/configurations/detail/ConfigurationDetailPage.tsx
@@ -34,7 +34,7 @@ export function ConfigurationDetailPage({ children, configurationQuery, id }: Pa
                 pageDescription={data?.name ?? ""}
                 backLink="/configurations"
             />
-            <WidePageWithSubMenu subMenu={settingsMenu}>
+            <WidePageWithSubMenu subMenu={settingsMenu} navTitle="Configuration Settings">
                 {isLoading && <Loader2 className="animate-spin" />}
                 {error && (
                     <div className="gap-4">