Skip to content

Commit

Permalink
Announce collapsible sections in the docs menu
Browse files Browse the repository at this point in the history
Signed-off-by: Damian Stasik <[email protected]>
  • Loading branch information
damianstasik committed Sep 5, 2024
1 parent 78cd3a4 commit b5cd236
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 6 deletions.
13 changes: 9 additions & 4 deletions frontend/src/components/TreeView/index.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
9 changes: 7 additions & 2 deletions frontend/src/routes/Provider/components/DocsMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand Down

0 comments on commit b5cd236

Please sign in to comment.