From c24e2c80b698c6956183d2a32daefd268131be56 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 21 Mar 2026 15:32:23 +0100
Subject: [PATCH] fix(a11y): add missing ARIA attributes and landmark regions
 to docs (#535)

Patch fumadocs-ui to fix accessibility issues reported by amberhinds,
plus additional issues found via WCAG 2.1 audit:

Reported issues:
- #513: Add aria-label to docs navigation toggle button
- #514: Add aria-haspopup="dialog" and aria-label to search buttons
- #515: Fix close search button accessible name to include visible text
- #516: Add role="status" live region for screen reader search announcements
- #517: Change search suggestions from <button> to <a> links with role="option"
- #518: Add nav landmarks for sidebar, breadcrumbs, TOC, and pagination

Additional fixes found via audit:
- Theme toggle button: add aria-label="Toggle theme" (WCAG 4.1.2)
- Sidebar <aside>: add aria-label="Docs sidebar" (WCAG 4.1.2)
- Collapse sidebar button: dynamic label based on state (WCAG 4.1.2)
- Heading anchor link icons: add peer-focus-visible:opacity-100 (WCAG 2.4.7)
- Breadcrumbs: use <ol>/<li> structure, aria-hidden on separator SVGs (WCAG 1.3.1)
- Feedback textarea: add aria-label (WCAG 4.1.2)

Closes #513
Closes #514
Closes #515
Closes #516
Closes #517
Closes #518
---
 components/Feedback.tsx          |   1 +
 package.json                     |   7 +-
 patches/fumadocs-ui@14.7.7.patch | 192 +++++++++++++++++++++++++++++++
 pnpm-lock.yaml                   |   9 +-
 4 files changed, 205 insertions(+), 4 deletions(-)
 create mode 100644 patches/fumadocs-ui@14.7.7.patch

diff --git a/components/Feedback.tsx b/components/Feedback.tsx
index e1f7422..3532e70 100644
--- a/components/Feedback.tsx
+++ b/components/Feedback.tsx
@@ -122,6 +122,7 @@ export function Feedback() {
           <form className="flex flex-col gap-3" onSubmit={submit}>
             <textarea
               autoFocus
+              aria-label="Additional feedback"
               value={message}
               onChange={(e) => setMessage(e.target.value)}
               className="resize-none rounded-lg border border-fd-border bg-fd-secondary p-3 text-sm text-fd-secondary-foreground placeholder:text-fd-muted-foreground focus-visible:outline-none"
diff --git a/package.json b/package.json
index 99a65fb..7cfafb9 100644
--- a/package.json
+++ b/package.json
@@ -17,9 +17,9 @@
   "homepage": "https://www.librechat.ai",
   "dependencies": {
     "@glidejs/glide": "^3.6.0",
+    "@hookform/resolvers": "^3.3.4",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -69,8 +69,8 @@
     "@eslint/js": "^9",
     "@next/bundle-analyzer": "^15.1.4",
     "@next/eslint-plugin-next": "^15",
-    "@types/mdx": "^2.0.13",
     "@playwright/test": "^1.58.2",
+    "@types/mdx": "^2.0.13",
     "@types/node": "18.16.0",
     "@types/react": "^18.3.12",
     "autoprefixer": "^10.4.19",
@@ -103,6 +103,9 @@
       "diff": ">=5.2.2",
       "minimatch": ">=3.1.4",
       "serialize-javascript": ">=7.0.3"
+    },
+    "patchedDependencies": {
+      "fumadocs-ui@14.7.7": "patches/fumadocs-ui@14.7.7.patch"
     }
   },
   "nextBundleAnalysis": {
diff --git a/patches/fumadocs-ui@14.7.7.patch b/patches/fumadocs-ui@14.7.7.patch
new file mode 100644
index 0000000..f687bde
--- /dev/null
+++ b/patches/fumadocs-ui@14.7.7.patch
@@ -0,0 +1,192 @@
+diff --git a/dist/components/dialog/search.js b/dist/components/dialog/search.js
+index 862cb52de96b0cdea5ddc9aab1acf9ea54c66a9f..0e62869413b468297a50a4e8a2da4c73c756d63d 100644
+--- a/dist/components/dialog/search.js
++++ b/dist/components/dialog/search.js
+@@ -17,12 +17,25 @@ export function SearchDialog({ open, onOpenChange, footer, links = [], search, o
+         content: name,
+         url: link,
+     })), [links]);
+-    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, children: [_jsx(DialogOverlay, { className: "fixed inset-0 z-50 bg-black/30 backdrop-blur-sm data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in" }), _jsxs(DialogContent, { "aria-describedby": undefined, className: "fixed left-1/2 top-[10vh] z-50 w-[98vw] max-w-screen-sm origin-left -translate-x-1/2 rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-lg data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in", children: [_jsx(DialogTitle, { className: "hidden", children: text.search }), _jsxs("div", { className: "flex flex-row items-center gap-2 px-3", children: [_jsx(LoadingIndicator, { isLoading: isLoading ?? false }), _jsx("input", { value: search, onChange: (e) => {
++    const displayItems = props.results === 'empty' ? defaultItems : props.results;
++    const statusMessage = useMemo(() => {
++        if (props.results === 'empty' && defaultItems.length > 0) {
++            return `${defaultItems.length} suggestion${defaultItems.length === 1 ? '' : 's'} available. Use the up and down arrow keys to browse.`;
++        }
++        if (props.results !== 'empty' && props.results.length > 0) {
++            return `${props.results.length} result${props.results.length === 1 ? '' : 's'} available. Use the up and down arrow keys to browse.`;
++        }
++        if (props.results !== 'empty' && props.results.length === 0) {
++            return text.searchNoResult;
++        }
++        return '';
++    }, [props.results, defaultItems, text.searchNoResult]);
++    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, children: [_jsx(DialogOverlay, { className: "fixed inset-0 z-50 bg-black/30 backdrop-blur-sm data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in" }), _jsxs(DialogContent, { "aria-describedby": undefined, className: "fixed left-1/2 top-[10vh] z-50 w-[98vw] max-w-screen-sm origin-left -translate-x-1/2 rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-lg data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in", children: [_jsx(DialogTitle, { className: "hidden", children: text.search }), _jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", style: { position: 'absolute', width: '1px', height: '1px', padding: 0, margin: '-1px', overflow: 'hidden', clip: 'rect(0, 0, 0, 0)', whiteSpace: 'nowrap', borderWidth: 0 }, children: statusMessage }), _jsxs("div", { className: "flex flex-row items-center gap-2 px-3", children: [_jsx(LoadingIndicator, { isLoading: isLoading ?? false }), _jsx("input", { value: search, onChange: (e) => {
+                                     onSearchChange(e.target.value);
+-                                }, placeholder: text.search, className: "w-0 flex-1 bg-transparent py-3 text-base placeholder:text-fd-muted-foreground focus-visible:outline-none" }), _jsx("button", { type: "button", "aria-label": "Close Search", onClick: () => onOpenChange(false), className: cn(buttonVariants({
++                                }, placeholder: text.search, className: "w-0 flex-1 bg-transparent py-3 text-base placeholder:text-fd-muted-foreground focus-visible:outline-none" }), _jsx("button", { type: "button", "aria-label": "Close Search (Esc)", onClick: () => onOpenChange(false), className: cn(buttonVariants({
+                                     color: 'outline',
+                                     className: 'text-xs p-1.5',
+-                                })), children: "Esc" })] }), props.results !== 'empty' || defaultItems.length > 0 ? (_jsx(SearchResults, { items: props.results === 'empty' ? defaultItems : props.results, onSelect: () => onOpenChange(false) })) : null, footer ? (_jsx("div", { className: "mt-auto flex flex-col border-t p-3", children: footer })) : null] })] }));
++                                })), children: "Esc" })] }), props.results !== 'empty' || displayItems.length > 0 ? (_jsx(SearchResults, { items: displayItems, onSelect: () => onOpenChange(false) })) : null, footer ? (_jsx("div", { className: "mt-auto flex flex-col border-t p-3", children: footer })) : null] })] }));
+ }
+ const icons = {
+     text: _jsx(Text, { className: "size-4 text-fd-muted-foreground" }),
+@@ -69,21 +82,22 @@ function SearchResults({ items, onSelect, ...props }) {
+             window.removeEventListener('keydown', listener);
+         };
+     }, []);
+-    return (_jsxs("div", { ...props, className: cn('flex max-h-[460px] flex-col overflow-y-auto border-t p-2', props.className), children: [items.length === 0 ? (_jsx("div", { className: "py-12 text-center text-sm", children: text.searchNoResult })) : null, items.map((item) => (_jsxs(CommandItem, { value: item.id, active: active, onActiveChange: setActive, onClick: () => {
++    return (_jsxs("div", { ...props, role: "listbox", className: cn('flex max-h-[460px] flex-col overflow-y-auto border-t p-2', props.className), children: [items.length === 0 ? (_jsx("div", { className: "py-12 text-center text-sm", children: text.searchNoResult })) : null, items.map((item) => (_jsxs(CommandItem, { value: item.id, active: active, onActiveChange: setActive, href: item.url, onClick: (e) => {
++                    e.preventDefault();
+                     onOpen(item.url);
+                 }, children: [item.type !== 'page' ? (_jsx("div", { role: "none", className: "ms-2 h-full min-h-10 w-px bg-fd-border" })) : null, icons[item.type], _jsx("p", { className: "w-0 flex-1 truncate", children: item.content })] }, item.id)))] }));
+ }
+ function LoadingIndicator({ isLoading }) {
+     return (_jsxs("div", { className: "relative size-4", children: [_jsx(Loader2, { className: cn('absolute size-full animate-spin text-fd-primary transition-opacity', !isLoading && 'opacity-0') }), _jsx(SearchIcon, { className: cn('absolute size-full text-fd-muted-foreground transition-opacity', isLoading && 'opacity-0') })] }));
+ }
+-function CommandItem({ active, onActiveChange, value, ...props }) {
+-    return (_jsx("button", { ref: useCallback((element) => {
++function CommandItem({ active, onActiveChange, value, href, ...props }) {
++    return (_jsx("a", { ref: useCallback((element) => {
+             if (active === value && element) {
+                 element.scrollIntoView({
+                     block: 'nearest',
+                 });
+             }
+-        }, [active, value]), type: "button", "aria-selected": active === value, onPointerMove: () => onActiveChange(value), ...props, className: cn('flex min-h-10 select-none flex-row items-center gap-2.5 rounded-lg px-2 text-start text-sm', active === value && 'bg-fd-accent text-fd-accent-foreground', props.className), children: props.children }));
++        }, [active, value]), href: href, role: "option", "aria-selected": active === value, onPointerMove: () => onActiveChange(value), ...props, className: cn('flex min-h-10 select-none flex-row items-center gap-2.5 rounded-lg px-2 text-start text-sm no-underline', active === value && 'bg-fd-accent text-fd-accent-foreground', props.className), children: props.children }));
+ }
+ const itemVariants = cva('rounded-md border px-2 py-0.5 text-xs font-medium text-fd-muted-foreground transition-colors', {
+     variants: {
+diff --git a/dist/components/heading.js b/dist/components/heading.js
+index 49bc76177f8edf726f97376c65a2b76aba5ced8f..075526ee809843633c33f597ad2a9c2c48b70de0 100644
+--- a/dist/components/heading.js
++++ b/dist/components/heading.js
+@@ -5,5 +5,5 @@ export function Heading({ as, className, ...props }) {
+     const As = as ?? 'h1';
+     if (!props.id)
+         return _jsx(As, { className: className, ...props });
+-    return (_jsxs(As, { className: cn('flex scroll-m-28 flex-row items-center gap-2', className), ...props, children: [_jsx("a", { "data-card": "", href: `#${props.id}`, className: "peer", children: props.children }), _jsx(Link, { "aria-label": "Link to section", className: "size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" })] }));
++    return (_jsxs(As, { className: cn('flex scroll-m-28 flex-row items-center gap-2', className), ...props, children: [_jsx("a", { "data-card": "", href: `#${props.id}`, className: "peer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring rounded", children: props.children }), _jsx(Link, { "aria-label": "Link to section", className: "size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100 peer-focus-visible:opacity-100" })] }));
+ }
+diff --git a/dist/components/layout/search-toggle.js b/dist/components/layout/search-toggle.js
+index 81c8ad71277dc688710bcddb368e714e0bfce172..ac1b5517f743fba17026cf0aab787ef247783fdf 100644
+--- a/dist/components/layout/search-toggle.js
++++ b/dist/components/layout/search-toggle.js
+@@ -12,7 +12,7 @@ export function SearchToggle({ hideIfDisabled, ...props }) {
+     return (_jsx("button", { type: "button", className: cn(buttonVariants({
+             size: 'icon',
+             color: 'ghost',
+-        }), props.className), "data-search": "", "aria-label": "Open Search", onClick: () => {
++        }), props.className), "data-search": "", "aria-label": "Open Search", "aria-haspopup": "dialog", onClick: () => {
+             setOpenSearch(true);
+         }, children: _jsx(SearchIcon, {}) }));
+ }
+@@ -21,7 +21,7 @@ export function LargeSearchToggle({ hideIfDisabled, ...props }) {
+     const { text } = useI18n();
+     if (hideIfDisabled && !enabled)
+         return null;
+-    return (_jsxs("button", { type: "button", "data-search-full": "", ...props, className: cn('inline-flex items-center gap-2 rounded-full border bg-fd-secondary/50 p-1.5 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground', props.className), onClick: () => {
++    return (_jsxs("button", { type: "button", "data-search-full": "", ...props, "aria-haspopup": "dialog", "aria-label": "Search", className: cn('inline-flex items-center gap-2 rounded-full border bg-fd-secondary/50 p-1.5 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground', props.className), onClick: () => {
+             setOpenSearch(true);
+         }, children: [_jsx(SearchIcon, { className: "ms-1 size-4" }), text.search, _jsx("div", { className: "ms-auto inline-flex gap-0.5", children: hotKey.map((k, i) => (_jsx("kbd", { className: "rounded-md border bg-fd-background px-1.5", children: k.display }, i))) })] }));
+ }
+diff --git a/dist/components/layout/theme-toggle.js b/dist/components/layout/theme-toggle.js
+index f2a453e1e080471f918c10622444d8923a1977fc..a5a961d828f0f28402ac20921c555cc6269c43bb 100644
+--- a/dist/components/layout/theme-toggle.js
++++ b/dist/components/layout/theme-toggle.js
+@@ -22,7 +22,7 @@ export function ThemeToggle({ className, mode = 'light-dark', ...props }) {
+     const container = cn('inline-flex items-center rounded-full border p-[3px]', className);
+     if (mode === 'light-dark') {
+         const value = mounted ? resolvedTheme : null;
+-        return (_jsxs("button", { className: container, onClick: () => setTheme(value === 'light' ? 'dark' : 'light'), "data-theme-toggle": "", ...props, children: [_jsx(Sun, { className: cn(itemVariants({ active: value === 'light' })) }), _jsx(Moon, { className: cn(itemVariants({ active: value === 'dark' })) })] }));
++        return (_jsxs("button", { className: container, "aria-label": "Toggle theme", onClick: () => setTheme(value === 'light' ? 'dark' : 'light'), "data-theme-toggle": "", ...props, children: [_jsx(Sun, { className: cn(itemVariants({ active: value === 'light' })) }), _jsx(Moon, { className: cn(itemVariants({ active: value === 'dark' })) })] }));
+     }
+     const value = mounted ? theme : null;
+     return (_jsx("div", { className: container, "data-theme-toggle": "", ...props, children: [
+diff --git a/dist/components/layout/toc.js b/dist/components/layout/toc.js
+index ca2c0deacb9c038162b5e49483d879d21cf54a58..66e89f74e3a3c509962d5431377e2ca74cb93c4f 100644
+--- a/dist/components/layout/toc.js
++++ b/dist/components/layout/toc.js
+@@ -11,7 +11,7 @@ import { ChevronRight, Text } from 'lucide-react';
+ import { usePageStyles } from '../../contexts/layout';
+ export function Toc(props) {
+     const { toc } = usePageStyles();
+-    return (_jsx("div", { id: "nd-toc", ...props, className: cn('sticky top-fd-layout-top h-[var(--fd-toc-height)] pb-2 pt-12', toc, props.className), style: {
++    return (_jsx("nav", { id: "nd-toc", "aria-label": "Table of Contents", ...props, className: cn('sticky top-fd-layout-top h-[var(--fd-toc-height)] pb-2 pt-12', toc, props.className), style: {
+             ...props.style,
+             '--fd-toc-height': 'calc(100dvh - var(--fd-banner-height) - var(--fd-nav-height))',
+         }, children: _jsx("div", { className: "flex h-full w-[var(--fd-toc-width)] max-w-full flex-col gap-3 pe-4", children: props.children }) }));
+diff --git a/dist/layouts/docs/sidebar.js b/dist/layouts/docs/sidebar.js
+index e88fea6a38c601f51646dc3668e934007c8c0986..1a8bfeabd7d861a2ec59e546a7927abc56bf7e55 100644
+--- a/dist/layouts/docs/sidebar.js
++++ b/dist/layouts/docs/sidebar.js
+@@ -62,7 +62,7 @@ export function Sidebar({ defaultOpenLevel = 0, prefetch = true, inner, ...props
+             prefetch,
+         };
+     }, [defaultOpenLevel, prefetch]);
+-    return (_jsx(Context.Provider, { value: context, children: _jsx(Base.SidebarList, { id: "nd-sidebar", blockScrollingWidth: 768, ...props, className: cn('fixed top-fd-layout-top z-30 bg-fd-card text-sm md:sticky md:h-[var(--fd-sidebar-height)]', 'max-md:inset-x-0 max-md:bottom-0 max-md:bg-fd-background/80 max-md:text-[15px] max-md:backdrop-blur-lg max-md:data-[open=false]:invisible', props.className), style: {
++    return (_jsx(Context.Provider, { value: context, children: _jsx(Base.SidebarList, { id: "nd-sidebar", "aria-label": "Docs sidebar", blockScrollingWidth: 768, ...props, className: cn('fixed top-fd-layout-top z-30 bg-fd-card text-sm md:sticky md:h-[var(--fd-sidebar-height)]', 'max-md:inset-x-0 max-md:bottom-0 max-md:bg-fd-background/80 max-md:text-[15px] max-md:backdrop-blur-lg max-md:data-[open=false]:invisible', props.className), style: {
+                 ...props.style,
+                 '--fd-sidebar-height': 'calc(100dvh - var(--fd-banner-height) - var(--fd-nav-height))',
+             }, children: _jsx("div", { ...inner, className: cn('flex size-full max-w-full flex-col pt-2 md:ms-auto md:w-[var(--fd-sidebar-width)] md:border-e md:pt-4', inner?.className), children: props.children }) }) }));
+@@ -119,7 +119,7 @@ export function SidebarFolderContent(props) {
+ }
+ export function SidebarCollapseTrigger(props) {
+     const { collapsed, setCollapsed } = useSidebar();
+-    return (_jsx("button", { type: "button", "aria-label": "Collapse Sidebar", "data-collapsed": collapsed, ...props, className: cn(buttonVariants({
++    return (_jsx("button", { type: "button", "aria-label": collapsed ? "Expand Sidebar" : "Collapse Sidebar", "data-collapsed": collapsed, ...props, className: cn(buttonVariants({
+             color: 'ghost',
+             size: 'icon',
+         }), props.className), onClick: () => {
+@@ -143,7 +143,7 @@ function useInternalContext() {
+  */
+ export function SidebarPageTree(props) {
+     const { root } = useTreeContext();
+-    return useMemo(() => {
++    return _jsx("nav", { "aria-label": "Docs", children: useMemo(() => {
+         const { Separator, Item, Folder } = props.components ?? {};
+         function renderSidebarList(items, level) {
+             return items.map((item, i) => {
+@@ -165,7 +165,7 @@ export function SidebarPageTree(props) {
+             });
+         }
+         return renderSidebarList(root.children, 1);
+-    }, [root, props.components]);
++    }, [root, props.components]) });
+ }
+ function PageTreeFolder({ item, children, level, }) {
+     const { defaultOpenLevel } = useInternalContext();
+diff --git a/dist/layouts/docs.js b/dist/layouts/docs.js
+index 1157b228b4cbed85c9e23d292f20ef1694349ab7..eaefa72dd598b0118d54ce29d37dd3654dfd10d2 100644
+--- a/dist/layouts/docs.js
++++ b/dist/layouts/docs.js
+@@ -44,7 +44,7 @@ function SidebarHeaderItems({ links, ...props }) {
+     const isEmpty = !props.title && !props.children && links.length === 0;
+     if (isEmpty)
+         return null;
+-    return (_jsxs("div", { className: "flex flex-row items-center max-md:hidden", children: [props.title ? (_jsx(Link, { href: props.url ?? '/', className: "inline-flex items-center gap-2.5 py-1 font-medium", children: props.title })) : null, props.children, links.length > 0 ? (_jsx(LinksMenu, { items: links, className: cn(buttonVariants({
++    return (_jsxs("div", { className: "flex flex-row items-center max-md:hidden", children: [props.title ? (_jsx(Link, { href: props.url ?? '/', className: "inline-flex items-center gap-2.5 py-1 font-medium", children: props.title })) : null, props.children, links.length > 0 ? (_jsx(LinksMenu, { items: links, "aria-label": "LibreChat website navigation", className: cn(buttonVariants({
+                     size: 'icon',
+                     color: 'ghost',
+                 }), 'ms-auto'), children: _jsx(MoreHorizontal, {}) })) : null] }));
+diff --git a/dist/page.client.js b/dist/page.client.js
+index 9531d4ce91915ae3c2f4141d656a592a6d48bd88..c1d3d6ba1e79be23f463e894b3970fe811bf43f6 100644
+--- a/dist/page.client.js
++++ b/dist/page.client.js
+@@ -76,7 +76,7 @@ export function Footer({ items }) {
+             next: list[idx + 1],
+         };
+     }, [items, pathname, root]);
+-    return (_jsxs("div", { className: "grid grid-cols-2 gap-4 pb-6", children: [previous ? (_jsxs(Link, { href: previous.url, className: cn(itemVariants()), children: [_jsxs("div", { className: cn(itemLabel()), children: [_jsx(ChevronLeft, { className: "-ms-1 size-4 shrink-0 rtl:rotate-180" }), _jsx("p", { children: text.previousPage })] }), _jsx("p", { className: "font-medium", children: previous.name })] })) : null, next ? (_jsxs(Link, { href: next.url, className: cn(itemVariants({ className: 'col-start-2 text-end' })), children: [_jsxs("div", { className: cn(itemLabel({ className: 'flex-row-reverse' })), children: [_jsx(ChevronRight, { className: "-me-1 size-4 shrink-0 rtl:rotate-180" }), _jsx("p", { children: text.nextPage })] }), _jsx("p", { className: "font-medium", children: next.name })] })) : null] }));
++    return (_jsx("nav", { "aria-label": "Pagination", children: _jsxs("div", { className: "grid grid-cols-2 gap-4 pb-6", children: [previous ? (_jsxs(Link, { href: previous.url, className: cn(itemVariants()), children: [_jsxs("div", { className: cn(itemLabel()), children: [_jsx(ChevronLeft, { className: "-ms-1 size-4 shrink-0 rtl:rotate-180" }), _jsx("p", { children: text.previousPage })] }), _jsx("p", { className: "font-medium", children: previous.name })] })) : null, next ? (_jsxs(Link, { href: next.url, className: cn(itemVariants({ className: 'col-start-2 text-end' })), children: [_jsxs("div", { className: cn(itemLabel({ className: 'flex-row-reverse' })), children: [_jsx(ChevronRight, { className: "-me-1 size-4 shrink-0 rtl:rotate-180" }), _jsx("p", { children: text.nextPage })] }), _jsx("p", { className: "font-medium", children: next.name })] })) : null] }) }));
+ }
+ export function Breadcrumb(options) {
+     const path = useTreePath();
+@@ -89,5 +89,5 @@ export function Breadcrumb(options) {
+     }, [options, path, root]);
+     if (items.length === 0)
+         return null;
+-    return (_jsx("div", { className: "-mb-3 flex flex-row items-center gap-1 text-sm font-medium text-fd-muted-foreground", children: items.map((item, i) => (_jsxs(Fragment, { children: [i !== 0 && (_jsx(ChevronRight, { className: "size-4 shrink-0 rtl:rotate-180" })), item.url ? (_jsx(Link, { href: item.url, className: "truncate hover:text-fd-accent-foreground", children: item.name })) : (_jsx("span", { className: "truncate", children: item.name }))] }, i))) }));
++    return (_jsx("nav", { "aria-label": "Breadcrumbs", children: _jsx("ol", { className: "-mb-3 flex flex-row items-center gap-1 text-sm font-medium text-fd-muted-foreground", children: items.map((item, i) => (_jsx("li", { className: "inline-flex items-center gap-1", children: _jsxs(Fragment, { children: [i !== 0 && (_jsx(ChevronRight, { "aria-hidden": "true", className: "size-4 shrink-0 rtl:rotate-180" })), item.url ? (_jsx(Link, { href: item.url, className: "truncate hover:text-fd-accent-foreground", children: item.name })) : (_jsx("span", { className: "truncate", children: item.name }))] }) }, i))) }) }));
+ }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3a09b1a..3c0b5a4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,6 +12,11 @@ overrides:
   minimatch: '>=3.1.4'
   serialize-javascript: '>=7.0.3'
 
+patchedDependencies:
+  fumadocs-ui@14.7.7:
+    hash: eug5cntrgxatea7cgl6ypztoau
+    path: patches/fumadocs-ui@14.7.7.patch
+
 importers:
 
   .:
@@ -96,7 +101,7 @@ importers:
         version: 11.10.1(fumadocs-core@14.7.7(@types/react@18.3.27)(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
       fumadocs-ui:
         specifier: 14.7.7
-        version: 14.7.7(@types/react@18.3.27)(fumadocs-core@14.7.7(@types/react@18.3.27)(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.18(yaml@2.8.2))
+        version: 14.7.7(patch_hash=eug5cntrgxatea7cgl6ypztoau)(@types/react@18.3.27)(fumadocs-core@14.7.7(@types/react@18.3.27)(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.18(yaml@2.8.2))
       geist:
         specifier: ^1.3.1
         version: 1.5.1(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
@@ -6422,7 +6427,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  fumadocs-ui@14.7.7(@types/react@18.3.27)(fumadocs-core@14.7.7(@types/react@18.3.27)(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.18(yaml@2.8.2)):
+  fumadocs-ui@14.7.7(patch_hash=eug5cntrgxatea7cgl6ypztoau)(@types/react@18.3.27)(fumadocs-core@14.7.7(@types/react@18.3.27)(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.18(yaml@2.8.2)):
     dependencies:
       '@radix-ui/react-accordion': 1.2.12(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-collapsible': 1.1.12(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)