From b5cd23604abe624bfddc832691b5c32184419124 Mon Sep 17 00:00:00 2001
From: Damian Stasik <920747+damianstasik@users.noreply.github.com>
Date: Thu, 5 Sep 2024 12:03:46 +0200
Subject: [PATCH] Announce collapsible sections in the docs menu

Signed-off-by: Damian Stasik <920747+damianstasik@users.noreply.github.com>
---
 frontend/src/components/TreeView/index.tsx          | 13 +++++++++----
 .../src/routes/Provider/components/DocsMenu.tsx     |  9 +++++++--
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/TreeView/index.tsx b/frontend/src/components/TreeView/index.tsx
index a08f298e..7d3899ea 100644
--- a/frontend/src/components/TreeView/index.tsx
+++ b/frontend/src/components/TreeView/index.tsx
@@ -1,13 +1,18 @@
 import clsx from "clsx";
-import { ReactNode } from "react";
+import { AriaAttributes, ReactNode } from "react";
 
-interface TreeViewProps {
+interface TreeViewProps extends Pick<AriaAttributes, "aria-labelledby"> {
   children: ReactNode;
   className?: string;
+  id?: string;
 }
 
-export function TreeView({ children, className }: TreeViewProps) {
-  return <ul className={clsx("flex flex-col", className)}>{children}</ul>;
+export function TreeView({ children, className, id, ...rest }: TreeViewProps) {
+  return (
+    <ul className={clsx("flex flex-col", className)} id={id} {...rest}>
+      {children}
+    </ul>
+  );
 }
 
 interface TreeViewItemProps {
diff --git a/frontend/src/routes/Provider/components/DocsMenu.tsx b/frontend/src/routes/Provider/components/DocsMenu.tsx
index 6593b80d..d8c47fe0 100644
--- a/frontend/src/routes/Provider/components/DocsMenu.tsx
+++ b/frontend/src/routes/Provider/components/DocsMenu.tsx
@@ -3,7 +3,7 @@ import { TreeView, TreeViewItem } from "@/components/TreeView";
 import { chevron } from "@/icons/chevron";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import clsx from "clsx";
-import { useState, useTransition } from "react";
+import { useId, useState, useTransition } from "react";
 import { To, useHref, useLinkClickHandler } from "react-router-dom";
 
 import { NestedItem, transformStructure } from "../docsSidebar";
@@ -55,12 +55,17 @@ function DocsTreeViewItem({
   const { lang } = useProviderParams();
   const [open, setOpen] = useState(isOpenByDefault);
   let button;
+  const listId = useId();
+  const buttonId = useId();
 
   if (item.items) {
     button = (
       <button
         className="flex gap-2 px-4 py-2 text-left text-inherit hover:bg-gray-100 dark:hover:bg-blue-900"
         onClick={() => setOpen(!open)}
+        aria-expanded={open}
+        aria-controls={open ? listId : undefined}
+        id={buttonId}
       >
         <Icon
           path={chevron}
@@ -86,7 +91,7 @@ function DocsTreeViewItem({
     <TreeViewItem nested={nested} className={nested ? "ml-2" : ""}>
       {button}
       {open && item.items && (
-        <TreeView className="ml-4">
+        <TreeView className="ml-4" id={listId} aria-labelledby={buttonId}>
           {item.items.map((subitem) => (
             <DocsTreeViewItem
               key={subitem.name}