UI: Improve accessibility

.changeset/dull-gorillas-run.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Improve accessibility

packages/openapi/src/render/operation/api-example.tsx

@@ -228,11 +228,7 @@ function ResponseTabs({
 
   return (
     <renderer.Responses items={codes}>
-      {codes.map((code) => (
-        <renderer.Response key={code} value={code}>
-          {renderResponse(code)}
-        </renderer.Response>
-      ))}
+      {codes.map((code) => renderResponse(code))}
     </renderer.Responses>
   );
 }

packages/ui/src/components/layout/theme-toggle.tsx

@@ -14,6 +14,12 @@ const itemVariants = cva('size-7 rounded-full p-1.5 text-fd-muted-foreground', {
   },
 });
 
+const full = [
+  ['light', Sun] as const,
+  ['dark', Moon] as const,
+  ['system', Airplay] as const,
+];
+
 export function ThemeToggle({
   className,
   mode = 'light-dark',
@@ -39,12 +45,21 @@ export function ThemeToggle({
     return (
       <button
         className={container}
+        aria-label={`Toggle Theme`}
         onClick={() => setTheme(value === 'light' ? 'dark' : 'light')}
         data-theme-toggle=""
         {...props}
       >
-        <Sun className={cn(itemVariants({ active: value === 'light' }))} />
-        <Moon className={cn(itemVariants({ active: value === 'dark' }))} />
+        {full.map(([key, Icon]) => {
+          if (key === 'system') return;
+
+          return (
+            <Icon
+              key={key}
+              className={cn(itemVariants({ active: value === key }))}
+            />
+          );
+        })}
       </button>
     );
   }
@@ -53,11 +68,7 @@ export function ThemeToggle({
 
   return (
     <div className={container} data-theme-toggle="" {...props}>
-      {[
-        ['light', Sun] as const,
-        ['dark', Moon] as const,
-        ['system', Airplay] as const,
-      ].map(([key, Icon]) => (
+      {full.map(([key, Icon]) => (
         <button
           key={key}
           aria-label={key}

packages/ui/src/layouts/home.tsx

@@ -1,9 +1,8 @@
-import type { HTMLAttributes } from 'react';
+import { Fragment, type HTMLAttributes } from 'react';
 import { type NavOptions, replaceOrDefault } from '@/layouts/shared';
 import { cn } from '@/utils/cn';
 import { getLinks, type BaseLayoutProps } from './shared';
 import { NavProvider, Title } from '@/components/layout/nav';
-import { NavigationMenuList } from '@/components/ui/navigation-menu';
 import {
   Navbar,
   NavbarLink,
@@ -91,14 +90,14 @@ function Header({
     <Navbar>
       <Title title={nav.title} url={nav.url} />
       {nav.children}
-      <NavigationMenuList className="flex flex-row items-center gap-2 max-sm:hidden">
+      <ul className="flex flex-row items-center gap-2 px-6 max-sm:hidden">
         {navItems
           .filter((item) => !isSecondary(item))
           .map((item, i) => (
             <NavbarLinkItem key={i} item={item} className="text-sm" />
           ))}
-      </NavigationMenuList>
-      <div className="flex flex-1 flex-row items-center justify-end lg:gap-1.5">
+      </ul>
+      <div className="flex flex-row items-center justify-end gap-1.5 flex-1">
         {enableSearch ? (
           <>
             <SearchToggle className="lg:hidden" hideIfDisabled />
@@ -110,10 +109,12 @@ function Header({
         ) : null}
         {!disableThemeSwitch ? <ThemeToggle className="max-lg:hidden" /> : null}
         {i18n ? (
-          <LanguageToggle className="-me-1.5 max-lg:hidden">
+          <LanguageToggle className="max-lg:hidden">
             <Languages className="size-5" />
           </LanguageToggle>
         ) : null}
+      </div>
+      <ul className="flex flex-row items-center">
         {navItems.filter(isSecondary).map((item, i) => (
           <NavbarLinkItem
             key={i}
@@ -123,6 +124,7 @@ function Header({
         ))}
         <Menu className="lg:hidden">
           <MenuTrigger
+            aria-label="Toggle Menu"
             className="group -me-2"
             enableHover={nav.enableHoverToOpen}
           >
@@ -150,7 +152,7 @@ function Header({
             </div>
           </MenuContent>
         </Menu>
-      </div>
+      </ul>
     </Navbar>
   );
 }
@@ -162,11 +164,12 @@ function NavbarLinkItem({
   item: LinkItemType;
   className?: string;
 }) {
-  if (item.type === 'custom') return <div {...props}>{item.children}</div>;
+  if (item.type === 'custom') return item.children;
 
   if (item.type === 'menu') {
     const children = item.items.map((child, j) => {
-      if (child.type === 'custom') return <div key={j}>{child.children}</div>;
+      if (child.type === 'custom')
+        return <Fragment key={j}>{child.children}</Fragment>;
 
       const { banner, footer, ...rest } = child.menu ?? {};
 

packages/ui/src/layouts/home/navbar.tsx

@@ -9,6 +9,7 @@ import {
   NavigationMenuContent,
   NavigationMenuItem,
   NavigationMenuLink,
+  NavigationMenuList,
   NavigationMenuTrigger,
   NavigationMenuViewport,
 } from '@/components/ui/navigation-menu';
@@ -40,9 +41,12 @@ export function Navbar(props: HTMLAttributes<HTMLElement>) {
           props.className,
         )}
       >
-        <nav className="flex h-14 w-full flex-row items-center gap-6 px-4 lg:h-12">
-          {props.children}
-        </nav>
+        <NavigationMenuList
+          className="flex h-14 w-full flex-row items-center px-4 lg:h-12"
+          asChild
+        >
+          <nav>{props.children}</nav>
+        </NavigationMenuList>
         <NavigationMenuViewport />
       </header>
     </NavigationMenu>