From a9b87e3ec6f58bafb399485f7fcf9a449661354d Mon Sep 17 00:00:00 2001
From: Pedro Menezes <pmenezes@cloudflare.com>
Date: Fri, 19 Jun 2026 17:23:48 +0100
Subject: [PATCH 1/2] fix: improve accessibility across components and docs

---
 .changeset/accessibility-improvements.md      |  38 ++
 .../src/components/KumoMenuIcon.tsx           |  40 +-
 .../src/components/SearchDialog.tsx           |  26 +-
 .../src/components/SidebarNav.tsx             | 518 +++++++++++++-----
 .../src/components/ThemeToggle.tsx            |   8 +-
 .../src/components/demos/AutocompleteDemo.tsx |  39 +-
 .../src/components/demos/BreadcrumbsDemo.tsx  |  20 +
 .../components/demos/Chart/ChartCard.astro    |   2 +-
 .../demos/Chart/SankeyChartDemo.tsx           |   4 +-
 .../src/components/demos/ComboboxDemo.tsx     |  97 +++-
 .../src/components/demos/DialogDemo.tsx       |   1 +
 .../src/components/demos/HomeGrid.tsx         |  61 ++-
 .../src/components/demos/KumoPressDemo.tsx    |  27 +-
 .../src/components/demos/PageHeaderDemo.tsx   |  24 +-
 .../components/demos/SensitiveInputDemo.tsx   |  23 +
 .../src/components/demos/SwitchDemo.tsx       |  22 +-
 .../src/components/demos/TableDemo.tsx        |  18 +-
 .../src/components/demos/TabsDemo.tsx         |  10 +-
 .../src/components/docs/StickyDocHeader.tsx   |  12 +-
 .../src/components/docs/TableOfContents.tsx   |  11 +-
 .../src/layouts/MainLayout.astro              |  42 ++
 .../src/pages/blocks/page-header.mdx          |   4 +-
 .../src/pages/charts/custom.mdx               |  21 +
 .../src/pages/charts/sankey.astro             |  35 +-
 .../src/pages/charts/timeseries.mdx           |  74 ++-
 .../src/pages/components/autocomplete.mdx     |  36 +-
 .../src/pages/components/banner.mdx           |  48 ++
 .../src/pages/components/breadcrumbs.mdx      |  14 +
 .../src/pages/components/button.mdx           |  10 +-
 .../src/pages/components/clipboard-text.mdx   |  47 ++
 .../src/pages/components/combobox.mdx         |  93 +++-
 .../src/pages/components/command-palette.mdx  |  54 +-
 .../src/pages/components/sensitive-input.mdx  |  54 ++
 .../src/pages/components/switch.mdx           |  29 +-
 .../src/pages/components/table.mdx            |  52 +-
 .../src/pages/components/tooltip.mdx          |  12 +-
 .../scripts/component-registry/metadata.ts    |  58 ++
 .../delete-resource/delete-resource.test.tsx  |  36 ++
 .../delete-resource/delete-resource.tsx       |  15 +-
 .../autocomplete/autocomplete.test.tsx        | 123 ++++-
 .../components/autocomplete/autocomplete.tsx  | 122 ++++-
 .../breadcrumbs/breadcrumbs.test.tsx          | 161 ++++++
 .../components/breadcrumbs/breadcrumbs.tsx    | 154 +++++-
 .../kumo/src/components/breadcrumbs/index.ts  |   3 +
 .../src/components/button/button.test.tsx     |  98 +++-
 .../kumo/src/components/button/button.tsx     |  91 ++-
 .../kumo/src/components/chart/EChart.test.tsx | 191 +++++++
 packages/kumo/src/components/chart/EChart.tsx | 197 ++++++-
 .../kumo/src/components/chart/Legend.test.tsx | 129 +++++
 packages/kumo/src/components/chart/Legend.tsx | 115 ++--
 .../src/components/chart/SankeyChart.test.tsx |  97 +++-
 .../kumo/src/components/chart/SankeyChart.tsx | 148 ++++-
 .../components/chart/TimeseriesChart.test.tsx | 143 +++++
 .../src/components/chart/TimeseriesChart.tsx  | 279 +++++++++-
 packages/kumo/src/components/chart/index.ts   |   1 +
 .../src/components/checkbox/checkbox.test.tsx |  34 ++
 .../kumo/src/components/checkbox/checkbox.tsx |  32 +-
 .../src/components/combobox/combobox.test.tsx | 240 +++++++-
 .../kumo/src/components/combobox/combobox.tsx | 236 ++++++--
 .../command-palette/command-palette.test.tsx  |  56 +-
 .../command-palette/command-palette.tsx       |  80 +--
 .../src/components/command-palette/index.ts   |   2 +
 .../src/components/command-palette/types.ts   |  50 +-
 .../src/components/input-group/context.ts     |   2 +
 .../input-group/input-group-input.tsx         |  34 +-
 .../input-group/input-group.test.tsx          |  40 +-
 .../components/input-group/input-group.tsx    |  81 ++-
 .../kumo/src/components/input/input.test.tsx  |   7 +
 .../kumo/src/components/link/link.test.tsx    |   4 +-
 .../kumo/src/components/radio/radio.test.tsx  |  20 +-
 packages/kumo/src/components/radio/radio.tsx  |  21 +-
 .../src/components/select/select.test.tsx     |  40 ++
 .../kumo/src/components/select/select.tsx     |  60 +-
 .../src/components/sensitive-input/index.ts   |   1 +
 .../sensitive-input/sensitive-input.test.tsx  | 259 ++++++++-
 .../sensitive-input/sensitive-input.tsx       | 411 +++++++++-----
 .../src/components/sidebar/sidebar.test.tsx   |   2 +
 .../kumo/src/components/sidebar/sidebar.tsx   |  12 +-
 .../src/components/switch/switch.test.tsx     | 144 +++++
 .../kumo/src/components/switch/switch.tsx     |  70 ++-
 .../table-of-contents.test.tsx                |   5 +-
 .../kumo/src/components/table/table.test.tsx  |  84 +++
 packages/kumo/src/components/table/table.tsx  |  56 +-
 .../kumo/src/components/tabs/tabs.test.tsx    | 102 ++++
 packages/kumo/src/components/tabs/tabs.tsx    |  13 +-
 packages/kumo/src/index.ts                    |  14 +-
 packages/kumo/src/styles/kumo-binding.css     |  24 +
 packages/kumo/src/styles/kumo.css             |  23 +
 88 files changed, 5304 insertions(+), 742 deletions(-)
 create mode 100644 .changeset/accessibility-improvements.md
 create mode 100644 packages/kumo/src/blocks/delete-resource/delete-resource.test.tsx
 create mode 100644 packages/kumo/src/components/breadcrumbs/breadcrumbs.test.tsx
 create mode 100644 packages/kumo/src/components/chart/EChart.test.tsx
 create mode 100644 packages/kumo/src/components/chart/Legend.test.tsx
 create mode 100644 packages/kumo/src/components/chart/TimeseriesChart.test.tsx
 create mode 100644 packages/kumo/src/components/checkbox/checkbox.test.tsx
 create mode 100644 packages/kumo/src/components/switch/switch.test.tsx
 create mode 100644 packages/kumo/src/components/tabs/tabs.test.tsx

diff --git a/.changeset/accessibility-improvements.md b/.changeset/accessibility-improvements.md
new file mode 100644
index 0000000000..5f1ec4c848
--- /dev/null
+++ b/.changeset/accessibility-improvements.md
@@ -0,0 +1,38 @@
+---
+"@cloudflare/kumo": minor
+---
+
+Improve accessibility across Kumo components, charts, and docs.
+
+### Components
+
+- Improve CommandPalette screen reader context with a dialog title, busy, loading, and empty-state announcements, and localizable labels for status and action text.
+- Improve SensitiveInput semantics with localizable labels and status text, warnings for missing or generic primary names, clearer warning and error text, compact hit areas that do not change the visual layout where possible, and decorative icons that are hidden from assistive technology.
+- Add accessible-name warnings for Switch, associate Switch groups with descriptions and errors, announce invalid and error states, and expand Switch hit areas without changing compact visuals where possible.
+- Improve Button icon-only guidance with accessible-name warnings, decorative icon handling, and compact hit areas that preserve the existing visual size where possible.
+- Associate Checkbox, Radio, and Switch groups with group descriptions and error messages so assistive technology receives the surrounding form context.
+- Associate helper and error text for aria-label-only Select, Combobox, Autocomplete, SensitiveInput, and InputGroup patterns.
+- Add Combobox and Autocomplete warnings for placeholder-only naming, and document localized clear, show, and remove labels.
+- Make Breadcrumbs navigation and copy action labels localizable, hide decorative separators and icons from assistive technology, and keep clipboard actions focus-visible.
+- Add localized Table selection and resize labels, slimmer resize hit areas, and more targeted metadata so row and column controls are announced clearly.
+- Expand compact control hit areas without changing compact visuals where possible by using non-layout or pseudo-element targets.
+
+### Charts
+
+- Add chart wrapper label and description support so charts can expose concise names and longer context.
+- Merge ECharts aria and reduced-motion options with Kumo defaults instead of replacing app-provided configuration.
+- Announce Timeseries loading state and add non-drag range controls with localizable labels and value formatting.
+- Improve Sankey labels and descriptions, enable aria support, add keyboard node and link actions, and make action labels localizable.
+- Clarify ChartLegend static versus interactive semantics, use native buttons for interactive items, expose aria-pressed state, and expand compact hit areas without changing compact visuals where possible.
+
+### Blocks
+
+- Improve DeleteResource confirmation with alert-dialog semantics, a dialog description, and announced error messages.
+
+### Docs
+
+- Add skip link behavior and improve SidebarNav disclosure state, current-page announcements, mobile drawer focus management, and inert background behavior.
+- Improve StickyDocHeader handling for hidden duplicate content and expand icon link hit areas without changing compact visuals where possible.
+- Hide decorative icons from assistive technology and respect reduced-motion preferences in docs UI where motion is used.
+- Clean up demos and snippets that used empty links, clickable divs, placeholder-only controls, unlabeled icons, and placeholder href values.
+- Add accessibility and internationalization guidance to affected docs pages so examples call out labels, descriptions, clear, show, and remove actions, chart context, dialog errors, and compact target patterns.
diff --git a/packages/kumo-docs-astro/src/components/KumoMenuIcon.tsx b/packages/kumo-docs-astro/src/components/KumoMenuIcon.tsx
index fca0704945..597f6db598 100644
--- a/packages/kumo-docs-astro/src/components/KumoMenuIcon.tsx
+++ b/packages/kumo-docs-astro/src/components/KumoMenuIcon.tsx
@@ -7,6 +7,10 @@ interface KumoMenuIconProps {
 
 export function KumoMenuIcon({ className }: KumoMenuIconProps) {
   const [isHovered, setIsHovered] = useState(false);
+  const animatedPathClassName =
+    "origin-center-top transition-all duration-800 motion-reduce:transition-none";
+  const animatedRectClassName =
+    "origin-left-center transition-all duration-800 motion-reduce:transition-none";
 
   return (
     <div
@@ -22,6 +26,8 @@ export function KumoMenuIcon({ className }: KumoMenuIconProps) {
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
         className="h-full w-full"
+        aria-hidden="true"
+        focusable="false"
       >
         <defs>
           <clipPath id="contentClip">
@@ -32,7 +38,7 @@ export function KumoMenuIcon({ className }: KumoMenuIconProps) {
         {/* Vertical connector - NOT clipped */}
         <path
           className={cn(
-            "origin-center-top transition-all duration-800",
+            animatedPathClassName,
             isHovered
               ? "translate-y-[22px] scale-y-0 opacity-0"
               : "translate-y-0 scale-y-100 opacity-100",
@@ -49,7 +55,7 @@ export function KumoMenuIcon({ className }: KumoMenuIconProps) {
         <g clipPath="url(#contentClip)">
           <path
             className={cn(
-              "origin-center-top transition-all duration-800",
+              animatedPathClassName,
               isHovered
                 ? "-translate-y-[33px] scale-y-[0.01]"
                 : "translate-y-0 scale-y-100",
@@ -63,7 +69,7 @@ export function KumoMenuIcon({ className }: KumoMenuIconProps) {
           />
           <path
             className={cn(
-              "origin-center-top transition-all duration-800",
+              animatedPathClassName,
               isHovered
                 ? "-translate-y-12px scale-y-[0.01]"
                 : "translate-y-0 scale-y-100",
@@ -77,7 +83,7 @@ export function KumoMenuIcon({ className }: KumoMenuIconProps) {
           />
           <path
             className={cn(
-              "origin-center-top transition-all duration-800",
+              animatedPathClassName,
               isHovered
                 ? "-translate-y-[51px] scale-y-[0.01]"
                 : "translate-y-0 scale-y-100",
@@ -91,7 +97,7 @@ export function KumoMenuIcon({ className }: KumoMenuIconProps) {
           />
           <path
             className={cn(
-              "origin-center-top transition-all duration-800",
+              animatedPathClassName,
               isHovered
                 ? "-translate-y-[70px] scale-y-[0.01]"
                 : "translate-y-0 scale-y-100",
@@ -105,7 +111,7 @@ export function KumoMenuIcon({ className }: KumoMenuIconProps) {
           />
           <path
             className={cn(
-              "origin-center-top transition-all duration-800",
+              animatedPathClassName,
               isHovered
                 ? "translate-y-[25px] scale-y-[0.01]"
                 : "translate-y-0 scale-y-100",
@@ -119,7 +125,7 @@ export function KumoMenuIcon({ className }: KumoMenuIconProps) {
           />
           <path
             className={cn(
-              "origin-center-top transition-all duration-800",
+              animatedPathClassName,
               isHovered
                 ? "-translate-y-[5px] scale-y-[0.01]"
                 : "translate-y-0 scale-y-100",
@@ -133,7 +139,7 @@ export function KumoMenuIcon({ className }: KumoMenuIconProps) {
           />
           <path
             className={cn(
-              "origin-center-top transition-all duration-800",
+              animatedPathClassName,
               isHovered
                 ? "-translate-y-[19px] scale-y-[0.01]"
                 : "translate-y-0 scale-y-100",
@@ -147,7 +153,7 @@ export function KumoMenuIcon({ className }: KumoMenuIconProps) {
           />
           <path
             className={cn(
-              "origin-center-top transition-all duration-800",
+              animatedPathClassName,
               isHovered
                 ? "-translate-y-[19px] scale-y-[0.01]"
                 : "translate-y-0 scale-y-100",
@@ -161,7 +167,7 @@ export function KumoMenuIcon({ className }: KumoMenuIconProps) {
           />
           <path
             className={cn(
-              "origin-center-top transition-all duration-800",
+              animatedPathClassName,
               isHovered
                 ? "-translate-y-[5px] scale-y-[0.01]"
                 : "translate-y-0 scale-y-100",
@@ -175,7 +181,7 @@ export function KumoMenuIcon({ className }: KumoMenuIconProps) {
           />
           <path
             className={cn(
-              "origin-center-top transition-all duration-800",
+              animatedPathClassName,
               isHovered
                 ? "translate-y-[9px] scale-y-[0.01]"
                 : "translate-y-0 scale-y-100",
@@ -189,7 +195,7 @@ export function KumoMenuIcon({ className }: KumoMenuIconProps) {
           />
           <path
             className={cn(
-              "origin-center-top transition-all duration-800",
+              animatedPathClassName,
               isHovered
                 ? "translate-y-[9px] scale-y-[0.01]"
                 : "translate-y-0 scale-y-100",
@@ -203,7 +209,7 @@ export function KumoMenuIcon({ className }: KumoMenuIconProps) {
           />
           <path
             className={cn(
-              "origin-center-top transition-all duration-800",
+              animatedPathClassName,
               isHovered
                 ? "-translate-y-[60px] scale-y-[0.01]"
                 : "translate-y-0 scale-y-100",
@@ -220,7 +226,7 @@ export function KumoMenuIcon({ className }: KumoMenuIconProps) {
         {/* Hamburger lines (on top, not clipped) */}
         <rect
           className={cn(
-            "origin-left-center transition-all duration-800",
+            animatedRectClassName,
             isHovered
               ? "h-[6px] translate-x-[0.36px] translate-y-[24.88px]"
               : "h-[7px]",
@@ -235,7 +241,7 @@ export function KumoMenuIcon({ className }: KumoMenuIconProps) {
         />
         <rect
           className={cn(
-            "origin-left-center transition-all duration-800",
+            animatedRectClassName,
             isHovered
               ? "h-[6px] translate-x-[7.36px] translate-y-[30.88px] scale-x-[0.863]"
               : "h-[9px]",
@@ -250,7 +256,7 @@ export function KumoMenuIcon({ className }: KumoMenuIconProps) {
         />
         <rect
           className={cn(
-            "origin-left-center transition-all duration-800",
+            animatedRectClassName,
             isHovered
               ? "h-[6px] -translate-x-[3.64px] -translate-y-[11.12px] scale-x-[1.114] opacity-0"
               : "h-[6px] opacity-100",
@@ -265,7 +271,7 @@ export function KumoMenuIcon({ className }: KumoMenuIconProps) {
         />
         <rect
           className={cn(
-            "origin-left-center transition-all duration-800",
+            animatedRectClassName,
             isHovered
               ? "h-[6px] translate-x-[9.36px] -translate-y-[5.12px] scale-x-[0.83]"
               : "h-[6px]",
diff --git a/packages/kumo-docs-astro/src/components/SearchDialog.tsx b/packages/kumo-docs-astro/src/components/SearchDialog.tsx
index e83ed87d08..5490767597 100644
--- a/packages/kumo-docs-astro/src/components/SearchDialog.tsx
+++ b/packages/kumo-docs-astro/src/components/SearchDialog.tsx
@@ -209,6 +209,13 @@ interface SearchDialogProps {
   onOpenChange: (open: boolean) => void;
 }
 
+const SEARCH_DIALOG_MESSAGES = {
+  dialogTitle: "Search Kumo documentation",
+  loadError: "Failed to load search index",
+  emptyIdle: "Type to search docs",
+  placeholder: "Search docs...",
+} as const;
+
 /** Build URL path from component type and name */
 function getComponentUrl(type: string, name: string): string {
   const slug =
@@ -344,7 +351,7 @@ export function SearchDialog({ open, onOpenChange }: SearchDialogProps) {
         setError(null);
       } catch (err) {
         console.error("Failed to load component registry:", err);
-        setError("Failed to load search index");
+        setError(SEARCH_DIALOG_MESSAGES.loadError);
       } finally {
         setLoading(false);
       }
@@ -430,6 +437,10 @@ export function SearchDialog({ open, onOpenChange }: SearchDialogProps) {
     0,
   );
   const isSearching = query.trim().length > 0;
+  const resultStatus =
+    !loading && !error && hasResults
+      ? `${totalResults} result${totalResults === 1 ? "" : "s"}`
+      : "";
 
   return (
     <CommandPalette.Root<SearchGroup, SearchItem>
@@ -441,10 +452,11 @@ export function SearchDialog({ open, onOpenChange }: SearchDialogProps) {
       itemToStringValue={(group: SearchGroup) => group.label}
       onSelect={handleSelect}
       getSelectableItems={getSelectableItems}
+      dialogTitle={SEARCH_DIALOG_MESSAGES.dialogTitle}
       filter={() => true}
     >
       <CommandPalette.Input
-        placeholder="Search docs..."
+        placeholder={SEARCH_DIALOG_MESSAGES.placeholder}
         leading={
           <MagnifyingGlassIcon
             className="h-4 w-4 text-kumo-subtle"
@@ -456,14 +468,14 @@ export function SearchDialog({ open, onOpenChange }: SearchDialogProps) {
         {loading ? (
           <CommandPalette.Loading />
         ) : error ? (
-          <div className="p-8 text-center">
+          <div role="alert" className="p-8 text-center">
             <p className="text-kumo-subtle">{error}</p>
           </div>
         ) : !hasResults ? (
           <CommandPalette.Empty>
             {query.trim()
               ? `No results found for "${query}"`
-              : "Type to search docs"}
+              : SEARCH_DIALOG_MESSAGES.emptyIdle}
           </CommandPalette.Empty>
         ) : (
           <CommandPalette.Results>
@@ -515,9 +527,9 @@ export function SearchDialog({ open, onOpenChange }: SearchDialogProps) {
       </CommandPalette.List>
       <CommandPalette.Footer>
         <span className="text-kumo-subtle">
-          {hasResults
-            ? `${totalResults} result${totalResults === 1 ? "" : "s"}`
-            : ""}
+          <span role="status" aria-live="polite" aria-atomic="true">
+            {resultStatus}
+          </span>
         </span>
         <div className="flex items-center gap-4">
           <span className="flex items-center gap-1">
diff --git a/packages/kumo-docs-astro/src/components/SidebarNav.tsx b/packages/kumo-docs-astro/src/components/SidebarNav.tsx
index 9402a8d75b..f0661a37a0 100644
--- a/packages/kumo-docs-astro/src/components/SidebarNav.tsx
+++ b/packages/kumo-docs-astro/src/components/SidebarNav.tsx
@@ -25,6 +25,10 @@ function isActivePath(activePath: string, href: string) {
   return activePath === normalized || activePath.startsWith(normalized + "/");
 }
 
+function isCurrentPath(activePath: string, href: string) {
+  return activePath === normalizePathname(href);
+}
+
 const staticPages: NavItem[] = [
   { label: "Home", href: "/" },
   { label: "Installation", href: "/installation" },
@@ -104,8 +108,36 @@ declare const __BUILD_COMMIT__: string;
 declare const __BUILD_DATE__: string;
 
 const LI_STYLE =
-  "block rounded-lg text-kumo-subtle hover:text-kumo-default hover:bg-kumo-tint p-2 my-[.05rem] cursor-pointer transition-colors no-underline relative z-10 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-brand";
+  "block rounded-lg text-kumo-subtle hover:text-kumo-default hover:bg-kumo-tint p-2 my-[.05rem] cursor-pointer transition-colors motion-reduce:transition-none no-underline relative z-10 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-brand";
 const LI_ACTIVE_STYLE = "font-semibold text-kumo-default bg-kumo-tint";
+const MOBILE_DRAWER_ID = "kumo-mobile-navigation-drawer";
+const MOBILE_DRAWER_TITLE_ID = "kumo-mobile-navigation-title";
+const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable="true"]',
+].join(",");
+
+function getFocusableElements(container: HTMLElement) {
+  return Array.from(
+    container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
+  ).filter((element) => {
+    if (element.closest("[inert]") || element.closest('[aria-hidden="true"]')) {
+      return false;
+    }
+
+    const style = window.getComputedStyle(element);
+    return style.display !== "none" && style.visibility !== "hidden";
+  });
+}
+
+function preventPointerFocus(e: React.MouseEvent<HTMLElement>) {
+  e.preventDefault();
+}
 
 interface SidebarNavProps {
   currentPath: string;
@@ -125,12 +157,15 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
   // Refs for scroll containers
   const mobileScrollRef = useRef<HTMLDivElement>(null);
   const desktopScrollRef = useRef<HTMLDivElement>(null);
+  const mobileHeaderRef = useRef<HTMLDivElement>(null);
+  const mobileMenuTriggerRef = useRef<HTMLButtonElement>(null);
+  const mobileDrawerRef = useRef<HTMLElement>(null);
+  const mobileCloseButtonRef = useRef<HTMLButtonElement>(null);
+  const wasMobileMenuOpenRef = useRef(false);
 
   const toggleSidebar = () => setSidebarOpen((v) => !v);
-  const toggleMobileMenu = () => setMobileMenuOpen((v) => !v);
-  const preventPointerFocus = (e: React.MouseEvent<HTMLElement>) => {
-    e.preventDefault();
-  };
+  const openMobileMenu = () => setMobileMenuOpen(true);
+  const closeMobileMenu = () => setMobileMenuOpen(false);
 
   // Keyboard shortcut: Cmd+K / Ctrl+K + custom event from headers
   useEffect(() => {
@@ -194,172 +229,338 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
     };
   }, []);
 
-  // Shared nav content for both mobile and desktop
-  const navContent = (
-    <>
-      <button
-        onClick={() => setSearchOpen(true)}
-        className="mb-3 flex w-full items-center gap-2 rounded-lg bg-kumo-control px-3 py-2 text-sm text-kumo-subtle ring-1 ring-kumo-line transition-all hover:ring-kumo-hairline focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-brand"
-      >
-        <MagnifyingGlassIcon size={16} className="shrink-0" />
-        <span>Search...</span>
-      </button>
-
-      <ul className="flex flex-col gap-px">
-        {staticPages.map((item) => (
-          <li key={item.href}>
-            <a
-              href={item.href}
-              onMouseDown={preventPointerFocus}
-              className={cn(
-                LI_STYLE,
-                isActivePath(activePath, item.href) && LI_ACTIVE_STYLE,
-              )}
-            >
-              {item.label}
-            </a>
-          </li>
-        ))}
-      </ul>
+  useEffect(() => {
+    if (!mobileMenuOpen) {
+      if (wasMobileMenuOpenRef.current) {
+        mobileMenuTriggerRef.current?.focus({ preventScroll: true });
+      }
+      wasMobileMenuOpenRef.current = false;
+      return;
+    }
+
+    wasMobileMenuOpenRef.current = true;
+
+    if (searchOpen) return;
+
+    const drawer = mobileDrawerRef.current;
+    if (!drawer) return;
+
+    const focusInitialElement = () => {
+      const initialElement =
+        mobileCloseButtonRef.current ??
+        getFocusableElements(drawer)[0] ??
+        drawer;
+      initialElement.focus({ preventScroll: true });
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        closeMobileMenu();
+        return;
+      }
+
+      if (e.key !== "Tab") return;
+
+      const focusableElements = getFocusableElements(drawer);
+      if (focusableElements.length === 0) {
+        e.preventDefault();
+        drawer.focus({ preventScroll: true });
+        return;
+      }
+
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      const activeElement = document.activeElement;
+
+      if (!drawer.contains(activeElement)) {
+        e.preventDefault();
+        firstElement.focus({ preventScroll: true });
+        return;
+      }
+
+      if (e.shiftKey && activeElement === firstElement) {
+        e.preventDefault();
+        lastElement.focus({ preventScroll: true });
+        return;
+      }
+
+      if (!e.shiftKey && activeElement === lastElement) {
+        e.preventDefault();
+        firstElement.focus({ preventScroll: true });
+      }
+    };
+
+    focusInitialElement();
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [mobileMenuOpen, searchOpen]);
+
+  useEffect(() => {
+    if (!mobileMenuOpen) return;
+
+    const backgroundElements = [
+      document.querySelector<HTMLElement>(".docs-skip-link"),
+      mobileHeaderRef.current,
+      document.getElementById("main-content"),
+    ].filter((element): element is HTMLElement => Boolean(element));
+
+    const previousState = backgroundElements.map((element) => ({
+      element,
+      ariaHidden: element.getAttribute("aria-hidden"),
+      hadAriaHidden: element.hasAttribute("aria-hidden"),
+      hadInert: element.hasAttribute("inert"),
+    }));
+
+    for (const element of backgroundElements) {
+      element.setAttribute("aria-hidden", "true");
+      element.setAttribute("inert", "");
+    }
+
+    return () => {
+      for (const {
+        element,
+        ariaHidden,
+        hadAriaHidden,
+        hadInert,
+      } of previousState) {
+        if (hadAriaHidden && ariaHidden !== null) {
+          element.setAttribute("aria-hidden", ariaHidden);
+        } else {
+          element.removeAttribute("aria-hidden");
+        }
+
+        if (!hadInert) {
+          element.removeAttribute("inert");
+        }
+      }
+    };
+  }, [mobileMenuOpen]);
 
-      <div className="my-4 border-b border-kumo-hairline" />
+  // Shared nav content for both mobile and desktop. IDs include the panel
+  // context because both nav trees are mounted in the DOM at the same time.
+  const renderNavContent = (panelId: "mobile" | "desktop") => {
+    const componentsListId = `kumo-${panelId}-components-nav`;
+    const chartsListId = `kumo-${panelId}-charts-nav`;
+    const blocksListId = `kumo-${panelId}-blocks-nav`;
 
-      <div className="mb-4">
-        {/* Components Section */}
+    return (
+      <>
         <button
-          type="button"
-          className="flex w-full cursor-pointer items-center justify-between rounded-lg px-2 py-2 text-sm font-medium text-kumo-default transition-colors hover:bg-kumo-tint focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-brand"
-          onClick={() => setComponentsOpen(!componentsOpen)}
+          onClick={() => setSearchOpen(true)}
+          className="mb-3 flex w-full items-center gap-2 rounded-lg bg-kumo-control px-3 py-2 text-sm text-kumo-subtle ring-1 ring-kumo-line transition-[background-color,color,box-shadow] hover:ring-kumo-hairline focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-brand motion-reduce:transition-none"
         >
-          <span>Components</span>
-          <CaretDownIcon
-            size={12}
-            className={cn(
-              "text-kumo-subtle transition-transform duration-200",
-              !componentsOpen && "-rotate-90",
-            )}
+          <MagnifyingGlassIcon
+            size={16}
+            className="shrink-0"
+            aria-hidden="true"
+            focusable="false"
           />
+          <span>Search...</span>
         </button>
-        <ul
-          className={cn(
-            "mt-1 flex flex-col gap-px overflow-y-hidden overflow-x-visible transition-all duration-300 ease-in-out",
-            componentsOpen ? "max-h-[2000px] opacity-100" : "max-h-0 opacity-0",
-          )}
-        >
-          {componentItems.map((item) => (
-            <li key={item.href}>
-              <a
-                href={item.href}
-                onMouseDown={preventPointerFocus}
-                className={cn(
-                  LI_STYLE,
-                  "pl-4",
-                  activePath === normalizePathname(item.href) &&
-                    LI_ACTIVE_STYLE,
-                )}
-              >
-                {item.label}
-              </a>
-            </li>
-          ))}
+
+        <ul className="flex flex-col gap-px">
+          {staticPages.map((item) => {
+            const isActive = isActivePath(activePath, item.href);
+            const isCurrent = isCurrentPath(activePath, item.href);
+
+            return (
+              <li key={item.href}>
+                <a
+                  href={item.href}
+                  aria-current={isCurrent ? "page" : undefined}
+                  onMouseDown={preventPointerFocus}
+                  className={cn(LI_STYLE, isActive && LI_ACTIVE_STYLE)}
+                >
+                  {item.label}
+                </a>
+              </li>
+            );
+          })}
         </ul>
-      </div>
 
-      <div className="mb-4">
-        <button
-          type="button"
-          className="flex w-full cursor-pointer items-center justify-between rounded-lg px-2 py-2 text-sm font-medium text-kumo-default transition-colors hover:bg-kumo-tint focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-brand"
-          onClick={() => setChartsOpen(!chartsOpen)}
-        >
-          <span>Charts</span>
-          <CaretDownIcon
-            size={12}
+        <div className="my-4 border-b border-kumo-hairline" />
+
+        <div className="mb-4">
+          {/* Components Section */}
+          <button
+            type="button"
+            aria-expanded={componentsOpen}
+            aria-controls={componentsListId}
+            className="flex w-full cursor-pointer items-center justify-between rounded-lg px-2 py-2 text-sm font-medium text-kumo-default transition-colors hover:bg-kumo-tint focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-brand motion-reduce:transition-none"
+            onClick={() => setComponentsOpen(!componentsOpen)}
+          >
+            <span>Components</span>
+            <CaretDownIcon
+              size={12}
+              className={cn(
+                "text-kumo-subtle transition-transform duration-200 motion-reduce:transition-none",
+                !componentsOpen && "-rotate-90",
+              )}
+              aria-hidden="true"
+              focusable="false"
+            />
+          </button>
+          <ul
+            id={componentsListId}
+            aria-hidden={!componentsOpen}
+            inert={!componentsOpen}
             className={cn(
-              "text-kumo-subtle transition-transform duration-200",
-              !chartsOpen && "-rotate-90",
+              "mt-1 flex flex-col gap-px overflow-y-hidden overflow-x-visible transition-[max-height,opacity] duration-300 ease-in-out motion-reduce:transition-none",
+              componentsOpen
+                ? "max-h-[2000px] opacity-100"
+                : "max-h-0 opacity-0",
             )}
-          />
-        </button>
-        <ul
-          className={cn(
-            "mt-1 flex flex-col gap-px overflow-y-hidden overflow-x-visible transition-all duration-300 ease-in-out",
-            chartsOpen ? "max-h-[500px] opacity-100" : "max-h-0 opacity-0",
-          )}
-        >
-          {chartItems.map((item) => (
-            <li key={item.href}>
-              <a
-                href={item.href}
-                onMouseDown={preventPointerFocus}
-                className={cn(
-                  LI_STYLE,
-                  "pl-4",
-                  currentPath === item.href && LI_ACTIVE_STYLE,
-                )}
-              >
-                {item.label}
-              </a>
-            </li>
-          ))}
-        </ul>
-      </div>
+          >
+            {componentItems.map((item) => {
+              const isCurrent = isCurrentPath(activePath, item.href);
+
+              return (
+                <li key={item.href}>
+                  <a
+                    href={item.href}
+                    aria-current={isCurrent ? "page" : undefined}
+                    onMouseDown={preventPointerFocus}
+                    className={cn(
+                      LI_STYLE,
+                      "pl-4",
+                      isCurrent && LI_ACTIVE_STYLE,
+                    )}
+                  >
+                    {item.label}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
 
-      <div>
-        {/* Blocks Section */}
-        <button
-          type="button"
-          className="flex w-full cursor-pointer items-center justify-between rounded-lg px-2 py-2 text-sm font-medium text-kumo-default transition-colors hover:bg-kumo-tint focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-brand"
-          onClick={() => setBlocksOpen(!blocksOpen)}
-        >
-          <span>Blocks</span>
-          <CaretDownIcon
-            size={12}
+        <div className="mb-4">
+          <button
+            type="button"
+            aria-expanded={chartsOpen}
+            aria-controls={chartsListId}
+            className="flex w-full cursor-pointer items-center justify-between rounded-lg px-2 py-2 text-sm font-medium text-kumo-default transition-colors hover:bg-kumo-tint focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-brand motion-reduce:transition-none"
+            onClick={() => setChartsOpen(!chartsOpen)}
+          >
+            <span>Charts</span>
+            <CaretDownIcon
+              size={12}
+              className={cn(
+                "text-kumo-subtle transition-transform duration-200 motion-reduce:transition-none",
+                !chartsOpen && "-rotate-90",
+              )}
+              aria-hidden="true"
+              focusable="false"
+            />
+          </button>
+          <ul
+            id={chartsListId}
+            aria-hidden={!chartsOpen}
+            inert={!chartsOpen}
             className={cn(
-              "text-kumo-subtle transition-transform duration-200",
-              !blocksOpen && "-rotate-90",
+              "mt-1 flex flex-col gap-px overflow-y-hidden overflow-x-visible transition-[max-height,opacity] duration-300 ease-in-out motion-reduce:transition-none",
+              chartsOpen ? "max-h-[500px] opacity-100" : "max-h-0 opacity-0",
             )}
-          />
-        </button>
-        <ul
-          className={cn(
-            "mt-1 flex flex-col gap-px overflow-y-hidden overflow-x-visible transition-all duration-300 ease-in-out",
-            blocksOpen ? "max-h-[500px] opacity-100" : "max-h-0 opacity-0",
-          )}
-        >
-          {blockItems.map((item) => (
-            <li key={item.href}>
-              <a
-                href={item.href}
-                onMouseDown={preventPointerFocus}
-                className={cn(
-                  LI_STYLE,
-                  "pl-4",
-                  activePath === normalizePathname(item.href) &&
-                    LI_ACTIVE_STYLE,
-                )}
-              >
-                {item.label}
-              </a>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </>
-  );
+          >
+            {chartItems.map((item) => {
+              const isCurrent = isCurrentPath(activePath, item.href);
+
+              return (
+                <li key={item.href}>
+                  <a
+                    href={item.href}
+                    aria-current={isCurrent ? "page" : undefined}
+                    onMouseDown={preventPointerFocus}
+                    className={cn(
+                      LI_STYLE,
+                      "pl-4",
+                      isCurrent && LI_ACTIVE_STYLE,
+                    )}
+                  >
+                    {item.label}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+
+        <div>
+          {/* Blocks Section */}
+          <button
+            type="button"
+            aria-expanded={blocksOpen}
+            aria-controls={blocksListId}
+            className="flex w-full cursor-pointer items-center justify-between rounded-lg px-2 py-2 text-sm font-medium text-kumo-default transition-colors hover:bg-kumo-tint focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-brand motion-reduce:transition-none"
+            onClick={() => setBlocksOpen(!blocksOpen)}
+          >
+            <span>Blocks</span>
+            <CaretDownIcon
+              size={12}
+              className={cn(
+                "text-kumo-subtle transition-transform duration-200 motion-reduce:transition-none",
+                !blocksOpen && "-rotate-90",
+              )}
+              aria-hidden="true"
+              focusable="false"
+            />
+          </button>
+          <ul
+            id={blocksListId}
+            aria-hidden={!blocksOpen}
+            inert={!blocksOpen}
+            className={cn(
+              "mt-1 flex flex-col gap-px overflow-y-hidden overflow-x-visible transition-[max-height,opacity] duration-300 ease-in-out motion-reduce:transition-none",
+              blocksOpen ? "max-h-[500px] opacity-100" : "max-h-0 opacity-0",
+            )}
+          >
+            {blockItems.map((item) => {
+              const isCurrent = isCurrentPath(activePath, item.href);
+
+              return (
+                <li key={item.href}>
+                  <a
+                    href={item.href}
+                    aria-current={isCurrent ? "page" : undefined}
+                    onMouseDown={preventPointerFocus}
+                    className={cn(
+                      LI_STYLE,
+                      "pl-4",
+                      isCurrent && LI_ACTIVE_STYLE,
+                    )}
+                  >
+                    {item.label}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </>
+    );
+  };
 
   return (
     <>
       {/* Mobile header bar with hamburger */}
       <div
+        ref={mobileHeaderRef}
         className={cn(
           "fixed inset-x-0 top-0 z-50 flex h-12 items-center justify-between border-b border-kumo-hairline bg-kumo-canvas px-3 md:hidden",
         )}
       >
         <Button
+          ref={mobileMenuTriggerRef}
           variant="ghost"
           shape="square"
           aria-label="Open menu"
-          onClick={toggleMobileMenu}
+          aria-controls={MOBILE_DRAWER_ID}
+          aria-expanded={mobileMenuOpen}
+          onClick={openMobileMenu}
         >
           <KumoMenuIcon />
         </Button>
@@ -369,21 +570,32 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
 
       {/* Mobile slide-out drawer */}
       <aside
+        ref={mobileDrawerRef}
+        id={MOBILE_DRAWER_ID}
+        role="dialog"
+        aria-modal={mobileMenuOpen}
+        aria-labelledby={MOBILE_DRAWER_TITLE_ID}
+        aria-hidden={!mobileMenuOpen}
+        inert={!mobileMenuOpen}
+        tabIndex={-1}
         className={cn(
           "fixed inset-y-0 left-0 z-50 flex w-72 flex-col border-r border-kumo-hairline bg-kumo-canvas md:hidden",
-          "transition-transform duration-300 will-change-transform",
+          "transition-transform duration-300 will-change-transform motion-reduce:transition-none motion-reduce:will-change-auto",
           mobileMenuOpen ? "translate-x-0" : "-translate-x-full",
         )}
       >
         <div className="flex h-12 flex-none items-center justify-between border-b border-kumo-hairline px-3">
-          <h1 className="text-base font-medium">Kumo</h1>
+          <h1 id={MOBILE_DRAWER_TITLE_ID} className="text-base font-medium">
+            Kumo
+          </h1>
           <Button
+            ref={mobileCloseButtonRef}
             variant="ghost"
             shape="square"
             aria-label="Close menu"
-            onClick={toggleMobileMenu}
+            onClick={closeMobileMenu}
           >
-            <XIcon size={20} />
+            <XIcon size={20} aria-hidden="true" focusable="false" />
           </Button>
         </div>
         <div
@@ -392,7 +604,7 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
           className="min-h-0 grow overflow-y-auto overscroll-contain px-3 py-4 text-sm text-kumo-subtle"
           style={{ scrollBehavior: "auto" }}
         >
-          {navContent}
+          {renderNavContent("mobile")}
         </div>
       </aside>
 
@@ -426,9 +638,11 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
       {/* Desktop: Sliding panel that opens to the right of the rail */}
       <aside
         data-sidebar-open={sidebarOpen}
+        aria-hidden={!sidebarOpen}
+        inert={!sidebarOpen}
         className={cn(
           "fixed inset-y-0 left-12 z-40 hidden w-64 flex-col bg-kumo-canvas md:flex",
-          "transition-transform duration-300 ease-out will-change-transform",
+          "transition-transform duration-300 ease-out will-change-transform motion-reduce:transition-none motion-reduce:will-change-auto",
           sidebarOpen
             ? "translate-x-0 border-r border-kumo-hairline"
             : "-translate-x-full",
@@ -441,7 +655,7 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
           data-sidebar-scroll="desktop"
           className="min-h-0 grow overflow-y-auto overscroll-contain px-3 py-4 text-sm text-kumo-subtle"
         >
-          {navContent}
+          {renderNavContent("desktop")}
         </div>
       </aside>
 
diff --git a/packages/kumo-docs-astro/src/components/ThemeToggle.tsx b/packages/kumo-docs-astro/src/components/ThemeToggle.tsx
index 30697cab5e..af230a225e 100644
--- a/packages/kumo-docs-astro/src/components/ThemeToggle.tsx
+++ b/packages/kumo-docs-astro/src/components/ThemeToggle.tsx
@@ -27,7 +27,7 @@ export function ThemeToggle() {
   if (!mounted) {
     return (
       <Button variant="ghost" shape="square" aria-label="Toggle theme">
-        <SunIcon size={20} />
+        <SunIcon size={20} aria-hidden="true" focusable="false" />
       </Button>
     );
   }
@@ -39,7 +39,11 @@ export function ThemeToggle() {
       aria-label={`Switch to ${theme === "light" ? "dark" : "light"} mode`}
       onClick={toggleTheme}
     >
-      {theme === "light" ? <MoonIcon size={20} /> : <SunIcon size={20} />}
+      {theme === "light" ? (
+        <MoonIcon size={20} aria-hidden="true" focusable="false" />
+      ) : (
+        <SunIcon size={20} aria-hidden="true" focusable="false" />
+      )}
     </Button>
   );
 }
diff --git a/packages/kumo-docs-astro/src/components/demos/AutocompleteDemo.tsx b/packages/kumo-docs-astro/src/components/demos/AutocompleteDemo.tsx
index da5ad4ff1d..ee9a1a5a51 100644
--- a/packages/kumo-docs-astro/src/components/demos/AutocompleteDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/AutocompleteDemo.tsx
@@ -107,7 +107,10 @@ const servers: ServerGroup[] = [
 export function AutocompleteDemo() {
   return (
     <Autocomplete items={fruits}>
-      <Autocomplete.InputGroup placeholder="Search fruits…" />
+      <Autocomplete.InputGroup
+        aria-label="Search fruits"
+        placeholder="Search fruits…"
+      />
       <Autocomplete.Content>
         <Autocomplete.List>
           {(item: string) => (
@@ -189,7 +192,10 @@ export function AutocompleteErrorDemo() {
 export function AutocompleteGroupedDemo() {
   return (
     <Autocomplete items={servers}>
-      <Autocomplete.InputGroup placeholder="Select region…" />
+      <Autocomplete.InputGroup
+        aria-label="Select server region"
+        placeholder="Select region…"
+      />
       <Autocomplete.Content>
         <Autocomplete.List>
           {(group: ServerGroup) => (
@@ -215,7 +221,11 @@ export function AutocompleteSizesDemo() {
   return (
     <div className="flex flex-wrap items-center gap-4">
       <Autocomplete items={fruits.slice(0, 10)}>
-        <Autocomplete.InputGroup size="xs" placeholder="xs" />
+        <Autocomplete.InputGroup
+          aria-label="Search fruits, extra small"
+          size="xs"
+          placeholder="xs"
+        />
         <Autocomplete.Content>
           <Autocomplete.List>
             {(item: string) => (
@@ -227,7 +237,11 @@ export function AutocompleteSizesDemo() {
         </Autocomplete.Content>
       </Autocomplete>
       <Autocomplete items={fruits.slice(0, 10)}>
-        <Autocomplete.InputGroup size="sm" placeholder="sm" />
+        <Autocomplete.InputGroup
+          aria-label="Search fruits, small"
+          size="sm"
+          placeholder="sm"
+        />
         <Autocomplete.Content>
           <Autocomplete.List>
             {(item: string) => (
@@ -239,7 +253,11 @@ export function AutocompleteSizesDemo() {
         </Autocomplete.Content>
       </Autocomplete>
       <Autocomplete items={fruits.slice(0, 10)}>
-        <Autocomplete.InputGroup size="base" placeholder="base (default)" />
+        <Autocomplete.InputGroup
+          aria-label="Search fruits, default"
+          size="base"
+          placeholder="base (default)"
+        />
         <Autocomplete.Content>
           <Autocomplete.List>
             {(item: string) => (
@@ -251,7 +269,11 @@ export function AutocompleteSizesDemo() {
         </Autocomplete.Content>
       </Autocomplete>
       <Autocomplete items={fruits.slice(0, 10)}>
-        <Autocomplete.InputGroup size="lg" placeholder="lg" />
+        <Autocomplete.InputGroup
+          aria-label="Search fruits, large"
+          size="lg"
+          placeholder="lg"
+        />
         <Autocomplete.Content>
           <Autocomplete.List>
             {(item: string) => (
@@ -277,7 +299,10 @@ export function AutocompleteControlledDemo() {
         value={value}
         onValueChange={(v) => setValue(v)}
       >
-        <Autocomplete.InputGroup placeholder="Type a fruit…" />
+        <Autocomplete.InputGroup
+          aria-label="Type a fruit"
+          placeholder="Type a fruit…"
+        />
         <Autocomplete.Content>
           <Autocomplete.List>
             {(item: string) => (
diff --git a/packages/kumo-docs-astro/src/components/demos/BreadcrumbsDemo.tsx b/packages/kumo-docs-astro/src/components/demos/BreadcrumbsDemo.tsx
index bdfb9db2d0..8289a24ed6 100644
--- a/packages/kumo-docs-astro/src/components/demos/BreadcrumbsDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/BreadcrumbsDemo.tsx
@@ -61,3 +61,23 @@ export function BreadcrumbsWithClipboardDemo() {
     </Breadcrumbs>
   );
 }
+
+export function BreadcrumbsLocalizedDemo() {
+  return (
+    <Breadcrumbs
+      labels={{
+        navigation: "Ruta de navegación",
+        copyAction: "Copiar",
+        copyTooltip: "Haz clic para copiar",
+        copiedFeedback: "Copiado",
+      }}
+    >
+      <Breadcrumbs.Link href="#">Inicio</Breadcrumbs.Link>
+      <Breadcrumbs.Separator />
+      <Breadcrumbs.Link href="#">Documentación</Breadcrumbs.Link>
+      <Breadcrumbs.Separator />
+      <Breadcrumbs.Current>Migas de pan</Breadcrumbs.Current>
+      <Breadcrumbs.Clipboard text="#migas-de-pan" />
+    </Breadcrumbs>
+  );
+}
diff --git a/packages/kumo-docs-astro/src/components/demos/Chart/ChartCard.astro b/packages/kumo-docs-astro/src/components/demos/Chart/ChartCard.astro
index 54dcfa593b..dff40b969b 100644
--- a/packages/kumo-docs-astro/src/components/demos/Chart/ChartCard.astro
+++ b/packages/kumo-docs-astro/src/components/demos/Chart/ChartCard.astro
@@ -11,7 +11,7 @@ const { title, description, href } = Astro.props;
 <div class="rounded-lg border border-kumo-hairline bg-kumo-elevated">
   <div class="p-4">
     <div class="text-kumo-default">{title}</div>
-    <div class="mt-1 text-sm text-kumo-secondary">{description}</div>
+    <div class="mt-1 text-sm text-kumo-subtle">{description}</div>
 
     <div class="mt-4">
       <a
diff --git a/packages/kumo-docs-astro/src/components/demos/Chart/SankeyChartDemo.tsx b/packages/kumo-docs-astro/src/components/demos/Chart/SankeyChartDemo.tsx
index 6f0be673c1..49c1e921b5 100644
--- a/packages/kumo-docs-astro/src/components/demos/Chart/SankeyChartDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/Chart/SankeyChartDemo.tsx
@@ -7,11 +7,11 @@ import {
 } from "@cloudflare/kumo";
 import * as echarts from "echarts/core";
 import { SankeyChart as SankeyChartType } from "echarts/charts";
-import { TooltipComponent } from "echarts/components";
+import { AriaComponent, TooltipComponent } from "echarts/components";
 import { CanvasRenderer } from "echarts/renderers";
 import { useIsDarkMode } from "~/lib/use-is-dark-mode";
 
-echarts.use([SankeyChartType, TooltipComponent, CanvasRenderer]);
+echarts.use([SankeyChartType, AriaComponent, TooltipComponent, CanvasRenderer]);
 
 /** Escape HTML special characters to prevent XSS in custom tooltips */
 const escapeHtml = (str: string): string =>
diff --git a/packages/kumo-docs-astro/src/components/demos/ComboboxDemo.tsx b/packages/kumo-docs-astro/src/components/demos/ComboboxDemo.tsx
index 804a0ea466..7feb57d56a 100644
--- a/packages/kumo-docs-astro/src/components/demos/ComboboxDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/ComboboxDemo.tsx
@@ -146,7 +146,12 @@ export function ComboboxDemo() {
       onValueChange={(v) => setValue(v as string | null)}
       items={fruits}
     >
-      <Combobox.TriggerInput placeholder="Please select" />
+      <Combobox.TriggerInput
+        aria-label="Select fruit"
+        clearLabel="Clear selected fruit"
+        placeholder="Please select"
+        showOptionsLabel="Show fruit options"
+      />
       <Combobox.Content>
         <Combobox.Empty />
         <Combobox.List>
@@ -171,9 +176,15 @@ export function ComboboxSearchableInsideDemo() {
       onValueChange={(v) => setValue(v as Language)}
       items={languages}
     >
-      <Combobox.TriggerValue className="w-[200px]" />
+      <Combobox.TriggerValue
+        aria-label="Select language"
+        className="w-[200px]"
+      />
       <Combobox.Content>
-        <Combobox.Input placeholder="Search languages" />
+        <Combobox.Input
+          aria-label="Search languages"
+          placeholder="Search languages"
+        />
         <Combobox.Empty />
         <Combobox.List>
           {(item: Language) => (
@@ -199,11 +210,15 @@ export function ComboboxSearchableSelectDemo() {
       items={languages}
     >
       <Combobox.TriggerValue
+        aria-label="Select language"
         className="w-[200px]"
         placeholder="Select a language"
       />
       <Combobox.Content>
-        <Combobox.Input placeholder="Search languages" />
+        <Combobox.Input
+          aria-label="Search languages"
+          placeholder="Search languages"
+        />
         <Combobox.Empty />
         <Combobox.List>
           {(item: Language) => (
@@ -228,8 +243,11 @@ export function ComboboxGroupedDemo() {
       items={servers}
     >
       <Combobox.TriggerInput
+        aria-label="Select server"
+        clearLabel="Clear server location"
         className="w-[200px]"
         placeholder="Select server"
+        showOptionsLabel="Show server location options"
       />
       <Combobox.Content>
         <Combobox.Empty />
@@ -296,10 +314,16 @@ export function ComboboxMultipleDemo() {
         multiple
       >
         <Combobox.TriggerMultipleWithInput
+          aria-label="Select bots"
           className="w-[400px]"
           placeholder="Select bots"
           renderItem={(selected: BotItem) => (
-            <Combobox.Chip key={selected.value}>{selected.label}</Combobox.Chip>
+            <Combobox.Chip
+              key={selected.value}
+              removeLabel={`Remove ${selected.label}`}
+            >
+              {selected.label}
+            </Combobox.Chip>
           )}
           inputSide="right"
         />
@@ -334,7 +358,11 @@ export function ComboboxWithFieldDemo() {
         label="Database"
         description="Select your preferred database"
       >
-        <Combobox.TriggerInput placeholder="Select database" />
+        <Combobox.TriggerInput
+          clearLabel="Clear database selection"
+          placeholder="Select database"
+          showOptionsLabel="Show database options"
+        />
         <Combobox.Content>
           <Combobox.Empty />
           <Combobox.List>
@@ -355,8 +383,11 @@ export function ComboboxDisabledDemo() {
     <div className="flex flex-wrap gap-4 items-start">
       <Combobox value="Apple" items={fruits} disabled>
         <Combobox.TriggerInput
+          aria-label="Select fruit"
+          clearLabel="Clear selected fruit"
           className="w-[200px]"
           placeholder="Select fruit"
+          showOptionsLabel="Show fruit options"
         />
         <Combobox.Content>
           <Combobox.Empty />
@@ -371,9 +402,12 @@ export function ComboboxDisabledDemo() {
       </Combobox>
 
       <Combobox value={languages[0]} items={languages} disabled>
-        <Combobox.TriggerValue className="w-[200px]" />
+        <Combobox.TriggerValue
+          aria-label="Select language"
+          className="w-[200px]"
+        />
         <Combobox.Content>
-          <Combobox.Input placeholder="Search" />
+          <Combobox.Input aria-label="Search languages" placeholder="Search" />
           <Combobox.Empty />
           <Combobox.List>
             {(item: Language) => (
@@ -419,7 +453,12 @@ export function ComboboxDisabledItemsDemo() {
   return (
     <div className="w-80">
       <Combobox value={value} onValueChange={setValue} items={items}>
-        <Combobox.TriggerInput placeholder="Select database" />
+        <Combobox.TriggerInput
+          aria-label="Select database"
+          clearLabel="Clear database selection"
+          placeholder="Select database"
+          showOptionsLabel="Show database options"
+        />
         <Combobox.Content>
           <Combobox.Empty />
           <Combobox.List>
@@ -459,7 +498,11 @@ export function ComboboxErrorDemo() {
         label="Database"
         error={{ message: "Please select a database", match: true }}
       >
-        <Combobox.TriggerInput placeholder="Select database" />
+        <Combobox.TriggerInput
+          clearLabel="Clear database selection"
+          placeholder="Select database"
+          showOptionsLabel="Show database options"
+        />
         <Combobox.Content>
           <Combobox.Empty />
           <Combobox.List>
@@ -488,7 +531,12 @@ export function ComboboxSizesDemo() {
         onValueChange={(v) => setSmValue(v as string | null)}
         items={fruits.slice(0, 8)}
       >
-        <Combobox.TriggerInput placeholder="Small (sm)" />
+        <Combobox.TriggerInput
+          aria-label="Select fruit, small"
+          clearLabel="Clear small fruit selection"
+          placeholder="Small (sm)"
+          showOptionsLabel="Show small fruit options"
+        />
         <Combobox.Content>
           <Combobox.Empty />
           <Combobox.List>
@@ -506,7 +554,12 @@ export function ComboboxSizesDemo() {
         onValueChange={(v) => setBaseValue(v as string | null)}
         items={fruits.slice(0, 8)}
       >
-        <Combobox.TriggerInput placeholder="Base (default)" />
+        <Combobox.TriggerInput
+          aria-label="Select fruit, default"
+          clearLabel="Clear default fruit selection"
+          placeholder="Base (default)"
+          showOptionsLabel="Show default fruit options"
+        />
         <Combobox.Content>
           <Combobox.Empty />
           <Combobox.List>
@@ -535,9 +588,12 @@ export function ComboboxSizesSearchableInsideDemo() {
         onValueChange={(v) => setSmValue(v as Language)}
         items={languages}
       >
-        <Combobox.TriggerValue className="w-[160px]" />
+        <Combobox.TriggerValue
+          aria-label="Select language, small"
+          className="w-[160px]"
+        />
         <Combobox.Content>
-          <Combobox.Input placeholder="Search" />
+          <Combobox.Input aria-label="Search languages" placeholder="Search" />
           <Combobox.Empty />
           <Combobox.List>
             {(item: Language) => (
@@ -554,9 +610,12 @@ export function ComboboxSizesSearchableInsideDemo() {
         onValueChange={(v) => setBaseValue(v as Language)}
         items={languages}
       >
-        <Combobox.TriggerValue className="w-[180px]" />
+        <Combobox.TriggerValue
+          aria-label="Select language, default"
+          className="w-[180px]"
+        />
         <Combobox.Content>
-          <Combobox.Input placeholder="Search" />
+          <Combobox.Input aria-label="Search languages" placeholder="Search" />
           <Combobox.Empty />
           <Combobox.List>
             {(item: Language) => (
@@ -581,6 +640,7 @@ export function ComboboxCustomTriggerDemo() {
       items={languages}
     >
       <Combobox.Trigger
+        aria-label="Select language"
         render={
           <Button variant="ghost" size="sm" />
         }
@@ -593,7 +653,10 @@ export function ComboboxCustomTriggerDemo() {
         <CaretUpDownIcon size={14} className="text-kumo-subtle shrink-0" />
       </Combobox.Trigger>
       <Combobox.Content>
-        <Combobox.Input placeholder="Search languages" />
+        <Combobox.Input
+          aria-label="Search languages"
+          placeholder="Search languages"
+        />
         <Combobox.Empty />
         <Combobox.List>
           {(item: Language) => (
diff --git a/packages/kumo-docs-astro/src/components/demos/DialogDemo.tsx b/packages/kumo-docs-astro/src/components/demos/DialogDemo.tsx
index f16d754906..852a4ec0f5 100644
--- a/packages/kumo-docs-astro/src/components/demos/DialogDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/DialogDemo.tsx
@@ -307,6 +307,7 @@ export function DialogWithComboboxDemo() {
         </Dialog.Description>
         <Combobox value={value} onValueChange={setValue} items={regions}>
           <Combobox.TriggerInput
+            aria-label="Search regions"
             className="w-full"
             placeholder="Search regions..."
           />
diff --git a/packages/kumo-docs-astro/src/components/demos/HomeGrid.tsx b/packages/kumo-docs-astro/src/components/demos/HomeGrid.tsx
index 01517c9899..e7a889a18a 100644
--- a/packages/kumo-docs-astro/src/components/demos/HomeGrid.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/HomeGrid.tsx
@@ -16,6 +16,7 @@ import {
   GridItem,
   Input,
   InputArea,
+  InputGroup,
   Label,
   LayerCard,
   Link,
@@ -39,8 +40,8 @@ import {
   useKumoToastManager,
 } from "@cloudflare/kumo";
 import { ShikiProvider, CodeHighlighted } from "@cloudflare/kumo/code";
-import { InputGroupDemo } from "~/components/demos/InputGroupDemo";
 import {
+  CheckCircleIcon,
   MagnifyingGlassIcon,
   PlusIcon,
   TextBolderIcon,
@@ -142,8 +143,12 @@ export function HomeGrid() {
       id: "input",
       Component: (
         <div className="grid gap-3">
-          <Input placeholder="Type something..." />
-          <Input variant="error" value="Invalid!" />
+          <Input aria-label="Worker name" placeholder="Type something..." />
+          <Input
+            aria-label="Invalid worker name"
+            variant="error"
+            value="Invalid!"
+          />
         </div>
       ),
     },
@@ -178,7 +183,10 @@ export function HomeGrid() {
         <Autocomplete
           items={["Apple", "Banana", "Cherry", "Grape", "Mango", "Orange"]}
         >
-          <Autocomplete.InputGroup placeholder="Search fruits…" />
+          <Autocomplete.InputGroup
+            aria-label="Search fruits"
+            placeholder="Search fruits…"
+          />
           <Autocomplete.Content>
             <Autocomplete.List>
               {(item: string) => (
@@ -206,7 +214,12 @@ export function HomeGrid() {
           onValueChange={setValue}
           value={value}
         >
-          <Combobox.TriggerInput placeholder="Select an issue..." />
+          <Combobox.TriggerInput
+            aria-label="Select an issue label"
+            clearLabel="Clear issue label"
+            placeholder="Select an issue..."
+            showOptionsLabel="Show issue label options"
+          />
           <Combobox.Content>
             <Combobox.List>
               {(item: { id: string; value: string }) => (
@@ -224,6 +237,7 @@ export function HomeGrid() {
       id: "switch",
       Component: (
         <Switch
+          aria-label="Toggle featured setting"
           checked={switchToggled}
           onClick={() => {
             setSwitchToggled(!switchToggled);
@@ -441,12 +455,26 @@ export function HomeGrid() {
     {
       name: "InputArea",
       id: "input-area",
-      Component: <InputArea placeholder="Enter your name" />,
+      Component: (
+        <InputArea aria-label="Profile name" placeholder="Enter your name" />
+      ),
     },
     {
       name: "InputGroup",
       id: "input-group",
-      Component: <InputGroupDemo />,
+      Component: (
+        <InputGroup className="w-full max-w-2xs">
+          <InputGroup.Input
+            aria-label="Worker subdomain"
+            defaultValue="kumo"
+            maxLength={20}
+          />
+          <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>
+          <InputGroup.Addon align="end">
+            <CheckCircleIcon weight="duotone" className="text-kumo-success" />
+          </InputGroup.Addon>
+        </InputGroup>
+      ),
     },
     {
       name: "Meter",
@@ -606,7 +634,24 @@ export function HomeGrid() {
     {
       name: "SensitiveInput",
       id: "sensitive-input",
-      Component: <SensitiveInput value="super-secret-api-key" readOnly />,
+      Component: (
+        <SensitiveInput
+          aria-label="API key preview"
+          labels={{
+            clickToReveal: "Click to reveal API key",
+            copied: "Copied API key",
+            copiedToClipboard: "API key copied to clipboard",
+            copyToClipboard: "Copy API key",
+            hideValue: "Hide API key",
+            revealInstruction: "Press Enter or Space to reveal the API key.",
+            revealValue: "Reveal API key",
+            valueHidden: "API key hidden",
+            valueRevealed: "API key revealed",
+          }}
+          value="super-secret-api-key"
+          readOnly
+        />
+      ),
     },
     {
       name: "Table",
diff --git a/packages/kumo-docs-astro/src/components/demos/KumoPressDemo.tsx b/packages/kumo-docs-astro/src/components/demos/KumoPressDemo.tsx
index 983c06b6d8..e89ea267f6 100644
--- a/packages/kumo-docs-astro/src/components/demos/KumoPressDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/KumoPressDemo.tsx
@@ -239,7 +239,13 @@ function statusLabel(status: Post["status"]) {
 // ---------------------------------------------------------------------------
 // WP Admin Sidebar Component
 // ---------------------------------------------------------------------------
-function WPSidebar({ collapsed }: { collapsed: boolean }) {
+function WPSidebar({
+  collapsed,
+  onToggleCollapse,
+}: {
+  collapsed: boolean;
+  onToggleCollapse: () => void;
+}) {
   return (
     <div
       className={cn(
@@ -281,9 +287,14 @@ function WPSidebar({ collapsed }: { collapsed: boolean }) {
 
       {/* Collapse toggle */}
       <div className="border-t border-white/10 p-2">
-        <div className="flex items-center justify-center text-xs text-white/40">
+        <button
+          type="button"
+          aria-label={collapsed ? "Expand menu" : "Collapse menu"}
+          onClick={onToggleCollapse}
+          className="flex w-full items-center justify-center rounded-sm text-xs text-white/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-focus/50"
+        >
           {!collapsed && "Collapse menu"}
-        </div>
+        </button>
       </div>
     </div>
   );
@@ -421,11 +432,11 @@ export function KumoPressDemo() {
         className="flex h-[720px] overflow-hidden rounded-xl border border-kumo-hairline bg-kumo-elevated font-sans shadow-lg"
       >
         {/* Sidebar */}
-        <div
-          className="flex-none cursor-pointer"
-          onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
-        >
-          <WPSidebar collapsed={sidebarCollapsed} />
+        <div className="flex-none">
+          <WPSidebar
+            collapsed={sidebarCollapsed}
+            onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
+          />
         </div>
 
         {/* Main content */}
diff --git a/packages/kumo-docs-astro/src/components/demos/PageHeaderDemo.tsx b/packages/kumo-docs-astro/src/components/demos/PageHeaderDemo.tsx
index 9671106e73..f71358e219 100644
--- a/packages/kumo-docs-astro/src/components/demos/PageHeaderDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/PageHeaderDemo.tsx
@@ -15,7 +15,7 @@ export function PageHeaderHeroDemo() {
       className="w-full"
       breadcrumbs={
         <Breadcrumbs>
-          <Breadcrumbs.Link icon={<HouseIcon size={16} />} href="#">
+          <Breadcrumbs.Link icon={<HouseIcon size={16} />} href="/workers-and-pages">
             Workers & Pages
           </Breadcrumbs.Link>
           <Breadcrumbs.Separator />
@@ -49,7 +49,7 @@ export function PageHeaderBasicDemo() {
     <PageHeader
       breadcrumbs={
         <Breadcrumbs>
-          <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
+          <Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
           <Breadcrumbs.Separator />
           <Breadcrumbs.Current>Dashboard</Breadcrumbs.Current>
         </Breadcrumbs>
@@ -64,7 +64,7 @@ export function PageHeaderWithIconsDemo() {
     <PageHeader
       breadcrumbs={
         <Breadcrumbs>
-          <Breadcrumbs.Link icon={<HouseIcon size={16} />} href="#">
+          <Breadcrumbs.Link icon={<HouseIcon size={16} />} href="/">
             Home
           </Breadcrumbs.Link>
           <Breadcrumbs.Separator />
@@ -83,7 +83,7 @@ export function PageHeaderWithTabsDemo() {
     <PageHeader
       breadcrumbs={
         <Breadcrumbs>
-          <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
+          <Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
           <Breadcrumbs.Separator />
           <Breadcrumbs.Current>Settings</Breadcrumbs.Current>
         </Breadcrumbs>
@@ -104,9 +104,9 @@ export function PageHeaderWithActionsDemo() {
     <PageHeader
       breadcrumbs={
         <Breadcrumbs>
-          <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
+          <Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
           <Breadcrumbs.Separator />
-          <Breadcrumbs.Link href="#">Projects</Breadcrumbs.Link>
+          <Breadcrumbs.Link href="/projects">Projects</Breadcrumbs.Link>
           <Breadcrumbs.Separator />
           <Breadcrumbs.Current>My Project</Breadcrumbs.Current>
         </Breadcrumbs>
@@ -130,9 +130,9 @@ export function PageHeaderWithTitleDemo() {
     <PageHeader
       breadcrumbs={
         <Breadcrumbs>
-          <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
+          <Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
           <Breadcrumbs.Separator />
-          <Breadcrumbs.Link href="#">Products</Breadcrumbs.Link>
+          <Breadcrumbs.Link href="/products">Products</Breadcrumbs.Link>
           <Breadcrumbs.Separator />
           <Breadcrumbs.Current>Page title</Breadcrumbs.Current>
         </Breadcrumbs>
@@ -148,9 +148,9 @@ export function PageHeaderWithTitleDescriptionDemo() {
     <PageHeader
       breadcrumbs={
         <Breadcrumbs>
-          <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
+          <Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
           <Breadcrumbs.Separator />
-          <Breadcrumbs.Link href="#">Products</Breadcrumbs.Link>
+          <Breadcrumbs.Link href="/products">Products</Breadcrumbs.Link>
           <Breadcrumbs.Separator />
           <Breadcrumbs.Current>Page title</Breadcrumbs.Current>
         </Breadcrumbs>
@@ -167,9 +167,9 @@ export function PageHeaderCompleteDemo() {
     <PageHeader
       breadcrumbs={
         <Breadcrumbs>
-          <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
+          <Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
           <Breadcrumbs.Separator />
-          <Breadcrumbs.Link href="#">Products</Breadcrumbs.Link>
+          <Breadcrumbs.Link href="/products">Products</Breadcrumbs.Link>
           <Breadcrumbs.Separator />
           <Breadcrumbs.Current>Page title</Breadcrumbs.Current>
         </Breadcrumbs>
diff --git a/packages/kumo-docs-astro/src/components/demos/SensitiveInputDemo.tsx b/packages/kumo-docs-astro/src/components/demos/SensitiveInputDemo.tsx
index 0badc4862c..5fba881b84 100644
--- a/packages/kumo-docs-astro/src/components/demos/SensitiveInputDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/SensitiveInputDemo.tsx
@@ -79,3 +79,26 @@ export function SensitiveInputStatesDemo() {
     </div>
   );
 }
+
+export function SensitiveInputLocalizationDemo() {
+  return (
+    <div className="w-80">
+      <SensitiveInput
+        label="Clé API"
+        defaultValue="sk_live_abc123xyz789"
+        labels={{
+          clickToReveal: "Cliquer pour afficher",
+          revealValue: "Afficher la valeur",
+          hideValue: "Masquer la valeur",
+          copy: "Copier",
+          copyToClipboard: "Copier dans le presse-papiers",
+          copied: "Copié",
+          valueRevealed: "Valeur affichée",
+          valueHidden: "Valeur masquée",
+          copiedToClipboard: "Copié dans le presse-papiers",
+          revealInstruction: "Appuyez sur Entrée ou Espace pour afficher.",
+        }}
+      />
+    </div>
+  );
+}
diff --git a/packages/kumo-docs-astro/src/components/demos/SwitchDemo.tsx b/packages/kumo-docs-astro/src/components/demos/SwitchDemo.tsx
index 37cf83ef05..94201d1a24 100644
--- a/packages/kumo-docs-astro/src/components/demos/SwitchDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/SwitchDemo.tsx
@@ -4,16 +4,32 @@ import { Switch } from "@cloudflare/kumo";
 export function SwitchBasicDemo() {
   const [checked, setChecked] = useState(false);
   return (
-    <Switch label="Switch" checked={checked} onCheckedChange={setChecked} />
+    <Switch
+      label="Email notifications"
+      checked={checked}
+      onCheckedChange={setChecked}
+    />
   );
 }
 
 export function SwitchOffDemo() {
-  return <Switch label="Switch" checked={false} onCheckedChange={() => {}} />;
+  return (
+    <Switch
+      label="Email notifications"
+      checked={false}
+      onCheckedChange={() => {}}
+    />
+  );
 }
 
 export function SwitchOnDemo() {
-  return <Switch label="Switch" checked={true} onCheckedChange={() => {}} />;
+  return (
+    <Switch
+      label="Email notifications"
+      checked={true}
+      onCheckedChange={() => {}}
+    />
+  );
 }
 
 export function SwitchDisabledDemo() {
diff --git a/packages/kumo-docs-astro/src/components/demos/TableDemo.tsx b/packages/kumo-docs-astro/src/components/demos/TableDemo.tsx
index e52719aefc..c58a2fdb24 100644
--- a/packages/kumo-docs-astro/src/components/demos/TableDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/TableDemo.tsx
@@ -49,6 +49,12 @@ const emailData = [
   },
 ];
 
+// In product code, source these strings from your i18n library.
+const localizedTableLabels = {
+  selectAllRows: "Select all rows",
+  selectRow: (subject: string) => `Select ${subject}`,
+} as const;
+
 export function TableBasicDemo() {
   return (
     <LayerCard className="p-0">
@@ -109,7 +115,7 @@ export function TableWithCheckboxDemo() {
                 selectedIds.size > 0 && selectedIds.size < rows.length
               }
               onCheckedChange={toggleAll}
-              aria-label="Select all rows"
+              aria-label={localizedTableLabels.selectAllRows}
             />
             <Table.Head>Subject</Table.Head>
             <Table.Head>From</Table.Head>
@@ -122,7 +128,7 @@ export function TableWithCheckboxDemo() {
               <Table.CheckCell
                 checked={selectedIds.has(row.id)}
                 onCheckedChange={() => toggleRow(row.id)}
-                aria-label={`Select ${row.subject}`}
+                aria-label={localizedTableLabels.selectRow(row.subject)}
               />
               <Table.Cell>{row.subject}</Table.Cell>
               <Table.Cell>{row.from}</Table.Cell>
@@ -195,7 +201,7 @@ export function TableSelectedRowDemo() {
                 selectedIds.size > 0 && selectedIds.size < rows.length
               }
               onCheckedChange={toggleAll}
-              aria-label="Select all rows"
+              aria-label={localizedTableLabels.selectAllRows}
             />
             <Table.Head>Subject</Table.Head>
             <Table.Head>From</Table.Head>
@@ -211,7 +217,7 @@ export function TableSelectedRowDemo() {
               <Table.CheckCell
                 checked={selectedIds.has(row.id)}
                 onCheckedChange={() => toggleRow(row.id)}
-                aria-label={`Select ${row.subject}`}
+                aria-label={localizedTableLabels.selectRow(row.subject)}
               />
               <Table.Cell>{row.subject}</Table.Cell>
               <Table.Cell>{row.from}</Table.Cell>
@@ -451,7 +457,7 @@ export function TableFullDemo() {
                 selectedIds.size > 0 && selectedIds.size < emailData.length
               }
               onCheckedChange={toggleAll}
-              aria-label="Select all rows"
+              aria-label={localizedTableLabels.selectAllRows}
             />
             <Table.Head>Subject</Table.Head>
             <Table.Head>From</Table.Head>
@@ -468,7 +474,7 @@ export function TableFullDemo() {
               <Table.CheckCell
                 checked={selectedIds.has(row.id)}
                 onCheckedChange={() => toggleRow(row.id)}
-                aria-label={`Select ${row.subject}`}
+                aria-label={localizedTableLabels.selectRow(row.subject)}
               />
               <Table.Cell>
                 <div className="flex items-center gap-2">
diff --git a/packages/kumo-docs-astro/src/components/demos/TabsDemo.tsx b/packages/kumo-docs-astro/src/components/demos/TabsDemo.tsx
index d5f26759bf..92f98c4dec 100644
--- a/packages/kumo-docs-astro/src/components/demos/TabsDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/TabsDemo.tsx
@@ -145,13 +145,19 @@ export function TabsRenderPropDemo() {
         {
           value: "tab2",
           label: "Link Tab",
-          render: (props) => <a {...props} href="#tab2" />,
+          render: (props) => (
+            <a {...props} href="#tab2">
+              Link Tab
+            </a>
+          ),
         },
         {
           value: "tab3",
           label: "Cloudflare",
           render: (props) => (
-            <a {...props} href="https://cloudflare.com" target="_blank" />
+            <a {...props} href="https://cloudflare.com" target="_blank">
+              Cloudflare
+            </a>
           ),
         },
       ]}
diff --git a/packages/kumo-docs-astro/src/components/docs/StickyDocHeader.tsx b/packages/kumo-docs-astro/src/components/docs/StickyDocHeader.tsx
index ba3ee0e205..c3954d5e27 100644
--- a/packages/kumo-docs-astro/src/components/docs/StickyDocHeader.tsx
+++ b/packages/kumo-docs-astro/src/components/docs/StickyDocHeader.tsx
@@ -18,6 +18,8 @@ export function StickyDocHeader({
   const [showStickyTitle, setShowStickyTitle] = useState(false);
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const headerRef = useRef<HTMLElement>(null);
+  const iconLinkClassName =
+    "relative inline-flex items-center justify-center rounded-sm text-kumo-subtle transition-colors hover:bg-kumo-tint hover:text-kumo-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-brand before:absolute before:left-1/2 before:top-1/2 before:min-h-6 before:min-w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']";
 
   // Watch for sidebar state changes
   useEffect(() => {
@@ -69,6 +71,7 @@ export function StickyDocHeader({
       {/* Sticky title that appears when sidebar is collapsed - positioned to appear after "Kumo" */}
       {!sidebarOpen && (
         <div
+          aria-hidden={!showStickyTitle}
           className={cn(
             "pointer-events-none fixed top-0 left-12 z-50 flex h-12 items-center font-medium transition-opacity duration-200 select-none",
             showStickyTitle ? "opacity-100" : "opacity-0",
@@ -83,7 +86,7 @@ export function StickyDocHeader({
                 href={githubSourceUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-kumo-subtle transition-colors hover:text-kumo-default"
+                className={iconLinkClassName}
                 title="View source on GitHub"
                 aria-label="View source on GitHub"
                 tabIndex={showStickyTitle ? 0 : -1}
@@ -96,7 +99,7 @@ export function StickyDocHeader({
                 href={baseUIUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-kumo-subtle transition-colors hover:text-kumo-default"
+                className={iconLinkClassName}
                 title="View Base UI documentation"
                 aria-label="View Base UI documentation"
                 tabIndex={showStickyTitle ? 0 : -1}
@@ -115,6 +118,7 @@ export function StickyDocHeader({
       >
         <div className="flex min-w-0 flex-1 items-center justify-between px-4 md:border-r md:border-kumo-hairline">
           <div
+            aria-hidden={!(showStickyTitle && sidebarOpen)}
             className={cn(
               "flex items-center gap-2 transition-opacity duration-200",
               showStickyTitle && sidebarOpen
@@ -130,7 +134,7 @@ export function StickyDocHeader({
                 href={githubSourceUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-kumo-subtle transition-colors hover:text-kumo-default"
+                className={iconLinkClassName}
                 title="View source on GitHub"
                 aria-label="View source on GitHub"
                 tabIndex={showStickyTitle && sidebarOpen ? 0 : -1}
@@ -143,7 +147,7 @@ export function StickyDocHeader({
                 href={baseUIUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-kumo-subtle transition-colors hover:text-kumo-default"
+                className={iconLinkClassName}
                 title="View Base UI documentation"
                 aria-label="View Base UI documentation"
                 tabIndex={showStickyTitle && sidebarOpen ? 0 : -1}
diff --git a/packages/kumo-docs-astro/src/components/docs/TableOfContents.tsx b/packages/kumo-docs-astro/src/components/docs/TableOfContents.tsx
index a0e90a9c9c..e7449236f2 100644
--- a/packages/kumo-docs-astro/src/components/docs/TableOfContents.tsx
+++ b/packages/kumo-docs-astro/src/components/docs/TableOfContents.tsx
@@ -160,7 +160,7 @@ export function TableOfContents({
             handleClick(slug);
             document
               .getElementById(slug)
-              ?.scrollIntoView({ behavior: "smooth" });
+              ?.scrollIntoView({ behavior: getMotionSafeScrollBehavior() });
           }}
           className="w-full appearance-none rounded-lg border border-kumo-hairline bg-kumo-base px-4 py-2.5 pr-10 text-sm text-kumo-default"
         >
@@ -228,3 +228,12 @@ export function TableOfContents({
     </TOC>
   );
 }
+
+function getMotionSafeScrollBehavior(): ScrollBehavior {
+  const prefersReducedMotion =
+    typeof window !== "undefined" &&
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  return prefersReducedMotion ? "auto" : "smooth";
+}
diff --git a/packages/kumo-docs-astro/src/layouts/MainLayout.astro b/packages/kumo-docs-astro/src/layouts/MainLayout.astro
index 2ceaf7432c..1237798987 100644
--- a/packages/kumo-docs-astro/src/layouts/MainLayout.astro
+++ b/packages/kumo-docs-astro/src/layouts/MainLayout.astro
@@ -13,6 +13,10 @@ const currentPath = Astro.url.pathname;
 
 <BaseLayout title={title} description={description}>
   <div class="isolate">
+    <a class="docs-skip-link" href="#main-content">
+      Skip to main content
+    </a>
+
     <SidebarNav currentPath={currentPath} client:load />
 
     <script is:inline>
@@ -41,6 +45,7 @@ const currentPath = Astro.url.pathname;
     <!-- Main content area - margin controlled by CSS :has() based on sidebar state -->
     <div
       id="main-content"
+      tabindex="-1"
       class="main-content mt-12 md:mt-0 md:ml-12 transition-[margin] duration-300"
     >
       <slot />
@@ -49,6 +54,43 @@ const currentPath = Astro.url.pathname;
 </BaseLayout>
 
 <style is:global>
+  .docs-skip-link {
+    position: fixed;
+    top: 0.75rem;
+    left: 0.75rem;
+    z-index: 60;
+    display: inline-flex;
+    align-items: center;
+    border-radius: 0.5rem;
+    background: var(--color-kumo-elevated);
+    color: var(--text-color-kumo-default);
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+    text-decoration: none;
+    outline: 2px solid var(--color-kumo-brand);
+    outline-offset: 2px;
+    pointer-events: none;
+    opacity: 0;
+    transform: translateY(calc(-100% - 1rem));
+    transition:
+      opacity 150ms,
+      transform 150ms;
+  }
+
+  .docs-skip-link:focus {
+    pointer-events: auto;
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .docs-skip-link {
+      transition: none;
+    }
+  }
+
   /* Use CSS :has() to detect sidebar state and adjust main content margin */
   @media (min-width: 768px) {
     /* When sidebar is open, add full margin */
diff --git a/packages/kumo-docs-astro/src/pages/blocks/page-header.mdx b/packages/kumo-docs-astro/src/pages/blocks/page-header.mdx
index 8f0463dc19..302f84ef5f 100644
--- a/packages/kumo-docs-astro/src/pages/blocks/page-header.mdx
+++ b/packages/kumo-docs-astro/src/pages/blocks/page-header.mdx
@@ -84,9 +84,9 @@ export default function Example() {
     <PageHeader
       breadcrumbs={
         <Breadcrumbs>
-          <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
+          <Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
           <Breadcrumbs.Separator />
-          <Breadcrumbs.Link href="#">Projects</Breadcrumbs.Link>
+          <Breadcrumbs.Link href="/projects">Projects</Breadcrumbs.Link>
           <Breadcrumbs.Separator />
           <Breadcrumbs.Current>My Project</Breadcrumbs.Current>
         </Breadcrumbs>
diff --git a/packages/kumo-docs-astro/src/pages/charts/custom.mdx b/packages/kumo-docs-astro/src/pages/charts/custom.mdx
index aaddf9eb48..f1c8da687d 100644
--- a/packages/kumo-docs-astro/src/pages/charts/custom.mdx
+++ b/packages/kumo-docs-astro/src/pages/charts/custom.mdx
@@ -14,6 +14,27 @@ import ComponentExample from "~/components/docs/ComponentExample.astro";
 
 <ComponentSection>
 
+## Accessibility and localization
+
+The low-level `Chart` component accepts Kumo-owned `ariaLabel` and
+`ariaDescription` props. Provide localized text that names the chart and
+summarizes the data or trend for screen reader users. Register ECharts'
+`AriaComponent` when you want ECharts to generate its own data summary from the
+chart options.
+
+```tsx
+<Chart
+  echarts={echarts}
+  options={options}
+  ariaLabel={t("charts.planBreakdown.label")}
+  ariaDescription={t("charts.planBreakdown.description")}
+/>
+```
+
+</ComponentSection>
+
+<ComponentSection>
+
 ## Custom Chart
 
   <ComponentExample demo="PieChartDemo">
diff --git a/packages/kumo-docs-astro/src/pages/charts/sankey.astro b/packages/kumo-docs-astro/src/pages/charts/sankey.astro
index 8e730a9f5b..907858a98f 100644
--- a/packages/kumo-docs-astro/src/pages/charts/sankey.astro
+++ b/packages/kumo-docs-astro/src/pages/charts/sankey.astro
@@ -53,11 +53,11 @@ import {
       code={`import { SankeyChart, ChartPalette } from "@cloudflare/kumo";
 import * as echarts from "echarts/core";
 import { SankeyChart as SankeyChartType } from "echarts/charts";
-import { TooltipComponent } from "echarts/components";
+import { AriaComponent, TooltipComponent } from "echarts/components";
 import { CanvasRenderer } from "echarts/renderers";
 
 // Register required ECharts modules
-echarts.use([SankeyChartType, TooltipComponent, CanvasRenderer]);
+echarts.use([SankeyChartType, AriaComponent, TooltipComponent, CanvasRenderer]);
 
 const nodes = [
   { name: "Users", value: 103600, color: ChartPalette.categorical(0) },
@@ -74,12 +74,37 @@ const links = [
 ];
 
 export default function Example() {
-  return <SankeyChart echarts={echarts} nodes={nodes} links={links} height={300} />;
+  return (
+    <SankeyChart
+      echarts={echarts}
+      nodes={nodes}
+      links={links}
+      height={300}
+      ariaLabel="User traffic flow by destination"
+      ariaDescription="Shows traffic flowing from users and devices to apps and tunnels."
+    />
+  );
 }`}
       lang="tsx"
     />
   </ComponentSection>
 
+  <ComponentSection>
+    <Heading level={2}>Accessibility</Heading>
+    <p class="mb-4 text-kumo-subtle">
+      Provide a localized <code class="text-kumo-default">ariaLabel</code> and, when useful,
+      <code class="text-kumo-default">ariaDescription</code> so screen reader users know what the diagram represents.
+      Register ECharts' <code class="text-kumo-default">AriaComponent</code> to enable generated data summaries.
+    </p>
+    <p class="mb-4 text-kumo-subtle">
+      When <code class="text-kumo-default">onNodeClick</code> or <code class="text-kumo-default">onLinkClick</code>
+      is provided, SankeyChart renders a keyboard-accessible fallback action list. Use
+      <code class="text-kumo-default">keyboardActionsLabel</code>,
+      <code class="text-kumo-default">getNodeActionLabel</code>, and
+      <code class="text-kumo-default">getLinkActionLabel</code> to localize those actions.
+    </p>
+  </ComponentSection>
+
   <!-- Examples -->
   <ComponentSection>
     <Heading level={2} class="mb-6">Examples</Heading>
@@ -157,6 +182,10 @@ const customTooltip = (params: SankeyTooltipParams) => {
   links={links} 
   onNodeClick={(node) => console.log(node)}
   onLinkClick={(link) => console.log(link)}
+  ariaLabel="Interactive traffic flow"
+  getNodeActionLabel={(node) => "Select " + node.name}
+  getLinkActionLabel={(link, { sourceName, targetName }) =>
+    "Select link from " + sourceName + " to " + targetName}
 />`}>
           <SankeyChartInteractiveDemo client:visible />
         </ComponentExample>
diff --git a/packages/kumo-docs-astro/src/pages/charts/timeseries.mdx b/packages/kumo-docs-astro/src/pages/charts/timeseries.mdx
index 26f903b235..8342d777cb 100644
--- a/packages/kumo-docs-astro/src/pages/charts/timeseries.mdx
+++ b/packages/kumo-docs-astro/src/pages/charts/timeseries.mdx
@@ -28,6 +28,44 @@ import {
 
 <ComponentSection>
 
+## Accessibility and localization
+
+<p>
+  Provide a localized <code>ariaLabel</code> so assistive technologies can
+  identify the chart, and add <code>ariaDescription</code> when the visual trend
+  needs a longer summary. Register ECharts' <code>AriaComponent</code> in your
+  chart setup so the generated data summary is available alongside Kumo's
+  wrapper label and description.
+</p>
+
+<p>
+  Localize axis names and formatter output with <code>xAxisName</code>,
+  <code>yAxisName</code>, <code>xAxisTickFormat</code>,
+  <code>yAxisTickFormat</code>, and <code>tooltipValueFormat</code>. When using
+  <code>loading</code>, override <code>loadingText</code> with localized status
+  text; it defaults to <code>"Loading chart"</code>.
+</p>
+
+```tsx
+<TimeseriesChart
+  echarts={echarts}
+  data={data}
+  ariaLabel={t("charts.requests.label")}
+  ariaDescription={t("charts.requests.description")}
+  loading={isLoading}
+  loadingText={t("charts.loading")}
+  xAxisName={t("charts.axis.time")}
+  yAxisName={t("charts.axis.requests")}
+  tooltipValueFormat={(value) =>
+    new Intl.NumberFormat(locale).format(value)
+  }
+/>
+```
+
+</ComponentSection>
+
+<ComponentSection>
+
 ## Basic Line Chart
 
 <p>A simple line chart displaying multiple data series over time.</p>
@@ -88,9 +126,43 @@ import {
 
 <p>
   Enable time range selection by providing the <code>onTimeRangeChange</code>
-  callback. Users can click and drag on the chart to select a time range.
+  callback. Users can click and drag on the chart to select a time range, and
+  Kumo also renders fallback controls below the chart so the same range callback
+  is available without drag gestures.
 </p>
 
+<p>
+  The fallback includes keyboard and single-pointer controls for choosing start
+  and end timestamps, applying the selected range, or using the full available
+  range. Localize the control copy with <code>timeRangeControlsLabels</code>, and
+  format timestamp choices with <code>timeRangeControlsFormat</code>. When
+  <code>timeRangeControlsFormat</code> is omitted, the controls use
+  <code>xAxisTickFormat</code> when provided, then fall back to the browser locale.
+</p>
+
+```tsx
+<TimeseriesChart
+  echarts={echarts}
+  data={data}
+  onTimeRangeChange={(from, to) => setRange([from, to])}
+  timeRangeControlsLabels={{
+    groupLabel: t("charts.range.group"),
+    instructions: t("charts.range.instructions"),
+    startLabel: t("charts.range.start"),
+    endLabel: t("charts.range.end"),
+    applyLabel: t("charts.range.apply"),
+    fullRangeLabel: t("charts.range.full"),
+    emptyLabel: t("charts.range.empty"),
+  }}
+  timeRangeControlsFormat={(timestamp) =>
+    new Intl.DateTimeFormat(locale, {
+      hour: "2-digit",
+      minute: "2-digit",
+    }).format(timestamp)
+  }
+/>
+```
+
   <ComponentExample demo="TimeRangeSelectionChartDemo">
     <TimeRangeSelectionChartDemo client:visible />
   </ComponentExample>
diff --git a/packages/kumo-docs-astro/src/pages/components/autocomplete.mdx b/packages/kumo-docs-astro/src/pages/components/autocomplete.mdx
index b89b224636..a43d164c2a 100644
--- a/packages/kumo-docs-astro/src/pages/components/autocomplete.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/autocomplete.mdx
@@ -61,6 +61,34 @@ import {
 </p>
 </ComponentSection>
 
+{/* Accessibility */}
+
+<ComponentSection>
+
+## Accessibility
+
+<p>
+  Every autocomplete input needs an accessible name. Prefer the root `label`
+  prop for visible field labels. For compact or visually labelled layouts, pass
+  `aria-label` or `aria-labelledby` to `Autocomplete.InputGroup`. Placeholder
+  text is only a hint and does not count as the accessible name.
+</p>
+
+```tsx
+<Autocomplete items={countries} label="Country">
+  <Autocomplete.InputGroup placeholder="Search countries…" />
+</Autocomplete>
+
+<Autocomplete items={countries}>
+  <Autocomplete.InputGroup
+    aria-label="Search countries"
+    placeholder="Search countries…"
+  />
+</Autocomplete>
+```
+
+</ComponentSection>
+
 {/* Controlled */}
 
 <ComponentSection>
@@ -159,7 +187,7 @@ function LanguagePicker() {
   );
 
   return (
-    <Autocomplete items={languages} filter={filter}>
+    <Autocomplete items={languages} label="Language" filter={filter}>
       {/* ... */}
     </Autocomplete>
   );
@@ -172,7 +200,7 @@ function LanguagePicker() {
 </p>
 
 ```tsx
-<Autocomplete items={results} filter={null}>
+<Autocomplete items={results} label="Search results" filter={null}>
   ...
 </Autocomplete>
 ```
@@ -193,8 +221,8 @@ function LanguagePicker() {
 ### Autocomplete.InputGroup
 
 <p>
-  Self-contained input wrapper that renders the text input, clear button, and
-  dropdown trigger together.
+  Styled text input. Provide its accessible name with the root `label`, or pass
+  `aria-label` / `aria-labelledby` here when there is no visible label.
 </p>
 <PropsTable component="Autocomplete.InputGroup" />
 
diff --git a/packages/kumo-docs-astro/src/pages/components/banner.mdx b/packages/kumo-docs-astro/src/pages/components/banner.mdx
index add726b8fe..02cd0a9db5 100644
--- a/packages/kumo-docs-astro/src/pages/components/banner.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/banner.mdx
@@ -70,6 +70,54 @@ export default function Example() {
 
 </ComponentSection>
 
+{/* Accessibility and localization */}
+
+<ComponentSection>
+
+## Accessibility and localization
+
+<p>
+  Banner forwards native <code>div</code> attributes. Use live-region attributes
+  only for banners that appear or change after page load. For non-critical
+  status updates, pass <code>role="status"</code> with
+  <code>aria-live="polite"</code>.
+</p>
+
+```tsx
+<Banner
+  role="status"
+  aria-live="polite"
+  icon={<Info weight="fill" />}
+  title="Update available"
+  description="A new version is ready to install."
+/>
+```
+
+<p>
+  For critical errors that should be announced immediately, pass
+  <code>role="alert"</code>. Do not use <code>role="banner"</code> on this
+  component; that role is reserved for page or site header landmarks.
+</p>
+
+```tsx
+<Banner
+  role="alert"
+  variant="error"
+  icon={<WarningCircle weight="fill" />}
+  title="Save failed"
+  description="We couldn't save your changes. Please try again."
+/>
+```
+
+<p>
+  Localize visible <code>title</code> and <code>description</code> content before
+  passing it to Banner. Native live-region attributes such as
+  <code>role</code> and <code>aria-live</code> are inherited and intentionally do
+  not appear in the generated props table.
+</p>
+
+</ComponentSection>
+
 {/* Examples */}
 
 <ComponentSection>
diff --git a/packages/kumo-docs-astro/src/pages/components/breadcrumbs.mdx b/packages/kumo-docs-astro/src/pages/components/breadcrumbs.mdx
index f18f2e162a..a068f3b2f1 100644
--- a/packages/kumo-docs-astro/src/pages/components/breadcrumbs.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/breadcrumbs.mdx
@@ -13,6 +13,7 @@ import {
   BreadcrumbsDemo,
   BreadcrumbsWithIconsDemo,
   BreadcrumbsWithClipboardDemo,
+  BreadcrumbsLocalizedDemo,
   BreadcrumbsLoadingDemo,
   BreadcrumbsRootDemo,
 } from "~/components/demos/BreadcrumbsDemo";
@@ -82,6 +83,19 @@ import {
 
 <ComponentSection>
 
+### Localized labels
+
+Breadcrumbs renders a navigation landmark. Use the `labels` prop to localize
+the landmark name and clipboard copy text; don't replace it with `role="banner"`.
+For one-off copy actions, pass `labels` directly to `Breadcrumbs.Clipboard`.
+
+  <ComponentExample demo="BreadcrumbsLocalizedDemo">
+    <BreadcrumbsLocalizedDemo client:visible />
+  </ComponentExample>
+</ComponentSection>
+
+<ComponentSection>
+
 ## API Reference
 
 ### Breadcrumbs
diff --git a/packages/kumo-docs-astro/src/pages/components/button.mdx b/packages/kumo-docs-astro/src/pages/components/button.mdx
index e9ab8ddef3..07f4264ee3 100644
--- a/packages/kumo-docs-astro/src/pages/components/button.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/button.mdx
@@ -163,11 +163,11 @@ export default function Example() {
 ### Icon Only
 
 <p>
-  For icon-only buttons, use `shape="square"` or `shape="circle"` with the
-  `icon` prop.
-  <strong>Always include `aria-label`</strong>
-  for accessibility — without visible text, screen readers need the label to
-  convey the button's purpose.
+  Icon-only buttons need an accessible name regardless of shape. Use
+  `shape="square"` or `shape="circle"` for the common compact treatments, and
+  always provide localized text with `aria-label` or `aria-labelledby` whenever
+  there is no visible button text. The English labels below are examples only;
+  use names that match your product's locale.
 </p>
 <ComponentExample
   demo="ButtonIconOnlyDemo"
diff --git a/packages/kumo-docs-astro/src/pages/components/clipboard-text.mdx b/packages/kumo-docs-astro/src/pages/components/clipboard-text.mdx
index 554e44f5a0..8955ff8d08 100644
--- a/packages/kumo-docs-astro/src/pages/components/clipboard-text.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/clipboard-text.mdx
@@ -61,6 +61,53 @@ export default function Example() {
 
 </ComponentSection>
 
+{/* Accessibility and localization */}
+
+<ComponentSection>
+
+## Accessibility and localization
+
+<p>
+  ClipboardText includes Kumo-owned strings for the icon-only copy button,
+  tooltip, and copied status. Pass these user-facing and assistive labels in
+  your consumer's language.
+</p>
+
+<ul class="list-disc list-inside space-y-1">
+  <li>
+    <code>labels.copyAction</code> names the copy button for assistive
+    technology. It defaults to <code>"Copy to clipboard"</code>.
+  </li>
+  <li>
+    <code>tooltip.text</code> shows the hover tooltip when tooltip mode is
+    enabled. It defaults to <code>"Copy"</code>.
+  </li>
+  <li>
+    <code>tooltip.copiedText</code> shows the copied toast in tooltip mode and
+    announces the copied status. It defaults to <code>"Copied"</code>.
+  </li>
+</ul>
+
+```tsx
+<ClipboardText
+  text="sk_live_***********"
+  textToCopy="sk_live_51H8_abc123"
+  labels={{ copyAction: t("clipboard.copyAction") }}
+  tooltip={{
+    text: t("clipboard.copy"),
+    copiedText: t("clipboard.copied"),
+  }}
+/>
+```
+
+<p>
+  The generated props table focuses on Kumo-owned props and does not enumerate
+  inherited ARIA/native attributes. Use the localization props above for
+  ClipboardText's built-in controls.
+</p>
+
+</ComponentSection>
+
 {/* Examples */}
 
 <ComponentSection>
diff --git a/packages/kumo-docs-astro/src/pages/components/combobox.mdx b/packages/kumo-docs-astro/src/pages/components/combobox.mdx
index ab3a7ff80b..2fcf3a9113 100644
--- a/packages/kumo-docs-astro/src/pages/components/combobox.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/combobox.mdx
@@ -67,7 +67,12 @@ export default function Example() {
   const [value, setValue] = useState<string | null>(null);
 
   return (
-    <Combobox value={value} onValueChange={setValue} items={fruits}>
+    <Combobox
+      value={value}
+      onValueChange={setValue}
+      items={fruits}
+      label="Fruit"
+    >
       <Combobox.TriggerInput placeholder="Select a fruit" />
       <Combobox.Content>
         <Combobox.Empty />
@@ -86,6 +91,88 @@ export default function Example() {
 
 </ComponentSection>
 
+<ComponentSection>
+
+## Accessibility
+
+<p>
+  Every combobox trigger or search input needs an accessible name. Prefer the
+  root `label` prop for visible field labels. For compact or custom layouts,
+  pass `aria-label` or `aria-labelledby` to `Combobox.TriggerInput`,
+  `Combobox.TriggerValue`, `Combobox.TriggerMultipleWithInput`, or popup
+  `Combobox.Input` as needed. Placeholder text is only a hint and does not
+  count as the accessible name.
+</p>
+
+```tsx
+<Combobox items={fruits} label="Fruit">
+  <Combobox.TriggerInput placeholder="Select a fruit" />
+</Combobox>
+
+<Combobox items={fruits}>
+  <Combobox.TriggerInput
+    aria-label="Select fruit"
+    placeholder="Select a fruit"
+  />
+</Combobox>
+```
+
+</ComponentSection>
+
+<ComponentSection>
+
+## Localization
+
+<p>
+  Combobox exposes a few Kumo-owned strings for localizing secondary controls
+  and empty states:
+</p>
+
+<ul class="list-disc list-inside space-y-1">
+  <li>
+    <code>Combobox.TriggerInput.clearLabel</code> labels the clear-selection
+    button.
+  </li>
+  <li>
+    <code>Combobox.TriggerInput.showOptionsLabel</code> labels the dropdown
+    options button.
+  </li>
+  <li>
+    <code>Combobox.Chip.removeLabel</code> labels each chip remove button in
+    multiple mode.
+  </li>
+  <li>
+    <code>Combobox.Empty</code> children provide localized empty-state content.
+  </li>
+</ul>
+
+```tsx
+<Combobox items={fruits} label="Fruit">
+  <Combobox.TriggerInput
+    clearLabel="Clear selected fruit"
+    placeholder="Select a fruit"
+    showOptionsLabel="Show fruit options"
+  />
+  <Combobox.Content>
+    <Combobox.Empty>No fruit found.</Combobox.Empty>
+    <Combobox.List>{/* ... */}</Combobox.List>
+  </Combobox.Content>
+</Combobox>
+
+<Combobox multiple items={bots} label="Bots">
+  <Combobox.TriggerMultipleWithInput
+    placeholder="Select bots"
+    renderItem={(bot) => (
+      <Combobox.Chip key={bot.value} removeLabel={`Remove ${bot.label}`}>
+        {bot.label}
+      </Combobox.Chip>
+    )}
+  />
+</Combobox>
+```
+
+</ComponentSection>
+
 {/* Examples */}
 
 <ComponentSection>
@@ -236,7 +323,7 @@ function LanguagePicker() {
   );
 
   return (
-    <Combobox items={languages} filter={filter}>
+    <Combobox items={languages} label="Language" filter={filter}>
       {/* ... */}
     </Combobox>
   );
@@ -249,7 +336,7 @@ function LanguagePicker() {
 </p>
 
 ```tsx
-<Combobox items={results} filter={null}>
+<Combobox items={results} label="Search results" filter={null}>
   ...
 </Combobox>
 ```
diff --git a/packages/kumo-docs-astro/src/pages/components/command-palette.mdx b/packages/kumo-docs-astro/src/pages/components/command-palette.mdx
index 9bd8e3ed8a..dd733a017a 100644
--- a/packages/kumo-docs-astro/src/pages/components/command-palette.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/command-palette.mdx
@@ -56,6 +56,18 @@ import { CommandPalette } from "@cloudflare/kumo/components/command-palette";
     primitive. It provides accessible keyboard navigation and customizable
     styling for command palette interfaces.
   </p>
+  <p>
+    `CommandPalette.Root` and `CommandPalette.Dialog` render a visually hidden
+    dialog title for screen readers. Set `dialogTitle` to localized text that
+    describes the palette's purpose, such as "Search documentation".
+  </p>
+  <p>
+    `CommandPalette.Loading` and `CommandPalette.Empty` are announced as polite
+    status updates. Localize loading text with the `label` prop, or replace the
+    loading and empty content with localized `children`. When your app owns an
+    async error state, render it with `role="alert"` so the failure is announced
+    assertively.
+  </p>
 
 ```tsx
 import { useState } from "react";
@@ -77,10 +89,13 @@ export default function Example() {
 
   return (
     <>
-      <button onClick={() => setOpen(true)}>Open</button>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open
+      </button>
       <CommandPalette.Root
         open={open}
         onOpenChange={setOpen}
+        dialogTitle="Search actions"
         items={items}
         value={search}
         onValueChange={setSearch}
@@ -189,7 +204,8 @@ export default function Example() {
 
 <p>
   Modal dialog wrapper. Use with Panel for swappable content (e.g., drill-down
-  navigation).
+  navigation). Pass `dialogTitle` to provide a localized accessible name for
+  the dialog.
 </p>
 
 ### CommandPalette.Panel
@@ -205,7 +221,10 @@ export default function Example() {
 
 ### CommandPalette.List
 
-<p>Scrollable container for results.</p>
+<p>
+  Scrollable container for results. Pass `busy` while async results are loading
+  to set `aria-busy` on the results region.
+</p>
 
 ### CommandPalette.Results
 
@@ -237,11 +256,17 @@ export default function Example() {
 
 ### CommandPalette.Empty
 
-<p>Empty state when no results match.</p>
+<p>
+  Empty state when no results match. Its children are announced as a polite
+  status update, so pass localized empty-state text.
+</p>
 
 ### CommandPalette.Loading
 
-<p>Loading spinner state.</p>
+<p>
+  Loading spinner state announced as a polite busy status. Pass a localized
+  `label`, or provide localized `children` when replacing the default spinner.
+</p>
 
 ### CommandPalette.Footer
 
@@ -263,6 +288,7 @@ interface CommandPaletteRootProps<TGroup, TItem> {
   // Dialog state
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  dialogTitle?: string; // localized accessible dialog title
   onBackdropClick?: (e: React.MouseEvent) => void;
 
   // Autocomplete
@@ -281,6 +307,24 @@ interface CommandPaletteRootProps<TGroup, TItem> {
 }
 ```
 
+### CommandPalette.List Props
+
+```tsx
+interface CommandPaletteListProps {
+  children: React.ReactNode;
+  busy?: boolean; // sets aria-busy while async results are loading
+}
+```
+
+### CommandPalette.Loading Props
+
+```tsx
+interface CommandPaletteLoadingProps {
+  children?: React.ReactNode;
+  label?: React.ReactNode; // localized status text; default: "Loading results"
+}
+```
+
 ### CommandPalette.ResultItem Props
 
 ```tsx
diff --git a/packages/kumo-docs-astro/src/pages/components/sensitive-input.mdx b/packages/kumo-docs-astro/src/pages/components/sensitive-input.mdx
index 62877df6ff..055d127063 100644
--- a/packages/kumo-docs-astro/src/pages/components/sensitive-input.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/sensitive-input.mdx
@@ -13,6 +13,7 @@ import {
   SensitiveInputSizesDemo,
   SensitiveInputControlledDemo,
   SensitiveInputStatesDemo,
+  SensitiveInputLocalizationDemo,
 } from "~/components/demos/SensitiveInputDemo";
 
 {/* Hero Demo */}
@@ -98,6 +99,59 @@ export default function Example() {
   </ComponentExample>
 </ComponentSection>
 
+{/* Accessibility and localization */}
+
+<ComponentSection>
+
+## Accessibility and localization
+
+<p>
+  SensitiveInput uses native buttons for revealing, hiding, and copying the
+  value. Provide a visible <code>label</code>, <code>aria-label</code>, or
+  <code>aria-labelledby</code> so assistive technologies can identify the
+  sensitive value. SensitiveInput does not add a generic fallback field name;
+  missing names warn in development. Use <code>aria-labelledby</code> when the
+  label is rich content that should stay associated with the reveal and hide
+  controls.
+</p>
+<p>
+  Use the <code>labels</code> prop to localize secondary controls and statuses:
+  reveal/hide button actions, copy button text, masked-state helper text, and
+  live-region status messages. These English defaults are overrideable and do
+  not replace the field's required accessible name.
+</p>
+<ComponentExample demo="SensitiveInputLocalizationDemo">
+  <SensitiveInputLocalizationDemo client:visible />
+</ComponentExample>
+
+```tsx
+<SensitiveInput
+  label="Clé API"
+  defaultValue="sk_live_abc123xyz789"
+  labels={{
+    clickToReveal: "Cliquer pour afficher",
+    revealValue: "Afficher la valeur",
+    hideValue: "Masquer la valeur",
+    copy: "Copier",
+    copyToClipboard: "Copier dans le presse-papiers",
+    copied: "Copié",
+    valueRevealed: "Valeur affichée",
+    valueHidden: "Valeur masquée",
+    copiedToClipboard: "Copié dans le presse-papiers",
+    revealInstruction: "Appuyez sur Entrée ou Espace pour afficher.",
+  }}
+/>
+```
+
+```tsx
+<span id="token-label">
+  Production <strong>API token</strong>
+</span>
+<SensitiveInput aria-labelledby="token-label" defaultValue="sk_live_abc123" />
+```
+
+</ComponentSection>
+
 {/* API Reference */}
 
 <ComponentSection>
diff --git a/packages/kumo-docs-astro/src/pages/components/switch.mdx b/packages/kumo-docs-astro/src/pages/components/switch.mdx
index bd1f5b49f0..3b80142070 100644
--- a/packages/kumo-docs-astro/src/pages/components/switch.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/switch.mdx
@@ -66,7 +66,11 @@ export default function Example() {
   const [checked, setChecked] = useState(false);
 
   return (
-    <Switch checked={checked} onCheckedChange={(val) => setChecked(val)} />
+    <Switch
+      label="Email notifications"
+      checked={checked}
+      onCheckedChange={(val) => setChecked(val)}
+    />
   );
 }
 ```
@@ -175,6 +179,29 @@ export default function Example() {
 
 </ComponentSection>
 
+{/* Accessibility */}
+
+<ComponentSection>
+
+## Accessibility
+
+<p>
+  Every standalone Switch must have a specific accessible name. Prefer a visible
+  <code>label</code>. If the design cannot show a label, provide
+  <code>aria-label</code> or <code>aria-labelledby</code>. Switch does not add a
+  generic English fallback name, so missing labels warn in development.
+</p>
+
+```tsx
+<Switch label="Email notifications" />
+<Switch aria-label="Email notifications" />
+
+<span id="advanced-mode-label">Advanced mode</span>
+<Switch aria-labelledby="advanced-mode-label" />
+```
+
+</ComponentSection>
+
 {/* API Reference */}
 
 <ComponentSection>
diff --git a/packages/kumo-docs-astro/src/pages/components/table.mdx b/packages/kumo-docs-astro/src/pages/components/table.mdx
index e836975bc7..7d4f4fe7b6 100644
--- a/packages/kumo-docs-astro/src/pages/components/table.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/table.mdx
@@ -95,6 +95,22 @@ export default function Example() {
   `onCheckedChange`, which matches the underlying `Checkbox` component's
   signature and exposes optional event details as a second argument.
 </p>
+<p>
+  Provide a localized `aria-label` for each selection checkbox. The legacy
+  `label` prop still works as a fallback, but `aria-label` mirrors the
+  underlying checkbox API and is easy to source from your i18n layer.
+</p>
+
+```tsx
+const tableLabels = {
+  selectAllRows: t("table.selectAllRows"),
+  selectRow: (subject: string) => t("table.selectRow", { subject }),
+};
+
+<Table.CheckHead aria-label={tableLabels.selectAllRows} />
+<Table.CheckCell aria-label={tableLabels.selectRow(row.subject)} />
+```
+
 <p>
   The older `onValueChange` prop still works but is deprecated — the lint
   rule will flag it and it will be removed in a future major version. Migrate
@@ -212,19 +228,26 @@ export default function Example() {
 
 ### Table.CheckHead
 
-<p>Header cell with checkbox for "select all" functionality.</p>
+<p>
+  Header cell with checkbox for "select all" functionality. Pass a localized
+  `aria-label` for the inner checkbox.
+</p>
 <PropsTable component="Table.CheckHead" />
 
 ### Table.CheckCell
 
-<p>Body cell with checkbox for row selection.</p>
+<p>
+  Body cell with checkbox for row selection. Pass a localized `aria-label` for
+  the inner checkbox.
+</p>
 <PropsTable component="Table.CheckCell" />
 
 ### Table.ResizeHandle
 
 <p>
   Draggable handle for column resizing. Use with TanStack Table or custom resize
-  logic.
+  logic. Pass a localized `aria-label` for the button; it defaults to "Resize
+  column" when omitted.
 </p>
 
 </ComponentSection>
@@ -248,6 +271,10 @@ import {
 import { Table } from "@cloudflare/kumo";
 
 function DataTable({ data, columns }) {
+  // Replace this with your app's translation helper.
+  const getResizeLabel = (columnId) =>
+    t("table.resizeColumn", { column: columnId });
+
   const table = useReactTable({
     data,
     columns,
@@ -272,6 +299,7 @@ function DataTable({ data, columns }) {
                   header.getContext(),
                 )}
                 <Table.ResizeHandle
+                  aria-label={getResizeLabel(header.column.id)}
                   onMouseDown={header.getResizeHandler()}
                   onTouchStart={header.getResizeHandler()}
                 />
@@ -314,9 +342,25 @@ function DataTable({ data, columns }) {
 
 <p>
   Always provide `aria-label` for `Table.CheckHead` and `Table.CheckCell` to
-  describe their purpose.
+  describe their purpose. Source these labels from your i18n layer, just like
+  any other user-facing copy.
+</p>
+
+### Resize Control Labels
+
+<p>
+  `Table.ResizeHandle` is a button. Override its default `aria-label` with a
+  localized string, especially when the label should include the column name.
 </p>
 
+```tsx
+<Table.ResizeHandle
+  aria-label={t("table.resizeColumn", { column: column.id })}
+  onMouseDown={column.getResizeHandler()}
+  onTouchStart={column.getResizeHandler()}
+/>
+```
+
 ### Keyboard Navigation
 
 <p>
diff --git a/packages/kumo-docs-astro/src/pages/components/tooltip.mdx b/packages/kumo-docs-astro/src/pages/components/tooltip.mdx
index 786646677f..4a8035936c 100644
--- a/packages/kumo-docs-astro/src/pages/components/tooltip.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/tooltip.mdx
@@ -125,8 +125,16 @@ For delay grouping across multiple tooltips, see [TooltipProvider](#tooltipprovi
   <App />
 </TooltipProvider>
 
-// Then use Tooltip anywhere inside
-<Tooltip content="Add" render={<Button shape="square" icon={PlusIcon} />} />
+// Then use Tooltip anywhere inside. Replace with localized copy for your app.
+const addItemLabel = "Add item";
+
+// Button renders its icon prop as decorative; aria-label names the control.
+<Tooltip
+  content={addItemLabel}
+  render={
+    <Button shape="square" icon={PlusIcon} aria-label={addItemLabel} />
+  }
+/>
 ```
 
 </ComponentSection>
diff --git a/packages/kumo/scripts/component-registry/metadata.ts b/packages/kumo/scripts/component-registry/metadata.ts
index 3fd38fd695..ccb5673e55 100644
--- a/packages/kumo/scripts/component-registry/metadata.ts
+++ b/packages/kumo/scripts/component-registry/metadata.ts
@@ -558,6 +558,64 @@ export const ADDITIONAL_COMPONENT_PROPS: Record<
       description: "Additional CSS classes.",
     },
   },
+  "Table.CheckCell": {
+    checked: {
+      type: "boolean",
+      description: "Whether the row selection checkbox is checked.",
+    },
+    indeterminate: {
+      type: "boolean",
+      description: "Whether the row selection checkbox is indeterminate.",
+    },
+    onCheckedChange: {
+      type: "(checked: boolean, eventDetails?: CheckboxChangeEventDetails) => void",
+      description:
+        "Callback fired when the row selection checkbox changes. The optional second argument carries native event details from the underlying Checkbox.",
+    },
+    onValueChange: {
+      type: "(checked: boolean) => void",
+      description:
+        "Deprecated callback fired when the row selection checkbox changes. Use onCheckedChange instead.",
+    },
+    label: {
+      type: "string",
+      description:
+        "Legacy fallback accessible label for the inner checkbox. Prefer passing a localized aria-label instead.",
+    },
+    disabled: {
+      type: "boolean",
+      description: "Whether the row selection checkbox is disabled.",
+    },
+  },
+  "Table.CheckHead": {
+    checked: {
+      type: "boolean",
+      description: "Whether the select-all checkbox is checked.",
+    },
+    indeterminate: {
+      type: "boolean",
+      description: "Whether the select-all checkbox is indeterminate.",
+    },
+    onCheckedChange: {
+      type: "(checked: boolean, eventDetails?: CheckboxChangeEventDetails) => void",
+      description:
+        "Callback fired when the select-all checkbox changes. The optional second argument carries native event details from the underlying Checkbox.",
+    },
+    onValueChange: {
+      type: "(checked: boolean) => void",
+      description:
+        "Deprecated callback fired when the select-all checkbox changes. Use onCheckedChange instead.",
+    },
+    label: {
+      type: "string",
+      description:
+        "Legacy fallback accessible label for the inner checkbox. Prefer passing a localized aria-label instead.",
+    },
+    disabled: {
+      type: "boolean",
+      description: "Whether the select-all checkbox is disabled.",
+    },
+  },
 };
 
 // =============================================================================
diff --git a/packages/kumo/src/blocks/delete-resource/delete-resource.test.tsx b/packages/kumo/src/blocks/delete-resource/delete-resource.test.tsx
new file mode 100644
index 0000000000..afcd498dbb
--- /dev/null
+++ b/packages/kumo/src/blocks/delete-resource/delete-resource.test.tsx
@@ -0,0 +1,36 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { DeleteResource } from "./delete-resource";
+
+const defaultProps = {
+  open: true,
+  onOpenChange: vi.fn(),
+  resourceType: "Zone",
+  resourceName: "example.com",
+  onDelete: vi.fn(),
+};
+
+describe("DeleteResource", () => {
+  it("uses alert-dialog semantics with title and description", () => {
+    render(<DeleteResource {...defaultProps} />);
+
+    expect(
+      screen.getByRole("alertdialog", {
+        name: "Delete example.com",
+        description:
+          "This action cannot be undone. This will permanently delete the example.com zone.",
+      }),
+    ).toBeTruthy();
+  });
+
+  it("announces delete errors", () => {
+    render(
+      <DeleteResource {...defaultProps} errorMessage="Delete request failed" />,
+    );
+
+    const error = screen.getByRole("alert");
+    expect(error.textContent).toContain("Delete request failed");
+    expect(error.getAttribute("aria-live")).toBe("assertive");
+    expect(error.getAttribute("aria-atomic")).toBe("true");
+  });
+});
diff --git a/packages/kumo/src/blocks/delete-resource/delete-resource.tsx b/packages/kumo/src/blocks/delete-resource/delete-resource.tsx
index 03e58f192b..32944ffacc 100644
--- a/packages/kumo/src/blocks/delete-resource/delete-resource.tsx
+++ b/packages/kumo/src/blocks/delete-resource/delete-resource.tsx
@@ -3,6 +3,7 @@ import {
   Dialog,
   DialogRoot,
   DialogTitle,
+  DialogDescription,
   DialogClose,
 } from "../../components/dialog";
 import { Input } from "../../components/input";
@@ -107,7 +108,7 @@ export function DeleteResource({
   }, [resourceName]);
 
   return (
-    <DialogRoot open={open} onOpenChange={onOpenChange}>
+    <DialogRoot role="alertdialog" open={open} onOpenChange={onOpenChange}>
       <Dialog size={size} className={cn("p-0", className)}>
         <div className="flex items-center justify-between border-b border-kumo-line px-6 py-4">
           <DialogTitle className="text-lg font-semibold">
@@ -132,17 +133,23 @@ export function DeleteResource({
         <div className="flex flex-col p-6 gap-4">
           <div className="flex flex-col gap-2">
             {errorMessage && (
-              <Banner icon={<WarningCircleIcon />} variant="error">
+              <Banner
+                icon={<WarningCircleIcon />}
+                variant="error"
+                role="alert"
+                aria-live="assertive"
+                aria-atomic="true"
+              >
                 {errorMessage}
               </Banner>
             )}
-            <p className="text-base text-kumo-subtle max-w-prose text-pretty">
+            <DialogDescription className="text-base text-kumo-subtle max-w-prose text-pretty">
               This action cannot be undone. This will permanently delete the{" "}
               <span className="font-medium text-kumo-default">
                 {resourceName}
               </span>{" "}
               {resourceType.toLowerCase()}.
-            </p>
+            </DialogDescription>
           </div>
 
           <div className="flex flex-col gap-2">
diff --git a/packages/kumo/src/components/autocomplete/autocomplete.test.tsx b/packages/kumo/src/components/autocomplete/autocomplete.test.tsx
index 7f4bcc4279..3361b60e19 100644
--- a/packages/kumo/src/components/autocomplete/autocomplete.test.tsx
+++ b/packages/kumo/src/components/autocomplete/autocomplete.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import {
   Autocomplete,
   KUMO_AUTOCOMPLETE_VARIANTS,
@@ -13,7 +13,7 @@ function renderAutocomplete(
   props: Partial<React.ComponentProps<typeof Autocomplete>> = {},
 ) {
   return render(
-    <Autocomplete items={countries} {...props}>
+    <Autocomplete items={countries} label="Country" {...props}>
       <Autocomplete.InputGroup placeholder="Search countries…" />
       <Autocomplete.Content>
         <Autocomplete.List>
@@ -29,6 +29,10 @@ function renderAutocomplete(
 }
 
 describe("Autocomplete", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
   // Rendering
 
   it("renders without crashing", () => {
@@ -108,6 +112,25 @@ describe("Autocomplete", () => {
       });
       expect(screen.getByText("Country is required")).toBeTruthy();
     });
+
+    it("associates error with an aria-label-only input", () => {
+      const { container } = render(
+        <Autocomplete items={countries} error="Please select a country">
+          <Autocomplete.InputGroup
+            aria-label="Search countries"
+            placeholder="Search countries…"
+          />
+        </Autocomplete>,
+      );
+
+      const input = screen.getByRole("combobox", { name: "Search countries" });
+      const error = screen.getByText("Please select a country");
+
+      expect(error.id).toBeTruthy();
+      expect(input.getAttribute("aria-invalid")).toBe("true");
+      expect(input.getAttribute("aria-describedby")).toBe(error.id);
+      expect(container.querySelector("label")).toBeNull();
+    });
   });
 
   // Input structure
@@ -126,5 +149,101 @@ describe("Autocomplete", () => {
       const input = screen.getByRole("combobox");
       expect(input.getAttribute("aria-autocomplete")).toBe("list");
     });
+
+    it("passes aria-label through to the input", () => {
+      render(
+        <Autocomplete items={countries}>
+          <Autocomplete.InputGroup
+            aria-label="Search countries"
+            placeholder="Search countries…"
+          />
+        </Autocomplete>,
+      );
+
+      const input = screen.getByRole("combobox", { name: "Search countries" });
+      expect(input.getAttribute("aria-label")).toBe("Search countries");
+    });
+
+    it("associates description with an aria-label-only input", () => {
+      const { container } = render(
+        <Autocomplete
+          items={countries}
+          description="Start typing to filter countries"
+        >
+          <Autocomplete.InputGroup
+            aria-label="Search countries"
+            placeholder="Search countries…"
+          />
+        </Autocomplete>,
+      );
+
+      const input = screen.getByRole("combobox", { name: "Search countries" });
+      const description = screen.getByText("Start typing to filter countries");
+
+      expect(description.id).toBeTruthy();
+      expect(input.getAttribute("aria-describedby")).toBe(description.id);
+      expect(container.querySelector("label")).toBeNull();
+    });
+
+    it("passes aria-labelledby through to the input", () => {
+      render(
+        <>
+          <span id="country-search-label">Country search</span>
+          <Autocomplete items={countries}>
+            <Autocomplete.InputGroup
+              aria-labelledby="country-search-label"
+              placeholder="Search countries…"
+            />
+          </Autocomplete>
+        </>,
+      );
+
+      const input = screen.getByRole("combobox", { name: "Country search" });
+      expect(input.getAttribute("aria-labelledby")).toBe(
+        "country-search-label",
+      );
+    });
+  });
+
+  describe("accessible name warnings", () => {
+    it("warns when InputGroup only has a placeholder", () => {
+      const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      render(
+        <Autocomplete items={countries}>
+          <Autocomplete.InputGroup placeholder="Search countries…" />
+        </Autocomplete>,
+      );
+
+      expect(warnSpy).toHaveBeenCalledWith(
+        "[Kumo Autocomplete]: Autocomplete.InputGroup must have an accessible name. Provide either:\n" +
+          "  - label prop: <Autocomplete label='Country' ... />\n" +
+          "  - aria-label: <Autocomplete.InputGroup aria-label='Search countries' />\n" +
+          "  - aria-labelledby for custom label association",
+      );
+    });
+
+    it("does not warn when the root label provides the accessible name", () => {
+      const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      renderAutocomplete();
+
+      expect(warnSpy).not.toHaveBeenCalled();
+    });
+
+    it("does not warn when aria-label provides the accessible name", () => {
+      const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      render(
+        <Autocomplete items={countries}>
+          <Autocomplete.InputGroup
+            aria-label="Search countries"
+            placeholder="Search countries…"
+          />
+        </Autocomplete>,
+      );
+
+      expect(warnSpy).not.toHaveBeenCalled();
+    });
   });
 });
diff --git a/packages/kumo/src/components/autocomplete/autocomplete.tsx b/packages/kumo/src/components/autocomplete/autocomplete.tsx
index 0165eeea8f..8bb960c850 100644
--- a/packages/kumo/src/components/autocomplete/autocomplete.tsx
+++ b/packages/kumo/src/components/autocomplete/autocomplete.tsx
@@ -1,15 +1,31 @@
 import { Autocomplete as AutocompleteBase } from "@base-ui/react/autocomplete";
 import { CheckIcon } from "@phosphor-icons/react";
-import { createContext, useContext, type ReactNode } from "react";
+import { createContext, useContext, useId, type ReactNode } from "react";
 import { inputVariants, KUMO_INPUT_VARIANTS } from "../input/input";
 import { cn } from "../../utils/cn";
 import { resolveVariant } from "../../utils/resolve-variant";
-import { Field, type FieldErrorMatch } from "../field/field";
+import {
+  Field,
+  normalizeFieldError,
+  type FieldErrorMatch,
+} from "../field/field";
 
-const AutocompleteContext = createContext<{ hasError: boolean }>({
+const AutocompleteContext = createContext<{
+  hasError: boolean;
+  hasLabel: boolean;
+  describedBy?: string;
+}>({
   hasError: false,
+  hasLabel: false,
 });
 
+type AccessibleNameProps = {
+  /** Accessible name for the input when no visible `label` is provided. */
+  "aria-label"?: string;
+  /** ID of an element that labels the input when no visible `label` is provided. */
+  "aria-labelledby"?: string;
+};
+
 /** Autocomplete variant definitions. */
 export const KUMO_AUTOCOMPLETE_VARIANTS = {
   size: KUMO_INPUT_VARIANTS.size,
@@ -46,6 +62,13 @@ export function autocompleteVariants({
   );
 }
 
+function composeAriaDescribedBy(
+  ...ids: Array<string | undefined>
+): string | undefined {
+  const describedBy = ids.filter(Boolean).join(" ");
+  return describedBy || undefined;
+}
+
 /**
  * Autocomplete component props.
  *
@@ -94,6 +117,27 @@ export interface AutocompleteProps {
   error?: string | { message: ReactNode; match: FieldErrorMatch };
 }
 
+function warnIfMissingAccessibleName({
+  hasLabel,
+  ariaLabel,
+  ariaLabelledBy,
+}: {
+  hasLabel: boolean;
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
+}) {
+  if (process.env.NODE_ENV === "production") return;
+
+  if (!hasLabel && !ariaLabel && !ariaLabelledBy) {
+    console.warn(
+      "[Kumo Autocomplete]: Autocomplete.InputGroup must have an accessible name. Provide either:\n" +
+        "  - label prop: <Autocomplete label='Country' ... />\n" +
+        "  - aria-label: <Autocomplete.InputGroup aria-label='Search countries' />\n" +
+        "  - aria-labelledby for custom label association",
+    );
+  }
+}
+
 function Root<ItemValue>({
   label,
   required,
@@ -109,6 +153,16 @@ function Root<ItemValue>({
   description?: ReactNode;
   error?: string | { message: ReactNode; match: FieldErrorMatch };
 }) {
+  const descriptionId = useId();
+  const errorId = useId();
+  const normalizedError = normalizeFieldError(error);
+  const describedBy = !label
+    ? normalizedError
+      ? errorId
+      : description
+        ? descriptionId
+        : undefined
+    : undefined;
   const rootProps = props as Omit<
     AutocompleteBase.Root.Props<ItemValue>,
     "items"
@@ -116,7 +170,13 @@ function Root<ItemValue>({
     items?: readonly ItemValue[];
   };
   const control = (
-    <AutocompleteContext.Provider value={{ hasError: Boolean(error) }}>
+    <AutocompleteContext.Provider
+      value={{
+        hasError: Boolean(normalizedError),
+        hasLabel: Boolean(label),
+        describedBy,
+      }}
+    >
       <AutocompleteBase.Root {...rootProps}>{children}</AutocompleteBase.Root>
     </AutocompleteContext.Provider>
   );
@@ -128,34 +188,64 @@ function Root<ItemValue>({
         required={required}
         labelTooltip={labelTooltip}
         description={description}
-        error={
-          error
-            ? typeof error === "string"
-              ? { message: error, match: true }
-              : error
-            : undefined
-        }
+        error={normalizedError}
       >
         {control}
       </Field>
     );
   }
 
+  if (normalizedError || description) {
+    return (
+      <div className="grid gap-2">
+        {control}
+        {normalizedError ? (
+          <span id={errorId} className="text-sm leading-snug text-kumo-danger">
+            {normalizedError.message}
+          </span>
+        ) : (
+          description && (
+            <span
+              id={descriptionId}
+              className="text-sm leading-snug text-kumo-subtle"
+            >
+              {description}
+            </span>
+          )
+        )}
+      </div>
+    );
+  }
+
   return control;
 }
 
 function InputGroup({
   className,
   size = KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS.size,
-  placeholder,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  ...props
 }: {
   className?: string;
   size?: KumoAutocompleteSize;
   placeholder?: string;
-}) {
-  const { hasError } = useContext(AutocompleteContext);
+} & AccessibleNameProps & {
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling";
+  }) {
+  const { hasError, hasLabel, describedBy } = useContext(AutocompleteContext);
+  warnIfMissingAccessibleName({ hasLabel, ariaLabel, ariaLabelledBy });
+
   return (
     <AutocompleteBase.Input
+      {...props}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      aria-describedby={composeAriaDescribedBy(ariaDescribedBy, describedBy)}
+      aria-invalid={hasError ? true : ariaInvalid}
       className={cn(
         inputVariants({
           size,
@@ -165,7 +255,6 @@ function InputGroup({
         "w-full",
         className,
       )}
-      placeholder={placeholder}
     />
   );
 }
@@ -293,6 +382,9 @@ Separator.displayName = "Autocomplete.Separator";
  *
  * `InputGroup` renders the text input with Input component styling.
  * Pass a `size` prop to `InputGroup` to match the Input component sizes.
+ * Provide an accessible name with `label` on the root, or with
+ * `aria-label`/`aria-labelledby` on `InputGroup`; placeholder text is not a
+ * substitute for an accessible name.
  *
  * @example
  * ```tsx
diff --git a/packages/kumo/src/components/breadcrumbs/breadcrumbs.test.tsx b/packages/kumo/src/components/breadcrumbs/breadcrumbs.test.tsx
new file mode 100644
index 0000000000..46ba6aa543
--- /dev/null
+++ b/packages/kumo/src/components/breadcrumbs/breadcrumbs.test.tsx
@@ -0,0 +1,161 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { HouseIcon } from "@phosphor-icons/react";
+import { Breadcrumb } from "./breadcrumbs";
+
+function mockClipboardWrite() {
+  const writeText = vi.fn().mockResolvedValue(undefined);
+  Object.defineProperty(navigator, "clipboard", {
+    configurable: true,
+    value: { writeText },
+  });
+  return writeText;
+}
+
+describe("Breadcrumbs", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    delete (navigator as Partial<Navigator>).clipboard;
+  });
+
+  it("uses default accessible labels", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Breadcrumb>
+        <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Current>Docs</Breadcrumb.Current>
+        <Breadcrumb.Clipboard text="#docs" />
+      </Breadcrumb>,
+    );
+
+    expect(screen.getByRole("navigation", { name: "Breadcrumb" })).toBeTruthy();
+
+    const copyButton = screen.getAllByRole("button", { name: "Copy" })[0];
+    await user.hover(copyButton);
+
+    expect(await screen.findByText("Click to copy")).toBeTruthy();
+  });
+
+  it("reveals clipboard controls on keyboard focus", () => {
+    render(
+      <Breadcrumb>
+        <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Current>Docs</Breadcrumb.Current>
+        <Breadcrumb.Clipboard text="#docs" />
+      </Breadcrumb>,
+    );
+
+    const copyButton = screen.getAllByRole("button", { name: "Copy" })[0];
+
+    act(() => copyButton.focus());
+
+    expect(document.activeElement).toBe(copyButton);
+    expect(copyButton.className).toContain("focus:opacity-100");
+    expect(copyButton.className).toContain("focus-visible:opacity-100");
+    expect(copyButton.className).toContain("group-focus-within:opacity-100");
+  });
+
+  it("hides decorative icons from assistive technology", () => {
+    const { container } = render(
+      <Breadcrumb>
+        <Breadcrumb.Link href="#" icon={<HouseIcon data-testid="home-icon" />}>
+          Home
+        </Breadcrumb.Link>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Current icon={<HouseIcon data-testid="docs-icon" />}>
+          Docs
+        </Breadcrumb.Current>
+        <Breadcrumb.Clipboard text="#docs" />
+      </Breadcrumb>,
+    );
+
+    const homeIcon = container.querySelector('[data-testid="home-icon"]');
+    const docsIcon = container.querySelector('[data-testid="docs-icon"]');
+    const separatorIcon = container.querySelector(
+      '[aria-hidden="true"] > svg[viewBox="0 0 24 24"]',
+    );
+    const copyButtonIcon = screen
+      .getAllByRole("button", { name: "Copy" })[0]
+      .querySelector("svg");
+
+    expect(homeIcon?.getAttribute("aria-hidden")).toBe("true");
+    expect(homeIcon?.getAttribute("focusable")).toBe("false");
+    expect(docsIcon?.getAttribute("aria-hidden")).toBe("true");
+    expect(docsIcon?.getAttribute("focusable")).toBe("false");
+    expect(separatorIcon?.getAttribute("aria-hidden")).toBe("true");
+    expect(separatorIcon?.getAttribute("focusable")).toBe("false");
+    expect(copyButtonIcon?.getAttribute("aria-hidden")).toBe("true");
+    expect(copyButtonIcon?.getAttribute("focusable")).toBe("false");
+  });
+
+  it("uses localized root and clipboard labels", async () => {
+    const user = userEvent.setup();
+    const writeText = mockClipboardWrite();
+
+    render(
+      <Breadcrumb
+        labels={{
+          navigation: "Ruta de navegación",
+          copyAction: "Copiar",
+          copyTooltip: "Haz clic para copiar",
+          copiedFeedback: "Copiado",
+        }}
+      >
+        <Breadcrumb.Link href="#">Inicio</Breadcrumb.Link>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Current>Documentación</Breadcrumb.Current>
+        <Breadcrumb.Clipboard text="#documentacion" />
+      </Breadcrumb>,
+    );
+
+    expect(
+      screen.getByRole("navigation", { name: "Ruta de navegación" }),
+    ).toBeTruthy();
+
+    const copyButton = screen.getAllByRole("button", { name: "Copiar" })[0];
+    await user.hover(copyButton);
+    expect(await screen.findByText("Haz clic para copiar")).toBeTruthy();
+
+    await user.click(copyButton);
+
+    expect(writeText).toHaveBeenCalledWith("#documentacion");
+    await waitFor(() => expect(screen.getByText("Copiado")).toBeTruthy());
+  });
+
+  it("allows clipboard labels to override root labels", async () => {
+    const user = userEvent.setup();
+    mockClipboardWrite();
+
+    render(
+      <Breadcrumb
+        labels={{
+          navigation: "Ruta de navegación",
+          copyAction: "Copiar",
+          copiedFeedback: "Copiado",
+        }}
+      >
+        <Breadcrumb.Current>Página actual</Breadcrumb.Current>
+        <Breadcrumb.Clipboard
+          text="#actual"
+          labels={{
+            copyAction: "Copiar enlace",
+            copiedFeedback: "Enlace copiado",
+          }}
+        />
+      </Breadcrumb>,
+    );
+
+    const copyButton = screen.getAllByRole("button", {
+      name: "Copiar enlace",
+    })[0];
+    await user.click(copyButton);
+
+    await waitFor(() =>
+      expect(screen.getByText("Enlace copiado")).toBeTruthy(),
+    );
+  });
+});
diff --git a/packages/kumo/src/components/breadcrumbs/breadcrumbs.tsx b/packages/kumo/src/components/breadcrumbs/breadcrumbs.tsx
index 1b2034a667..14b007ec12 100644
--- a/packages/kumo/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/packages/kumo/src/components/breadcrumbs/breadcrumbs.tsx
@@ -1,7 +1,9 @@
 import {
   Children,
   cloneElement,
+  createContext,
   isValidElement,
+  useContext,
   useEffect,
   useState,
   type PropsWithChildren,
@@ -45,6 +47,59 @@ export interface KumoBreadcrumbsVariantsProps {
   size?: KumoBreadcrumbsSize;
 }
 
+/** Labels for internationalization of Breadcrumbs and its clipboard action. */
+export interface BreadcrumbsClipboardLabels {
+  /** Aria label for the copy button. @default "Copy" */
+  copyAction?: string;
+  /** Tooltip text shown before copying. @default "Click to copy" */
+  copyTooltip?: string;
+  /** Feedback text announced after copying. @default "Copied" */
+  copiedFeedback?: string;
+}
+
+export interface BreadcrumbsLabels extends BreadcrumbsClipboardLabels {
+  /** Aria label for the navigation landmark. @default "Breadcrumb" */
+  navigation?: string;
+}
+
+const DEFAULT_BREADCRUMBS_LABELS: Required<BreadcrumbsLabels> = {
+  navigation: "Breadcrumb",
+  copyAction: "Copy",
+  copyTooltip: "Click to copy",
+  copiedFeedback: "Copied",
+};
+
+const BreadcrumbsLabelsContext = createContext<Required<BreadcrumbsLabels>>(
+  DEFAULT_BREADCRUMBS_LABELS,
+);
+
+const DECORATIVE_ICON_PROPS = {
+  "aria-hidden": true,
+  focusable: "false",
+} as const;
+
+function resolveBreadcrumbsLabels(
+  labels?: BreadcrumbsLabels,
+): Required<BreadcrumbsLabels> {
+  return {
+    navigation: labels?.navigation ?? DEFAULT_BREADCRUMBS_LABELS.navigation,
+    copyAction: labels?.copyAction ?? DEFAULT_BREADCRUMBS_LABELS.copyAction,
+    copyTooltip: labels?.copyTooltip ?? DEFAULT_BREADCRUMBS_LABELS.copyTooltip,
+    copiedFeedback:
+      labels?.copiedFeedback ?? DEFAULT_BREADCRUMBS_LABELS.copiedFeedback,
+  };
+}
+
+function useBreadcrumbsLabels(labels?: BreadcrumbsClipboardLabels) {
+  const contextLabels = useContext(BreadcrumbsLabelsContext);
+  return {
+    navigation: contextLabels.navigation,
+    copyAction: labels?.copyAction ?? contextLabels.copyAction,
+    copyTooltip: labels?.copyTooltip ?? contextLabels.copyTooltip,
+    copiedFeedback: labels?.copiedFeedback ?? contextLabels.copiedFeedback,
+  };
+}
+
 export function breadcrumbsVariants({
   size = KUMO_BREADCRUMBS_DEFAULT_VARIANTS.size,
 }: KumoBreadcrumbsVariantsProps = {}) {
@@ -59,6 +114,18 @@ export interface BreadcrumbsItemProps {
   icon?: React.ReactNode;
 }
 
+function DecorativeIcon({ icon }: { icon: ReactNode }) {
+  const iconNode = isValidElement<Record<string, unknown>>(icon)
+    ? cloneElement(icon, DECORATIVE_ICON_PROPS)
+    : icon;
+
+  return (
+    <span className="flex shrink-0 items-center" aria-hidden="true">
+      {iconNode}
+    </span>
+  );
+}
+
 const Link = ({
   href,
   icon,
@@ -73,7 +140,7 @@ const Link = ({
       to={href}
       className="flex min-w-0 max-w-full items-center gap-1 text-kumo-subtle no-underline"
     >
-      {!!icon && <span className="flex shrink-0 items-center">{icon}</span>}
+      {!!icon && <DecorativeIcon icon={icon} />}
       <span className="truncate">{children}</span>
     </LinkComponent>
   );
@@ -92,7 +159,7 @@ function Current({
   if (loading) {
     return (
       <div className="flex w-[125px] min-w-0 items-center gap-1">
-        {icon && <span className="flex shrink-0 items-center">{icon}</span>}
+        {icon && <DecorativeIcon icon={icon} />}
         <SkeletonLine />
       </div>
     );
@@ -103,7 +170,7 @@ function Current({
       className="flex min-w-0 max-w-full items-center gap-1 font-medium"
       aria-current="page"
     >
-      {icon && <span className="flex shrink-0 items-center">{icon}</span>}
+      {icon && <DecorativeIcon icon={icon} />}
       <span className="truncate">{children}</span>
     </div>
   );
@@ -115,7 +182,14 @@ function Separator() {
       className="flex shrink-0 items-center text-kumo-inactive"
       aria-hidden="true"
     >
-      <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
+      <svg
+        width="24"
+        height="24"
+        fill="none"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+        focusable="false"
+      >
         <path
           stroke="currentColor"
           strokeLinecap="round"
@@ -136,8 +210,16 @@ function MobileEllipsis() {
   );
 }
 
-function Clipboard({ text }: { text: string }) {
+export interface BreadcrumbsClipboardProps {
+  /** Text copied to the clipboard. */
+  text: string;
+  /** Overrides for clipboard labels. Root `Breadcrumbs.labels` are used by default. */
+  labels?: BreadcrumbsClipboardLabels;
+}
+
+function Clipboard({ text, labels }: BreadcrumbsClipboardProps) {
   const [isCopied, setIsCopied] = useState(false);
+  const resolvedLabels = useBreadcrumbsLabels(labels);
 
   useEffect(() => {
     if (!isCopied) return;
@@ -158,21 +240,33 @@ function Clipboard({ text }: { text: string }) {
   };
 
   return (
-    <Button
-      variant="ghost"
-      shape="square"
-      size="sm"
-      className="opacity-0 transition-[opacity] group-hover:opacity-100"
-      onClick={handleCopyDeeplink}
-      title="Click to copy"
-      aria-label="Copy"
-    >
-      {isCopied ? (
-        <CheckIcon weight="bold" className="text-kumo-success" />
-      ) : (
-        <CopyIcon weight="regular" />
-      )}
-    </Button>
+    <>
+      <Button
+        variant="ghost"
+        shape="square"
+        size="sm"
+        className="opacity-0 transition-[opacity] group-hover:opacity-100 group-focus-within:opacity-100 focus:opacity-100 focus-visible:opacity-100"
+        onClick={handleCopyDeeplink}
+        title={
+          isCopied ? resolvedLabels.copiedFeedback : resolvedLabels.copyTooltip
+        }
+        aria-label={resolvedLabels.copyAction}
+      >
+        {isCopied ? (
+          <CheckIcon
+            weight="bold"
+            className="text-kumo-success"
+            aria-hidden="true"
+            focusable="false"
+          />
+        ) : (
+          <CopyIcon weight="regular" aria-hidden="true" focusable="false" />
+        )}
+      </Button>
+      <span className="sr-only" aria-live="polite">
+        {isCopied ? resolvedLabels.copiedFeedback : ""}
+      </span>
+    </>
   );
 }
 
@@ -195,6 +289,8 @@ export interface BreadcrumbsProps
     KumoBreadcrumbsVariantsProps {
   /** Additional CSS classes merged via `cn()`. */
   className?: string;
+  /** Accessible labels and clipboard text for i18n. */
+  labels?: BreadcrumbsLabels;
 }
 
 /**
@@ -214,18 +310,22 @@ export function Breadcrumb({
   children,
   size = "base",
   className,
+  labels,
 }: BreadcrumbsProps) {
   const childArray = Children.toArray(children);
   const mobileChildren = getMobileBreadcrumbChildren(childArray);
+  const resolvedLabels = resolveBreadcrumbsLabels(labels);
 
   return (
-    <nav
-      className={cn(breadcrumbsVariants({ size }), className)}
-      aria-label="breadcrumb"
-    >
-      <div className="contents sm:hidden">{mobileChildren}</div>
-      <div className="hidden sm:contents">{childArray}</div>
-    </nav>
+    <BreadcrumbsLabelsContext.Provider value={resolvedLabels}>
+      <nav
+        className={cn(breadcrumbsVariants({ size }), className)}
+        aria-label={resolvedLabels.navigation}
+      >
+        <div className="contents sm:hidden">{mobileChildren}</div>
+        <div className="hidden sm:contents">{childArray}</div>
+      </nav>
+    </BreadcrumbsLabelsContext.Provider>
   );
 }
 
diff --git a/packages/kumo/src/components/breadcrumbs/index.ts b/packages/kumo/src/components/breadcrumbs/index.ts
index 6c7a3a0945..7567c81ae7 100644
--- a/packages/kumo/src/components/breadcrumbs/index.ts
+++ b/packages/kumo/src/components/breadcrumbs/index.ts
@@ -3,6 +3,9 @@ export {
   breadcrumbsVariants,
   KUMO_BREADCRUMBS_VARIANTS,
   KUMO_BREADCRUMBS_DEFAULT_VARIANTS,
+  type BreadcrumbsClipboardLabels,
+  type BreadcrumbsClipboardProps,
+  type BreadcrumbsLabels,
   type BreadcrumbsProps,
   type KumoBreadcrumbsSize,
   type KumoBreadcrumbsVariantsProps,
diff --git a/packages/kumo/src/components/button/button.test.tsx b/packages/kumo/src/components/button/button.test.tsx
index 857cafdfdc..fdf06a4b4e 100644
--- a/packages/kumo/src/components/button/button.test.tsx
+++ b/packages/kumo/src/components/button/button.test.tsx
@@ -1,10 +1,14 @@
 import React from "react";
-import { describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { Plus } from "@phosphor-icons/react";
-import { Button, RefreshButton, LinkButton } from "./button";
+import { Button, RefreshButton, LinkButton, buttonVariants } from "./button";
 
 describe("Button", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
   describe("children wrapper", () => {
     it("wraps children in a span with className='contents'", () => {
       render(<Button>Save</Button>);
@@ -59,6 +63,21 @@ describe("Button", () => {
     expect(button.hasAttribute("disabled")).toBe(true);
   });
 
+  it("adds a 24px non-layout hit area to xs buttons", () => {
+    const classes = buttonVariants({ size: "xs" });
+
+    expect(classes).toContain("before:min-h-6");
+    expect(classes).toContain("before:min-w-6");
+  });
+
+  it("preserves xs icon button visual size while expanding hit area", () => {
+    const classes = buttonVariants({ size: "xs", shape: "square" });
+
+    expect(classes).toContain("size-3.5");
+    expect(classes).toContain("before:min-h-6");
+    expect(classes).toContain("before:min-w-6");
+  });
+
   it("forwards ref to the <button> DOM node", () => {
     const ref = React.createRef<HTMLButtonElement>();
     render(<Button ref={ref}>Click</Button>);
@@ -78,6 +97,8 @@ describe("Button", () => {
       expect(svg).toBeTruthy();
       // Should not be the loader (no role="status")
       expect(svg!.getAttribute("role")).not.toBe("status");
+      expect(svg!.getAttribute("aria-hidden")).toBe("true");
+      expect(svg!.getAttribute("focusable")).toBe("false");
     });
 
     it("renders loader instead of icon in loading state", () => {
@@ -103,6 +124,57 @@ describe("Button", () => {
       const button = screen.getByRole("button", { name: "Add" });
       const svg = button.querySelector("svg");
       expect(svg).toBeTruthy();
+      expect(svg!.getAttribute("aria-hidden")).toBe("true");
+      expect(svg!.getAttribute("focusable")).toBe("false");
+    });
+  });
+
+  describe("accessible name safeguards", () => {
+    it("warns for an icon-only button without an accessible name", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      render(<Button icon={Plus} />);
+
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringContaining(
+          "[Kumo Button]: Button must have an accessible name",
+        ),
+      );
+      const button = screen.getByRole("button");
+      expect(button.getAttribute("aria-label")).toBeNull();
+      expect(screen.queryByRole("button", { name: "Button" })).toBeNull();
+    });
+
+    it("does not warn when aria-label names a base-shape icon-only button", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      render(<Button icon={Plus} aria-label="Add item" />);
+
+      expect(warn).not.toHaveBeenCalled();
+      expect(screen.getByRole("button", { name: "Add item" })).toBeTruthy();
+    });
+
+    it("does not warn when aria-labelledby provides the accessible name", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      render(
+        <>
+          <span id="refresh-label">Refresh data</span>
+          <Button icon={Plus} aria-labelledby="refresh-label" />
+        </>,
+      );
+
+      expect(warn).not.toHaveBeenCalled();
+      expect(screen.getByRole("button", { name: "Refresh data" })).toBeTruthy();
+    });
+
+    it("does not warn when visible text provides the accessible name", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      render(<Button icon={Plus}>Add item</Button>);
+
+      expect(warn).not.toHaveBeenCalled();
+      expect(screen.getByRole("button", { name: "Add item" })).toBeTruthy();
     });
   });
 
@@ -124,6 +196,15 @@ describe("RefreshButton", () => {
     render(<RefreshButton aria-label="Reload workers" />);
     expect(screen.getByRole("button", { name: "Reload workers" })).toBeTruthy();
   });
+
+  it("renders its refresh icon as decorative", () => {
+    render(<RefreshButton />);
+    const button = screen.getByRole("button", { name: "Refresh" });
+    const svg = button.querySelector("svg");
+    expect(svg).toBeTruthy();
+    expect(svg!.getAttribute("aria-hidden")).toBe("true");
+    expect(svg!.getAttribute("focusable")).toBe("false");
+  });
 });
 
 describe("LinkButton", () => {
@@ -145,6 +226,19 @@ describe("LinkButton", () => {
     expect(link.getAttribute("rel")).toBe("noopener noreferrer");
   });
 
+  it("renders icon prop as decorative", () => {
+    render(
+      <LinkButton href="/new" icon={Plus}>
+        New item
+      </LinkButton>,
+    );
+    const link = screen.getByRole("link", { name: "New item" });
+    const svg = link.querySelector("svg");
+    expect(svg).toBeTruthy();
+    expect(svg!.getAttribute("aria-hidden")).toBe("true");
+    expect(svg!.getAttribute("focusable")).toBe("false");
+  });
+
   it("forwards ref to the <a> DOM node", () => {
     const ref = React.createRef<HTMLAnchorElement>();
     render(
diff --git a/packages/kumo/src/components/button/button.tsx b/packages/kumo/src/components/button/button.tsx
index d00bf14fdc..524c628c62 100644
--- a/packages/kumo/src/components/button/button.tsx
+++ b/packages/kumo/src/components/button/button.tsx
@@ -127,10 +127,11 @@ export function buttonVariants({
   shape = KUMO_BUTTON_DEFAULT_VARIANTS.shape,
 }: KumoButtonVariantsProps = {}) {
   const isCompactShape = shape === "square" || shape === "circle";
+  const needsMinimumHitArea = size === "xs";
 
   return cn(
     // Base styles
-    "group flex w-max shrink-0 items-center font-medium select-none",
+    "group relative flex w-max shrink-0 items-center font-medium select-none",
     "border-0 shadow-xs",
     "focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand",
     "cursor-pointer",
@@ -158,27 +159,69 @@ export function buttonVariants({
         size,
         KUMO_BUTTON_DEFAULT_VARIANTS.size,
       ).classes,
+    // Keep the compact visual size while meeting the WCAG 2.2 AA 24px
+    // minimum target floor for xs buttons and xs icon buttons.
+    needsMinimumHitArea &&
+      "before:absolute before:left-1/2 before:top-1/2 before:min-h-6 before:min-w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] disabled:before:hidden",
   );
 }
 
-// Normalize icon prop to support both React elements and component types
+const DECORATIVE_ICON_PROPS = {
+  "aria-hidden": true,
+  focusable: "false",
+} as const;
+
+const collectMeaningfulButtonText = (node: ChildNode): string => {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return node.textContent ?? "";
+  }
+
+  if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
+    return "";
+  }
+
+  if (node.getAttribute("aria-hidden") === "true") {
+    return "";
+  }
+
+  if (node instanceof SVGElement || node.tagName.toLowerCase() === "svg") {
+    return "";
+  }
+
+  return Array.from(node.childNodes).map(collectMeaningfulButtonText).join("");
+};
+
+const getMeaningfulButtonText = (element: HTMLElement): string =>
+  Array.from(element.childNodes)
+    .map(collectMeaningfulButtonText)
+    .join("")
+    .trim();
+
+// Normalize icon prop to support both React elements and component types.
+// The button or adjacent text provides the accessible name, so the icon is
+// always rendered as decorative.
 const renderIconNode = (IconComponent?: Icon | React.ReactNode) => {
   if (!IconComponent) return null;
-  if (React.isValidElement(IconComponent)) return IconComponent;
+  if (React.isValidElement<Record<string, unknown>>(IconComponent)) {
+    return React.cloneElement(IconComponent, DECORATIVE_ICON_PROPS);
+  }
   const Comp = IconComponent as React.ComponentType<Record<string, unknown>>;
-  return <Comp />;
+  return <Comp {...DECORATIVE_ICON_PROPS} />;
 };
 
 /**
  * Button component props.
  *
- * Uses a discriminated union on `shape` so that icon-only buttons
- * (`shape="square"` or `shape="circle"`) require an `aria-label`.
+ * Keeps the existing discriminated union on `shape` so compact icon-only
+ * buttons (`shape="square"` or `shape="circle"`) require an `aria-label`.
+ * Runtime development warnings also cover any button without visible text or
+ * `aria-label`/`aria-labelledby`, regardless of shape.
+ * Use localized accessible names in product code.
  *
  * @example
  * ```tsx
  * <Button variant="primary">Save</Button>
- * <Button variant="secondary" shape="square" icon={PlusIcon} aria-label="Add" />
+ * <Button variant="secondary" shape="square" icon={PlusIcon} aria-label="Add item" />
  * <Button variant="destructive" loading>Deleting...</Button>
  * ```
  */
@@ -259,9 +302,39 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     ref,
   ) => {
     const { type, ...restProps } = props;
+    const buttonRef = React.useRef<HTMLButtonElement>(null);
+    React.useImperativeHandle(
+      ref,
+      () => buttonRef.current as HTMLButtonElement,
+    );
+
+    const ariaLabel = restProps["aria-label"];
+    const ariaLabelledBy = restProps["aria-labelledby"];
+
+    React.useEffect(() => {
+      if (process.env.NODE_ENV === "production") return;
+
+      const hasAriaLabel =
+        typeof ariaLabel === "string" ? ariaLabel.trim().length > 0 : false;
+      const hasAriaLabelledBy =
+        typeof ariaLabelledBy === "string"
+          ? ariaLabelledBy.trim().length > 0
+          : false;
+      const hasMeaningfulContent = buttonRef.current
+        ? getMeaningfulButtonText(buttonRef.current).length > 0
+        : false;
+
+      if (!hasMeaningfulContent && !hasAriaLabel && !hasAriaLabelledBy) {
+        console.warn(
+          "[Kumo Button]: Button must have an accessible name when it has no visible text. " +
+            "Provide localized text content, aria-label, or aria-labelledby.",
+        );
+      }
+    }, [ariaLabel, ariaLabelledBy, children, IconComponent, loading]);
+
     const button = (
       <button
-        ref={ref}
+        ref={buttonRef}
         data-kumo-component="Button"
         className={cn(
           buttonVariants({ variant, size, shape }),
@@ -306,12 +379,14 @@ export const RefreshButton = ({
 }: ButtonProps) => (
   <Button shape="square" aria-label={ariaLabel} {...props}>
     <ArrowsClockwise
+      aria-hidden="true"
       className={cn({
         "animate-refresh": loading,
         "size-4.5": props.size === "base" || !props.size,
         "size-4": props.size === "sm",
         "size-5": props.size === "lg",
       })}
+      focusable="false"
     />
   </Button>
 );
diff --git a/packages/kumo/src/components/chart/EChart.test.tsx b/packages/kumo/src/components/chart/EChart.test.tsx
new file mode 100644
index 0000000000..c4c59b0ff1
--- /dev/null
+++ b/packages/kumo/src/components/chart/EChart.test.tsx
@@ -0,0 +1,191 @@
+import type * as echarts from "echarts/core";
+import type { EChartsOption } from "echarts";
+import { act, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Chart } from "./EChart";
+
+const createMockChart = () => ({
+  setOption: vi.fn(),
+  on: vi.fn(),
+  off: vi.fn(),
+  resize: vi.fn(),
+  dispose: vi.fn(),
+});
+
+const createMockEcharts = (mockChart = createMockChart()) => ({
+  init: vi.fn(() => mockChart),
+});
+
+const originalMatchMediaDescriptor = Object.getOwnPropertyDescriptor(
+  window,
+  "matchMedia",
+);
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+
+function restoreMatchMedia() {
+  if (originalMatchMediaDescriptor) {
+    Object.defineProperty(window, "matchMedia", originalMatchMediaDescriptor);
+  } else {
+    Reflect.deleteProperty(window, "matchMedia");
+  }
+}
+
+function mockMatchMedia(initialMatches: boolean) {
+  let matches = initialMatches;
+  const listeners = new Set<(event: MediaQueryListEvent) => void>();
+  const mediaQueryList = {
+    get matches() {
+      return matches;
+    },
+    media: REDUCED_MOTION_QUERY,
+    onchange: null,
+    addEventListener: vi.fn(
+      (eventName: string, listener: (event: MediaQueryListEvent) => void) => {
+        if (eventName === "change") listeners.add(listener);
+      },
+    ),
+    removeEventListener: vi.fn(
+      (eventName: string, listener: (event: MediaQueryListEvent) => void) => {
+        if (eventName === "change") listeners.delete(listener);
+      },
+    ),
+    addListener: vi.fn((listener: (event: MediaQueryListEvent) => void) => {
+      listeners.add(listener);
+    }),
+    removeListener: vi.fn((listener: (event: MediaQueryListEvent) => void) => {
+      listeners.delete(listener);
+    }),
+  } as unknown as MediaQueryList;
+
+  Object.defineProperty(window, "matchMedia", {
+    configurable: true,
+    writable: true,
+    value: vi.fn(() => mediaQueryList),
+  });
+
+  return {
+    setMatches(nextMatches: boolean) {
+      matches = nextMatches;
+      const event = {
+        matches: nextMatches,
+        media: REDUCED_MOTION_QUERY,
+      } as MediaQueryListEvent;
+      for (const listener of listeners) listener(event);
+    },
+  };
+}
+
+afterEach(() => {
+  restoreMatchMedia();
+});
+
+describe("Chart accessibility", () => {
+  it("applies an accessible name and description to the chart wrapper", () => {
+    const mockChart = createMockChart();
+    const mockEcharts = createMockEcharts(mockChart);
+
+    render(
+      <Chart
+        echarts={mockEcharts as unknown as typeof echarts}
+        options={{ series: [] }}
+        ariaLabel="Requests over time"
+        ariaDescription="Shows the request rate for the last hour."
+      />,
+    );
+
+    const chart = screen.getByRole("img", { name: "Requests over time" });
+    const descriptionId = chart.getAttribute("aria-describedby");
+    expect(descriptionId).toBeTruthy();
+    expect(document.getElementById(descriptionId ?? "")?.textContent).toBe(
+      "Shows the request rate for the last hour.",
+    );
+    expect(mockChart.setOption.mock.calls[0][0].aria).toMatchObject({
+      enabled: true,
+      label: { description: "Shows the request rate for the last hour." },
+    });
+  });
+
+  it("merges ECharts aria options without overwriting user-provided aria", () => {
+    const mockChart = createMockChart();
+    const mockEcharts = createMockEcharts(mockChart);
+
+    render(
+      <Chart
+        echarts={mockEcharts as unknown as typeof echarts}
+        options={{
+          aria: {
+            enabled: false,
+            label: {
+              description: "User-provided ECharts description",
+            },
+          },
+          series: [],
+        }}
+        ariaLabel="Requests over time"
+        ariaDescription="Wrapper description"
+      />,
+    );
+
+    expect(mockChart.setOption.mock.calls[0][0].aria).toMatchObject({
+      enabled: false,
+      label: { description: "User-provided ECharts description" },
+    });
+    const chart = screen.getByRole("img", { name: "Requests over time" });
+    const descriptionId = chart.getAttribute("aria-describedby");
+    expect(descriptionId).toBeTruthy();
+    expect(document.getElementById(descriptionId ?? "")?.textContent).toBe(
+      "Wrapper description",
+    );
+  });
+});
+
+describe("Chart reduced motion", () => {
+  it("disables ECharts animation without removing other animation options", () => {
+    mockMatchMedia(true);
+    const mockChart = createMockChart();
+    const mockEcharts = createMockEcharts(mockChart);
+
+    render(
+      <Chart
+        echarts={mockEcharts as unknown as typeof echarts}
+        options={{
+          animation: true,
+          animationDuration: 1_000,
+          series: [
+            { type: "bar", data: [1], animation: true },
+          ] as EChartsOption["series"],
+        }}
+      />,
+    );
+
+    const options = mockChart.setOption.mock.calls[0][0];
+    expect(options.animation).toBe(false);
+    expect(options.animationDuration).toBe(1_000);
+    expect(options.series[0]).toMatchObject({
+      animation: false,
+      data: [1],
+      type: "bar",
+    });
+  });
+
+  it("updates chart options when the reduced-motion preference changes", () => {
+    const reducedMotion = mockMatchMedia(false);
+    const mockChart = createMockChart();
+    const mockEcharts = createMockEcharts(mockChart);
+
+    render(
+      <Chart
+        echarts={mockEcharts as unknown as typeof echarts}
+        options={{ animation: true, series: [] }}
+      />,
+    );
+
+    expect(mockChart.setOption.mock.calls.at(-1)?.[0].animation).toBe(true);
+
+    act(() => {
+      reducedMotion.setMatches(true);
+    });
+
+    expect(mockChart.setOption.mock.calls.at(-1)?.[0].animation).toBe(false);
+  });
+});
diff --git a/packages/kumo/src/components/chart/EChart.tsx b/packages/kumo/src/components/chart/EChart.tsx
index c59c936255..8b982c24c4 100644
--- a/packages/kumo/src/components/chart/EChart.tsx
+++ b/packages/kumo/src/components/chart/EChart.tsx
@@ -4,7 +4,7 @@ import type {
   SetOptionOpts,
   TooltipComponentOption,
 } from "echarts";
-import { forwardRef, useEffect, useRef } from "react";
+import { forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
 import { cn } from "../../utils";
 import { CHART_DARK_COLORS, CHART_LIGHT_COLORS } from "./Color";
 
@@ -52,6 +52,8 @@ export type KumoChartOption = {
     : EChartsOption[K];
 };
 
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+
 /**
  * ECharts event handlers that can be attached to a `Chart`.
  * Pass a subset via the `onEvents` prop; handlers are registered lazily and
@@ -147,6 +149,16 @@ export interface ChartProps {
   optionUpdateBehavior?: SetOptionOpts;
   /** Additional CSS classes applied to the chart container `<div>` */
   className?: string;
+  /**
+   * Accessible name for the chart wrapper. Use a specific, localized label
+   * that identifies what this chart shows, for example "Requests over time".
+   */
+  ariaLabel?: string;
+  /**
+   * Accessible description for the chart wrapper and ECharts' generated aria
+   * summary. Use this for longer localized context, trends, or data caveats.
+   */
+  ariaDescription?: string;
   /**
    * When `true`, initialises ECharts with its built-in dark theme.
    * Changing this value after mount destroys and re-creates the chart instance.
@@ -166,19 +178,102 @@ const transformTooltip = (tooltipObj: SafeTooltipOption) => {
   };
 };
 
+const getPrefersReducedMotion = () =>
+  typeof window !== "undefined" &&
+  typeof window.matchMedia === "function" &&
+  window.matchMedia(REDUCED_MOTION_QUERY).matches;
+
+const disableSeriesAnimation = (
+  series: EChartsOption["series"],
+): EChartsOption["series"] => {
+  if (Array.isArray(series)) {
+    return series.map((seriesOption) =>
+      isRecord(seriesOption)
+        ? { ...seriesOption, animation: false }
+        : seriesOption,
+    ) as EChartsOption["series"];
+  }
+
+  return isRecord(series)
+    ? ({ ...series, animation: false } as EChartsOption["series"])
+    : series;
+};
+
+const applyReducedMotionOptions = (options: EChartsOption): EChartsOption => ({
+  ...options,
+  animation: false,
+  ...(options.series !== undefined
+    ? { series: disableSeriesAnimation(options.series) }
+    : {}),
+});
+
+const usePrefersReducedMotion = () => {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(
+    getPrefersReducedMotion,
+  );
+
+  useEffect(() => {
+    if (
+      typeof window === "undefined" ||
+      typeof window.matchMedia !== "function"
+    ) {
+      return;
+    }
+
+    const mediaQueryList = window.matchMedia(REDUCED_MOTION_QUERY);
+    const handleChange = (event: MediaQueryListEvent) => {
+      setPrefersReducedMotion(event.matches);
+    };
+
+    setPrefersReducedMotion(mediaQueryList.matches);
+
+    if (typeof mediaQueryList.addEventListener === "function") {
+      mediaQueryList.addEventListener("change", handleChange);
+    } else {
+      mediaQueryList.addListener?.(handleChange);
+    }
+
+    return () => {
+      if (typeof mediaQueryList.removeEventListener === "function") {
+        mediaQueryList.removeEventListener("change", handleChange);
+      } else {
+        mediaQueryList.removeListener?.(handleChange);
+      }
+    };
+  }, []);
+
+  return prefersReducedMotion;
+};
+
 const prepareChartOptions = ({
   options,
   isDarkMode,
+  ariaLabel,
+  ariaDescription,
+  prefersReducedMotion,
 }: {
   options: KumoChartOption;
   isDarkMode?: boolean;
+  ariaLabel?: string;
+  ariaDescription?: string;
+  prefersReducedMotion?: boolean;
 }): EChartsOption => {
-  const withDefaults: EChartsOption = {
+  let withDefaults: EChartsOption = {
     backgroundColor: "transparent",
     color: isDarkMode ? CHART_DARK_COLORS : CHART_LIGHT_COLORS,
     ...options,
   };
 
+  if (prefersReducedMotion) {
+    withDefaults = applyReducedMotionOptions(withDefaults);
+  }
+
+  withDefaults = mergeAriaOptions({
+    options: withDefaults,
+    shouldEnableAria: Boolean(ariaLabel || ariaDescription),
+    ariaDescription,
+  });
+
   if (!withDefaults.tooltip) return withDefaults;
 
   return {
@@ -189,6 +284,52 @@ const prepareChartOptions = ({
   };
 };
 
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null;
+
+const isAriaEnabled = (aria: EChartsOption["aria"] | undefined): boolean =>
+  isRecord(aria) && aria.enabled === true;
+
+const mergeAriaOptions = ({
+  options,
+  shouldEnableAria,
+  ariaDescription,
+}: {
+  options: EChartsOption;
+  shouldEnableAria: boolean;
+  ariaDescription?: string;
+}): EChartsOption => {
+  const userAria = options.aria;
+
+  if (!shouldEnableAria && !ariaDescription && !userAria) {
+    return options;
+  }
+
+  const ariaRecord = isRecord(userAria) ? userAria : {};
+  const userLabel = isRecord(ariaRecord.label) ? ariaRecord.label : {};
+  const nextAria: Record<string, unknown> = {
+    enabled: true,
+    ...ariaRecord,
+  };
+
+  if (ariaDescription || ariaRecord.label !== undefined) {
+    nextAria.label = {
+      ...(ariaDescription ? { description: ariaDescription } : {}),
+      ...userLabel,
+    };
+  }
+
+  return {
+    ...options,
+    aria: nextAria as EChartsOption["aria"],
+  };
+};
+
+const mergeIds = (...ids: Array<string | undefined>): string | undefined => {
+  const merged = ids.filter(Boolean).join(" ");
+  return merged || undefined;
+};
+
 /**
  * Chart — a low-level wrapper around [Apache ECharts](https://echarts.apache.org).
  *
@@ -220,6 +361,8 @@ export const Chart = forwardRef<echarts.ECharts, ChartProps>(function Chart(
     options,
     optionUpdateBehavior,
     className,
+    ariaLabel,
+    ariaDescription,
     isDarkMode,
     height = 350,
     onEvents,
@@ -236,6 +379,22 @@ export const Chart = forwardRef<echarts.ECharts, ChartProps>(function Chart(
   const wrappersRef = useRef<Record<string, (params: any) => void>>({});
   // Tracks which event names are currently bound to the chart instance
   const boundEventsRef = useRef<Set<string>>(new Set());
+  const descriptionId = useId();
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const preparedOptions = useMemo(
+    () =>
+      prepareChartOptions({
+        options,
+        isDarkMode,
+        ariaLabel,
+        ariaDescription,
+        prefersReducedMotion,
+      }),
+    [ariaDescription, ariaLabel, isDarkMode, options, prefersReducedMotion],
+  );
+  const chartDescriptionId = ariaDescription ? descriptionId : undefined;
+  const chartHasAccessibleWrapper =
+    Boolean(ariaLabel || ariaDescription) || isAriaEnabled(preparedOptions.aria);
 
   // Init and cleanup
   useEffect(() => {
@@ -265,12 +424,19 @@ export const Chart = forwardRef<echarts.ECharts, ChartProps>(function Chart(
     const chart = chartRef.current;
     if (!chart) return;
 
-    chart.setOption(prepareChartOptions({ options, isDarkMode }), {
+    chart.setOption(preparedOptions, {
       notMerge: false,
       lazyUpdate: true,
       ...optionUpdateBehavior,
     });
-  }, [isDarkMode, optionUpdateBehavior, options]);
+
+    // ECharts may write its own aria-label when aria support is enabled. Reapply
+    // Kumo's explicit wrapper label after setOption so consumer-provided labels
+    // remain the accessible name.
+    if (ariaLabel && elRef.current) {
+      elRef.current.setAttribute("aria-label", ariaLabel);
+    }
+  }, [ariaLabel, optionUpdateBehavior, preparedOptions]);
 
   // Keep handlersRef in sync so wrapper closures always call the latest handler
   // without needing to re-bind listeners on every render
@@ -340,13 +506,22 @@ export const Chart = forwardRef<echarts.ECharts, ChartProps>(function Chart(
   }, []);
 
   return (
-    <div
-      ref={elRef}
-      className={cn("w-full", className)}
-      style={{ height }}
-      tabIndex={options.aria?.enabled ? 0 : undefined}
-      role={options.aria?.enabled ? "img" : undefined}
-    />
+    <>
+      <div
+        ref={elRef}
+        className={cn("w-full", className)}
+        style={{ height }}
+        tabIndex={chartHasAccessibleWrapper ? 0 : undefined}
+        role={chartHasAccessibleWrapper ? "img" : undefined}
+        aria-label={ariaLabel}
+        aria-describedby={mergeIds(chartDescriptionId)}
+      />
+      {ariaDescription && (
+        <div id={descriptionId} className="sr-only">
+          {ariaDescription}
+        </div>
+      )}
+    </>
   );
 });
 
diff --git a/packages/kumo/src/components/chart/Legend.test.tsx b/packages/kumo/src/components/chart/Legend.test.tsx
new file mode 100644
index 0000000000..52c140c21e
--- /dev/null
+++ b/packages/kumo/src/components/chart/Legend.test.tsx
@@ -0,0 +1,129 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { ChartLegend } from "./Legend";
+
+describe("ChartLegend semantics", () => {
+  it("renders static small legend items as plain content", () => {
+    const onPointerEnter = vi.fn();
+    const { container } = render(
+      <ChartLegend.SmallItem
+        name="Requests"
+        color="#086FFF"
+        value="1,234"
+        onPointerEnter={onPointerEnter}
+      />,
+    );
+
+    const item = container.firstElementChild as HTMLElement;
+    expect(item.tagName).toBe("DIV");
+    expect(item.getAttribute("role")).toBeNull();
+    expect(item.getAttribute("tabindex")).toBeNull();
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("renders static large legend items as plain content", () => {
+    const { container } = render(
+      <ChartLegend.LargeItem
+        name="Latency"
+        color="#CF7EE9"
+        value="42"
+        unit="ms"
+      />,
+    );
+
+    const item = container.firstElementChild as HTMLElement;
+    expect(item.tagName).toBe("DIV");
+    expect(item.getAttribute("role")).toBeNull();
+    expect(item.getAttribute("tabindex")).toBeNull();
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("renders interactive legend items as native buttons", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+
+    render(
+      <ChartLegend.SmallItem
+        name="Requests"
+        color="#086FFF"
+        value="1,234"
+        onClick={onClick}
+      />,
+    );
+
+    const button = screen.getByRole("button", { name: /Requests.*1,234/ });
+    expect(button.tagName).toBe("BUTTON");
+    expect(button.getAttribute("type")).toBe("button");
+    expect(button.getAttribute("tabindex")).toBeNull();
+    expect(button.tabIndex).toBe(0);
+
+    await user.click(button);
+    await user.keyboard("{Enter}");
+    await user.keyboard(" ");
+
+    expect(onClick).toHaveBeenCalledTimes(3);
+  });
+
+  it("exposes active pressed state by default for interactive legend items", () => {
+    render(
+      <ChartLegend.SmallItem
+        name="Requests"
+        color="#086FFF"
+        value="1,234"
+        onClick={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByRole("button").getAttribute("aria-pressed")).toBe(
+      "true",
+    );
+  });
+
+  it("adds a non-layout 24px hit area to interactive small legend items", () => {
+    render(
+      <ChartLegend.SmallItem
+        name="Requests"
+        color="#086FFF"
+        value="1,234"
+        onClick={vi.fn()}
+      />,
+    );
+
+    const classes = screen.getByRole("button").className;
+    expect(classes).toContain("before:min-h-6");
+    expect(classes).toContain("before:min-w-6");
+    expect(classes).not.toContain("min-h-6 min-w-6");
+  });
+
+  it("exposes inactive state for interactive legend items", () => {
+    const onClick = vi.fn();
+    const { rerender } = render(
+      <ChartLegend.LargeItem
+        name="Latency"
+        color="#CF7EE9"
+        value="42"
+        inactive
+        onClick={onClick}
+      />,
+    );
+
+    expect(screen.getByRole("button").getAttribute("aria-pressed")).toBe(
+      "false",
+    );
+
+    rerender(
+      <ChartLegend.LargeItem
+        name="Latency"
+        color="#CF7EE9"
+        value="42"
+        inactive={false}
+        onClick={onClick}
+      />,
+    );
+
+    expect(screen.getByRole("button").getAttribute("aria-pressed")).toBe(
+      "true",
+    );
+  });
+});
diff --git a/packages/kumo/src/components/chart/Legend.tsx b/packages/kumo/src/components/chart/Legend.tsx
index bd9717f6b2..3f1a1dfcb3 100644
--- a/packages/kumo/src/components/chart/Legend.tsx
+++ b/packages/kumo/src/components/chart/Legend.tsx
@@ -1,15 +1,8 @@
-import type {
-  KeyboardEventHandler,
-  MouseEventHandler,
-  PointerEventHandler,
-} from "react";
+import type { MouseEventHandler, PointerEventHandler } from "react";
 import { cn } from "../../utils";
 
-const onInteractiveKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {
-  if (event.key !== "Enter" && event.key !== " ") return;
-  event.preventDefault();
-  event.currentTarget.click();
-};
+const interactiveLegendItemClasses =
+  "m-0 appearance-none border-0 bg-transparent p-0 text-left text-inherit [font:inherit] focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand";
 
 /** Shared props for both legend item variants */
 interface LegendItemProps {
@@ -24,11 +17,11 @@ interface LegendItemProps {
   /** When `true`, renders the item at 50% opacity to indicate a deselected state */
   inactive?: boolean;
   /** Fired when a pointer enters the legend item — useful for highlighting the corresponding chart series */
-  onPointerEnter?: PointerEventHandler<HTMLDivElement>;
+  onPointerEnter?: PointerEventHandler<HTMLElement>;
   /** Fired when a pointer leaves the legend item — useful for resetting chart series emphasis */
-  onPointerLeave?: PointerEventHandler<HTMLDivElement>;
+  onPointerLeave?: PointerEventHandler<HTMLElement>;
   /** Fired when the legend item is clicked — useful for toggling series visibility */
-  onClick?: MouseEventHandler<HTMLDivElement>;
+  onClick?: MouseEventHandler<HTMLElement>;
   /** Optional className to customize legend item presentation */
   className?: string;
 }
@@ -49,21 +42,8 @@ function LargeItem({
   onClick,
   className,
 }: LegendItemProps) {
-  return (
-    <div
-      // oxlint-disable-next-line prefer-tag-over-role
-      role="button"
-      tabIndex={onClick ? 0 : -1}
-      className={cn(
-        "inline-flex flex-col gap-2 min-w-42 py-2",
-        { "cursor-pointer": !!onClick },
-        className,
-      )}
-      onPointerEnter={onPointerEnter}
-      onPointerLeave={onPointerLeave}
-      onClick={onClick}
-      onKeyDown={onClick ? onInteractiveKeyDown : undefined}
-    >
+  const content = (
+    <>
       <div className="flex items-center gap-2">
         <span
           className={cn("size-2 rounded-full inline-block", {
@@ -93,6 +73,35 @@ function LargeItem({
           </span>
         )}
       </div>
+    </>
+  );
+
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        aria-pressed={!inactive}
+        className={cn(
+          interactiveLegendItemClasses,
+          "inline-flex flex-col gap-2 min-w-42 py-2 cursor-pointer",
+          className,
+        )}
+        onPointerEnter={onPointerEnter}
+        onPointerLeave={onPointerLeave}
+        onClick={onClick}
+      >
+        {content}
+      </button>
+    );
+  }
+
+  return (
+    <div
+      className={cn("inline-flex flex-col gap-2 min-w-42 py-2", className)}
+      onPointerEnter={onPointerEnter}
+      onPointerLeave={onPointerLeave}
+    >
+      {content}
     </div>
   );
 }
@@ -111,31 +120,49 @@ function SmallItem({
   onClick,
   className,
 }: LegendItemProps) {
-  return (
-    <div
-      // oxlint-disable-next-line prefer-tag-over-role
-      role="button"
-      tabIndex={onClick ? 0 : -1}
-      className={cn(
-        "inline-flex items-center gap-2",
-        { "cursor-pointer": !!onClick },
-        className,
-      )}
-      onPointerEnter={onPointerEnter}
-      onPointerLeave={onPointerLeave}
-      onClick={onClick}
-      onKeyDown={onClick ? onInteractiveKeyDown : undefined}
-    >
+  const content = (
+    <>
       <span
         className={cn("size-2 rounded-full inline-block", {
           "opacity-50": inactive,
         })}
         style={{ backgroundColor: color }}
       />
-      <span className={cn("text-xs", { "opacity-50": inactive })}>{name}</span>
+      <span className={cn("text-xs", { "opacity-50": inactive })}>
+        {name}
+      </span>
       <span className={cn("text-xs font-medium", { "opacity-50": inactive })}>
         {value}
       </span>
+    </>
+  );
+
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        aria-pressed={!inactive}
+        className={cn(
+          interactiveLegendItemClasses,
+          "relative inline-flex items-center gap-2 cursor-pointer before:absolute before:left-1/2 before:top-1/2 before:min-h-6 before:min-w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']",
+          className,
+        )}
+        onPointerEnter={onPointerEnter}
+        onPointerLeave={onPointerLeave}
+        onClick={onClick}
+      >
+        {content}
+      </button>
+    );
+  }
+
+  return (
+    <div
+      className={cn("inline-flex items-center gap-2", className)}
+      onPointerEnter={onPointerEnter}
+      onPointerLeave={onPointerLeave}
+    >
+      {content}
     </div>
   );
 }
diff --git a/packages/kumo/src/components/chart/SankeyChart.test.tsx b/packages/kumo/src/components/chart/SankeyChart.test.tsx
index b266abf7a4..ea80f2d98d 100644
--- a/packages/kumo/src/components/chart/SankeyChart.test.tsx
+++ b/packages/kumo/src/components/chart/SankeyChart.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from "vitest";
-import { render } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import {
   SankeyChart,
   type SankeyNodeData,
@@ -77,6 +77,29 @@ describe("SankeyChart", () => {
       expect(chartDiv).toBeTruthy();
     });
 
+    it("applies an accessible chart name and description", () => {
+      const mockEcharts = createMockEcharts();
+
+      render(
+        <SankeyChart
+          echarts={mockEcharts as any}
+          nodes={baseNodes}
+          links={baseLinks}
+          ariaLabel="Traffic flow by product"
+          ariaDescription="Shows requests flowing from sources to targets."
+        />,
+      );
+
+      const chart = screen.getByRole("img", {
+        name: "Traffic flow by product",
+      });
+      const descriptionId = chart.getAttribute("aria-describedby");
+      expect(descriptionId).toBeTruthy();
+      expect(document.getElementById(descriptionId ?? "")?.textContent).toBe(
+        "Shows requests flowing from sources to targets.",
+      );
+    });
+
     it("handles empty nodes array", () => {
       const mockEcharts = createMockEcharts();
       const { container } = render(
@@ -102,6 +125,7 @@ describe("SankeyChart", () => {
       expect(mockChart.setOption).toHaveBeenCalled();
       const options = mockChart.setOption.mock.calls[0][0];
       expect(options.series[0].type).toBe("sankey");
+      expect(options.aria.enabled).toBe(true);
     });
 
     it("maps node indices to names in links", () => {
@@ -389,6 +413,77 @@ describe("SankeyChart", () => {
         });
       }).not.toThrow();
     });
+
+    it("renders keyboard node actions when onNodeClick is provided", () => {
+      const mockEcharts = createMockEcharts();
+      const onNodeClick = vi.fn();
+
+      render(
+        <SankeyChart
+          echarts={mockEcharts as any}
+          nodes={baseNodes}
+          links={baseLinks}
+          onNodeClick={onNodeClick}
+        />,
+      );
+
+      fireEvent.click(screen.getByRole("button", { name: "Select Source A" }));
+      expect(onNodeClick).toHaveBeenCalledWith(baseNodes[0]);
+    });
+
+    it("renders keyboard link actions when onLinkClick is provided", () => {
+      const mockEcharts = createMockEcharts();
+      const onLinkClick = vi.fn();
+
+      render(
+        <SankeyChart
+          echarts={mockEcharts as any}
+          nodes={baseNodes}
+          links={baseLinks}
+          onLinkClick={onLinkClick}
+        />,
+      );
+
+      fireEvent.click(
+        screen.getByRole("button", {
+          name: "Select link from Source A to Target X, value 60",
+        }),
+      );
+      expect(onLinkClick).toHaveBeenCalledWith(baseLinks[0]);
+    });
+
+    it("uses localized keyboard action labels", () => {
+      const mockEcharts = createMockEcharts();
+      const onNodeClick = vi.fn();
+      const onLinkClick = vi.fn();
+
+      render(
+        <SankeyChart
+          echarts={mockEcharts as any}
+          nodes={baseNodes}
+          links={baseLinks}
+          onNodeClick={onNodeClick}
+          onLinkClick={onLinkClick}
+          keyboardActionsLabel="Acciones del diagrama"
+          getNodeActionLabel={(node) => `Elegir ${node.name}`}
+          getLinkActionLabel={(_link, { sourceName, targetName }) =>
+            `Elegir enlace ${sourceName} a ${targetName}`
+          }
+        />,
+      );
+
+      expect(
+        screen.getByRole("group", { name: "Acciones del diagrama" }),
+      ).toBeTruthy();
+      expect(
+        screen.getByRole("button", { name: "Elegir Source A" }),
+      ).toBeTruthy();
+      expect(
+        screen.getByRole("button", {
+          name: "Elegir enlace Source A a Target X",
+        }),
+      ).toBeTruthy();
+    });
   });
 
   describe("formatValue", () => {
diff --git a/packages/kumo/src/components/chart/SankeyChart.tsx b/packages/kumo/src/components/chart/SankeyChart.tsx
index d5db7d4550..07ba03f29d 100644
--- a/packages/kumo/src/components/chart/SankeyChart.tsx
+++ b/packages/kumo/src/components/chart/SankeyChart.tsx
@@ -90,12 +90,45 @@ export interface SankeyChartProps {
   linkColor?: "gradient" | "gray";
   linkOpacity?: number;
   className?: string;
+  /**
+   * Accessible name for the chart wrapper. Use a specific, localized label
+   * that identifies what this Sankey diagram shows.
+   */
+  ariaLabel?: string;
+  /**
+   * Accessible description for the chart wrapper and ECharts' generated aria
+   * summary. Use this for localized context, trends, or interaction guidance.
+   */
+  ariaDescription?: string;
   isDarkMode?: boolean;
   onNodeClick?: (node: SankeyNodeData) => void;
   onLinkClick?: (link: SankeyLinkData) => void;
+  /** Localized label for the keyboard-accessible fallback action list. */
+  keyboardActionsLabel?: string;
+  /** Localized label builder for keyboard node action buttons. */
+  getNodeActionLabel?: (node: SankeyNodeData, index: number) => string;
+  /** Localized label builder for keyboard link action buttons. */
+  getLinkActionLabel?: (
+    link: SankeyLinkData,
+    context: {
+      index: number;
+      sourceName: string;
+      targetName: string;
+      sourceNode?: SankeyNodeData;
+      targetNode?: SankeyNodeData;
+      formattedValue: string;
+    },
+  ) => string;
 }
 
 const defaultFormatValue = (value: number) => value.toLocaleString();
+const defaultKeyboardActionsLabel = "Sankey chart actions";
+const defaultGetNodeActionLabel = (node: SankeyNodeData) =>
+  `Select ${node.name}`;
+const defaultGetLinkActionLabel: NonNullable<
+  SankeyChartProps["getLinkActionLabel"]
+> = (_link, { sourceName, targetName, formattedValue }) =>
+  `Select link from ${sourceName} to ${targetName}, value ${formattedValue}`;
 
 /** Type guard for ECharts tooltip params */
 interface TooltipParams {
@@ -183,9 +216,14 @@ export function SankeyChart({
   linkColor = "gradient",
   linkOpacity = 0.5,
   className,
+  ariaLabel,
+  ariaDescription,
   isDarkMode,
   onNodeClick,
   onLinkClick,
+  keyboardActionsLabel = defaultKeyboardActionsLabel,
+  getNodeActionLabel = defaultGetNodeActionLabel,
+  getLinkActionLabel = defaultGetLinkActionLabel,
 }: SankeyChartProps) {
   const hasNodeValues = nodes.some((n) => n.value !== undefined);
   const shouldShowValues = showNodeValues ?? hasNodeValues;
@@ -222,6 +260,10 @@ export function SankeyChart({
     }));
 
     return {
+      aria: {
+        enabled: true,
+        ...(ariaDescription && { label: { description: ariaDescription } }),
+      },
       backgroundColor: "transparent",
       animation: true,
       animationDuration: 500,
@@ -371,6 +413,7 @@ export function SankeyChart({
     isInlineLayout,
     formatValue,
     tooltipFormatter,
+    ariaDescription,
   ]);
 
   const handleClick = useCallback(
@@ -430,15 +473,104 @@ export function SankeyChart({
   );
 
   return (
-    <Chart
-      echarts={echarts}
-      options={options}
-      className={className}
-      isDarkMode={isDarkMode}
-      height={height}
-      onEvents={onEvents}
-    />
+    <>
+      <Chart
+        echarts={echarts}
+        options={options}
+        className={className}
+        ariaLabel={ariaLabel}
+        ariaDescription={ariaDescription}
+        isDarkMode={isDarkMode}
+        height={height}
+        onEvents={onEvents}
+      />
+      <SankeyKeyboardActions
+        nodes={nodes}
+        links={links}
+        formatValue={formatValue}
+        onNodeClick={onNodeClick}
+        onLinkClick={onLinkClick}
+        keyboardActionsLabel={keyboardActionsLabel}
+        getNodeActionLabel={getNodeActionLabel}
+        getLinkActionLabel={getLinkActionLabel}
+      />
+    </>
   );
 }
 
 SankeyChart.displayName = "SankeyChart";
+
+function SankeyKeyboardActions({
+  nodes,
+  links,
+  formatValue,
+  onNodeClick,
+  onLinkClick,
+  keyboardActionsLabel,
+  getNodeActionLabel,
+  getLinkActionLabel,
+}: {
+  nodes: SankeyNodeData[];
+  links: SankeyLinkData[];
+  formatValue: (value: number) => string;
+  onNodeClick?: (node: SankeyNodeData) => void;
+  onLinkClick?: (link: SankeyLinkData) => void;
+  keyboardActionsLabel: string;
+  getNodeActionLabel: NonNullable<SankeyChartProps["getNodeActionLabel"]>;
+  getLinkActionLabel: NonNullable<SankeyChartProps["getLinkActionLabel"]>;
+}) {
+  if (!onNodeClick && !onLinkClick) return null;
+
+  return (
+    <div
+      role="group"
+      aria-label={keyboardActionsLabel}
+      className="sr-only focus-within:not-sr-only focus-within:absolute focus-within:z-10 focus-within:m-2 focus-within:max-h-64 focus-within:overflow-auto focus-within:rounded-md focus-within:border focus-within:border-kumo-line focus-within:bg-kumo-base focus-within:p-2 focus-within:shadow-lg"
+    >
+      <div className="mb-2 text-xs font-medium text-kumo-subtle">
+        {keyboardActionsLabel}
+      </div>
+      <ul className="space-y-1">
+        {onNodeClick &&
+          nodes.map((node, index) => (
+            <li key={`node-${node.id ?? node.name}-${index}`}>
+              <button
+                type="button"
+                className="block w-full rounded-md px-2 py-1 text-left text-sm text-kumo-default hover:bg-kumo-elevated focus:bg-kumo-elevated focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand"
+                onClick={() => onNodeClick(node)}
+              >
+                {getNodeActionLabel(node, index)}
+              </button>
+            </li>
+          ))}
+        {onLinkClick &&
+          links.map((link, index) => {
+            const sourceNode = nodes[link.source];
+            const targetNode = nodes[link.target];
+            const sourceName = sourceNode?.name ?? String(link.source);
+            const targetName = targetNode?.name ?? String(link.target);
+            const formattedValue = formatValue(link.value);
+
+            return (
+              <li key={`link-${link.id ?? `${link.source}-${link.target}`}-${index}`}>
+                <button
+                  type="button"
+                  className="block w-full rounded-md px-2 py-1 text-left text-sm text-kumo-default hover:bg-kumo-elevated focus:bg-kumo-elevated focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand"
+                  onClick={() => onLinkClick(link)}
+                >
+                  {getLinkActionLabel(link, {
+                    index,
+                    sourceName,
+                    targetName,
+                    sourceNode,
+                    targetNode,
+                    formattedValue,
+                  })}
+                </button>
+              </li>
+            );
+          })}
+      </ul>
+    </div>
+  );
+}
diff --git a/packages/kumo/src/components/chart/TimeseriesChart.test.tsx b/packages/kumo/src/components/chart/TimeseriesChart.test.tsx
new file mode 100644
index 0000000000..c01d4646a7
--- /dev/null
+++ b/packages/kumo/src/components/chart/TimeseriesChart.test.tsx
@@ -0,0 +1,143 @@
+import type * as echarts from "echarts/core";
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { TimeseriesChart } from "./TimeseriesChart";
+
+const createMockEcharts = () => ({
+  init: vi.fn(),
+});
+
+const chartData = [
+  {
+    name: "Requests",
+    data: [
+      [1_700_000_000_000, 10],
+      [1_700_000_060_000, 20],
+      [1_700_000_120_000, 30],
+    ] as [number, number][],
+    color: "#086FFF",
+  },
+];
+
+describe("TimeseriesChart accessibility", () => {
+  it("announces the loading state with localized text", () => {
+    const mockEcharts = createMockEcharts();
+    const { container } = render(
+      <TimeseriesChart
+        echarts={mockEcharts as unknown as typeof echarts}
+        data={[]}
+        loading
+        loadingText="Loading request metrics"
+      />,
+    );
+
+    expect(screen.getByRole("status").textContent).toBe(
+      "Loading request metrics",
+    );
+    expect(container.querySelector('[aria-busy="true"]')).toBeTruthy();
+    expect(mockEcharts.init).not.toHaveBeenCalled();
+  });
+
+  it("applies the selected range with pointer-operable fallback controls", async () => {
+    const user = userEvent.setup();
+    const mockEcharts = createMockEcharts();
+    const onTimeRangeChange = vi.fn();
+
+    render(
+      <TimeseriesChart
+        echarts={mockEcharts as unknown as typeof echarts}
+        data={chartData}
+        loading
+        onTimeRangeChange={onTimeRangeChange}
+        timeRangeControlsFormat={(timestamp) => `Timestamp ${timestamp}`}
+      />,
+    );
+
+    await user.selectOptions(
+      screen.getByLabelText("Start"),
+      String(chartData[0].data[1][0]),
+    );
+    await user.selectOptions(
+      screen.getByLabelText("End"),
+      String(chartData[0].data[2][0]),
+    );
+    await user.click(screen.getByRole("button", { name: "Apply range" }));
+
+    expect(onTimeRangeChange).toHaveBeenCalledWith(
+      chartData[0].data[1][0],
+      chartData[0].data[2][0],
+    );
+  });
+
+  it("provides a keyboard-operable full-range preset", async () => {
+    const user = userEvent.setup();
+    const mockEcharts = createMockEcharts();
+    const onTimeRangeChange = vi.fn();
+
+    render(
+      <TimeseriesChart
+        echarts={mockEcharts as unknown as typeof echarts}
+        data={chartData}
+        loading
+        onTimeRangeChange={onTimeRangeChange}
+      />,
+    );
+
+    const fullRangeButton = screen.getByRole("button", {
+      name: "Use full range",
+    });
+    await act(async () => {
+      fullRangeButton.focus();
+    });
+    await user.keyboard("{Enter}");
+
+    expect(onTimeRangeChange).toHaveBeenCalledWith(
+      chartData[0].data[0][0],
+      chartData[0].data[2][0],
+    );
+  });
+
+  it("renders localized fallback labels and timestamp options", () => {
+    const mockEcharts = createMockEcharts();
+
+    render(
+      <TimeseriesChart
+        echarts={mockEcharts as unknown as typeof echarts}
+        data={chartData}
+        loading
+        onTimeRangeChange={vi.fn()}
+        timeRangeControlsLabels={{
+          groupLabel: "Zeitraum auswählen",
+          instructions: "Start und Ende auswählen, dann anwenden.",
+          startLabel: "Von",
+          endLabel: "Bis",
+          applyLabel: "Anwenden",
+          fullRangeLabel: "Gesamter Zeitraum",
+          emptyLabel: "Keine Zeitstempel verfügbar",
+        }}
+        timeRangeControlsFormat={(timestamp) => `Zeitpunkt ${timestamp}`}
+      />,
+    );
+
+    expect(
+      screen.getByRole("form", { name: "Zeitraum auswählen" }),
+    ).toBeTruthy();
+    expect(
+      screen.getByText("Start und Ende auswählen, dann anwenden."),
+    ).toBeTruthy();
+    expect(screen.getByLabelText("Von")).toBeTruthy();
+    expect(screen.getByLabelText("Bis")).toBeTruthy();
+    expect(
+      screen.getByRole("button", { name: "Anwenden" }),
+    ).toBeTruthy();
+    expect(
+      screen.getByRole("button", { name: "Gesamter Zeitraum" }),
+    ).toBeTruthy();
+    expect(
+      screen.getAllByRole("option", {
+        name: `Zeitpunkt ${chartData[0].data[0][0]}`,
+      }),
+    ).toHaveLength(2);
+  });
+});
diff --git a/packages/kumo/src/components/chart/TimeseriesChart.tsx b/packages/kumo/src/components/chart/TimeseriesChart.tsx
index 3383bd81fd..4df308929a 100644
--- a/packages/kumo/src/components/chart/TimeseriesChart.tsx
+++ b/packages/kumo/src/components/chart/TimeseriesChart.tsx
@@ -6,6 +6,7 @@ import {
   memo,
   useCallback,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -23,6 +24,24 @@ export interface TimeseriesData {
   color: string;
 }
 
+/** Localizable labels for the keyboard and single-pointer time range controls. */
+export interface TimeseriesTimeRangeControlsLabels {
+  /** Accessible name for the fallback controls form. Defaults to "Select time range". */
+  groupLabel?: string;
+  /** Instructional text shown above the controls. Defaults to "Choose a start and end time, then apply the range.". */
+  instructions?: string;
+  /** Label for the start timestamp select. Defaults to "Start". */
+  startLabel?: string;
+  /** Label for the end timestamp select. Defaults to "End". */
+  endLabel?: string;
+  /** Label for the submit button. Defaults to "Apply range". */
+  applyLabel?: string;
+  /** Label for the preset button that selects the full available range. Defaults to "Use full range". */
+  fullRangeLabel?: string;
+  /** Text shown when no timestamps are available. Defaults to "No timestamps available". */
+  emptyLabel?: string;
+}
+
 /** Props for `TimeseriesChart` */
 export interface TimeseriesChartProps {
   /**
@@ -129,6 +148,17 @@ export interface TimeseriesChartProps {
   height?: number;
   /** Callback fired when user selects a time range via brush selection */
   onTimeRangeChange?: (from: number, to: number) => void;
+  /**
+   * Localized labels for the fallback time-range controls shown when
+   * `onTimeRangeChange` is provided. These controls give users a keyboard and
+   * single-pointer alternative to ECharts' drag brush selection.
+   */
+  timeRangeControlsLabels?: TimeseriesTimeRangeControlsLabels;
+  /**
+   * Formats timestamp options in the fallback time-range controls. Defaults to
+   * `xAxisTickFormat` when provided, otherwise uses the browser locale.
+   */
+  timeRangeControlsFormat?: (timestamp: number) => string;
   /** When `true`, switches the chart to ECharts' built-in dark theme */
   isDarkMode?: boolean;
   /**
@@ -142,16 +172,26 @@ export interface TimeseriesChartProps {
    * that oscillates back and forth to indicate that data is being fetched.
    */
   loading?: boolean;
+  /**
+   * Accessible name for the chart wrapper. Use a specific, localized label
+   * that identifies what this chart shows, for example "Requests over time".
+   */
+  ariaLabel?: string;
   /**
    * Accessible description for screen readers. When provided, it is passed to
-   * ECharts' `aria.label.description` and announced when the chart receives
-   * focus. Consumers are responsible for writing a meaningful description —
+   * the chart wrapper and ECharts' `aria.label.description`. Consumers are
+   * responsible for writing a meaningful, localized description —
    * see the W3C guidance on complex images for recommendations.
    *
    * @see https://www.w3.org/WAI/tutorials/images/complex/
    * @see https://echarts.apache.org/handbook/en/best-practices/aria/
    */
   ariaDescription?: string;
+  /**
+   * Localized text announced while `loading` is true. Defaults to
+   * "Loading chart".
+   */
+  loadingText?: string;
   /**
    * Additional options passed as the second argument to `chart.setOption()`.
    * Defaults to `{ notMerge: false, lazyUpdate: true }`.
@@ -218,13 +258,17 @@ export const TimeseriesChart = forwardRef<
     yAxisTickCount,
     tooltipValueFormat,
     onTimeRangeChange,
+    timeRangeControlsLabels,
+    timeRangeControlsFormat,
     height = 350,
     incomplete,
     enableLegendSelection = false,
     isDarkMode,
     gradient,
     loading,
+    ariaLabel,
     ariaDescription,
+    loadingText = "Loading chart",
     optionUpdateBehavior,
     tooltipMode = "all",
     tooltipMaxItems = 10,
@@ -268,6 +312,11 @@ export const TimeseriesChart = forwardRef<
   tooltipMaxItemsRef.current = tooltipMaxItems;
 
   const [tooltipState, setTooltipState] = useState<TooltipState | null>(null);
+  const timeRangeControlTimestamps = useMemo(
+    () => getTimeRangeControlTimestamps(data),
+    [data],
+  );
+  const formatTimeRangeControl = timeRangeControlsFormat ?? xAxisTickFormat;
 
   // Track cursor position for single-mode y lookup (convertFromPixel needs relative coords)
   const mousePosRef = useRef({ x: 0, y: 0 });
@@ -580,19 +629,38 @@ export const TimeseriesChart = forwardRef<
             ref={containerRef}
             className="relative w-full"
             style={{ height }}
+            aria-busy={loading ? true : undefined}
           />
         }
       >
-        {loading && <ChartWaveLoader height={height} isDarkMode={isDarkMode} />}
-        {!loading && (
-          <Chart
-            echarts={echarts}
-            ref={mergedRef}
-            options={options as EChartsOption}
-            height={height}
-            isDarkMode={isDarkMode}
-            onEvents={events}
-            optionUpdateBehavior={optionUpdateBehavior}
+        <div className="relative w-full" style={{ height }}>
+          {loading ? (
+            <>
+              <ChartWaveLoader height={height} isDarkMode={isDarkMode} />
+              <div role="status" aria-live="polite" className="sr-only">
+                {loadingText}
+              </div>
+            </>
+          ) : (
+            <Chart
+              echarts={echarts}
+              ref={mergedRef}
+              options={options as EChartsOption}
+              height={height}
+              isDarkMode={isDarkMode}
+              ariaLabel={ariaLabel}
+              ariaDescription={ariaDescription}
+              onEvents={events}
+              optionUpdateBehavior={optionUpdateBehavior}
+            />
+          )}
+        </div>
+        {onTimeRangeChange && (
+          <TimeRangeControls
+            timestamps={timeRangeControlTimestamps}
+            labels={timeRangeControlsLabels}
+            formatTimestampLabel={formatTimeRangeControl}
+            onTimeRangeChange={onTimeRangeChange}
           />
         )}
       </TooltipPrimitive.Trigger>
@@ -675,8 +743,188 @@ const TooltipContent = memo(function TooltipContent({
   );
 });
 
+// ─── Time range controls ──────────────────────────────────────────────────────
+
+const DEFAULT_TIME_RANGE_CONTROL_LABELS = {
+  groupLabel: "Select time range",
+  instructions: "Choose a start and end time, then apply the range.",
+  startLabel: "Start",
+  endLabel: "End",
+  applyLabel: "Apply range",
+  fullRangeLabel: "Use full range",
+  emptyLabel: "No timestamps available",
+} satisfies Required<TimeseriesTimeRangeControlsLabels>;
+
+interface TimeRangeControlsProps {
+  timestamps: number[];
+  labels?: TimeseriesTimeRangeControlsLabels;
+  formatTimestampLabel?: (timestamp: number) => string;
+  onTimeRangeChange: (from: number, to: number) => void;
+}
+
+function TimeRangeControls({
+  timestamps,
+  labels: labelsProp,
+  formatTimestampLabel,
+  onTimeRangeChange,
+}: TimeRangeControlsProps) {
+  const instructionsId = useId();
+  const labels = {
+    groupLabel: labelsProp?.groupLabel ?? DEFAULT_TIME_RANGE_CONTROL_LABELS.groupLabel,
+    instructions:
+      labelsProp?.instructions ?? DEFAULT_TIME_RANGE_CONTROL_LABELS.instructions,
+    startLabel: labelsProp?.startLabel ?? DEFAULT_TIME_RANGE_CONTROL_LABELS.startLabel,
+    endLabel: labelsProp?.endLabel ?? DEFAULT_TIME_RANGE_CONTROL_LABELS.endLabel,
+    applyLabel: labelsProp?.applyLabel ?? DEFAULT_TIME_RANGE_CONTROL_LABELS.applyLabel,
+    fullRangeLabel:
+      labelsProp?.fullRangeLabel ?? DEFAULT_TIME_RANGE_CONTROL_LABELS.fullRangeLabel,
+    emptyLabel: labelsProp?.emptyLabel ?? DEFAULT_TIME_RANGE_CONTROL_LABELS.emptyLabel,
+  };
+  const timestampValues = useMemo(
+    () => timestamps.map((timestamp) => String(timestamp)),
+    [timestamps],
+  );
+  const firstValue = timestampValues[0] ?? "";
+  const lastValue = timestampValues[timestampValues.length - 1] ?? "";
+  const hasTimestamps = timestampValues.length > 0;
+
+  const [range, setRange] = useState({ from: firstValue, to: lastValue });
+
+  useEffect(() => {
+    setRange((current) => {
+      const next = {
+        from: timestampValues.includes(current.from) ? current.from : firstValue,
+        to: timestampValues.includes(current.to) ? current.to : lastValue,
+      };
+
+      if (current.from === next.from && current.to === next.to) {
+        return current;
+      }
+
+      return next;
+    });
+  }, [firstValue, lastValue, timestampValues]);
+
+  const applyRange = useCallback(
+    (fromValue: string, toValue: string) => {
+      const from = Number(fromValue);
+      const to = Number(toValue);
+
+      if (!Number.isFinite(from) || !Number.isFinite(to)) {
+        return;
+      }
+
+      // Match brush selection's timestamp tuple while keeping manual input forgiving.
+      onTimeRangeChange(Math.min(from, to), Math.max(from, to));
+    },
+    [onTimeRangeChange],
+  );
+
+  const formatOptionLabel = useCallback(
+    (timestamp: number) =>
+      formatTimestampLabel ? formatTimestampLabel(timestamp) : formatTimestamp(timestamp),
+    [formatTimestampLabel],
+  );
+
+  return (
+    <form
+      aria-label={labels.groupLabel}
+      className="mt-3 rounded-lg bg-kumo-elevated p-3 shadow-xs ring ring-kumo-line"
+      onSubmit={(event) => {
+        event.preventDefault();
+        applyRange(range.from, range.to);
+      }}
+    >
+      <p id={instructionsId} className="text-xs text-kumo-subtle text-pretty">
+        {labels.instructions}
+      </p>
+      <div className="mt-3 flex flex-col gap-3 sm:flex-row sm:items-end">
+        <label className="flex min-w-0 flex-1 flex-col gap-1.5">
+          <span className="text-xs font-medium text-kumo-subtle">
+            {labels.startLabel}
+          </span>
+          <select
+            value={range.from}
+            disabled={!hasTimestamps}
+            aria-describedby={instructionsId}
+            className="h-10 w-full rounded-lg border-0 bg-kumo-base px-3 text-sm text-kumo-default shadow-xs ring ring-kumo-line focus:outline-none focus:ring-kumo-focus/50 focus:ring-[1.5px] disabled:cursor-not-allowed disabled:opacity-60"
+            onChange={(event) =>
+              setRange((current) => ({ ...current, from: event.target.value }))
+            }
+          >
+            {hasTimestamps ? (
+              timestamps.map((timestamp) => (
+                <option key={timestamp} value={String(timestamp)}>
+                  {formatOptionLabel(timestamp)}
+                </option>
+              ))
+            ) : (
+              <option value="">{labels.emptyLabel}</option>
+            )}
+          </select>
+        </label>
+        <label className="flex min-w-0 flex-1 flex-col gap-1.5">
+          <span className="text-xs font-medium text-kumo-subtle">
+            {labels.endLabel}
+          </span>
+          <select
+            value={range.to}
+            disabled={!hasTimestamps}
+            aria-describedby={instructionsId}
+            className="h-10 w-full rounded-lg border-0 bg-kumo-base px-3 text-sm text-kumo-default shadow-xs ring ring-kumo-line focus:outline-none focus:ring-kumo-focus/50 focus:ring-[1.5px] disabled:cursor-not-allowed disabled:opacity-60"
+            onChange={(event) =>
+              setRange((current) => ({ ...current, to: event.target.value }))
+            }
+          >
+            {hasTimestamps ? (
+              timestamps.map((timestamp) => (
+                <option key={timestamp} value={String(timestamp)}>
+                  {formatOptionLabel(timestamp)}
+                </option>
+              ))
+            ) : (
+              <option value="">{labels.emptyLabel}</option>
+            )}
+          </select>
+        </label>
+        <div className="flex flex-col gap-2 sm:flex-row">
+          <button
+            type="button"
+            disabled={!hasTimestamps}
+            className="inline-flex h-10 items-center justify-center rounded-lg border-0 bg-kumo-base px-3 text-sm font-medium text-kumo-default shadow-xs ring ring-kumo-line transition-transform hover:bg-kumo-tint active:scale-[0.96] focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand disabled:cursor-not-allowed disabled:opacity-60 motion-reduce:transition-none motion-reduce:active:scale-100"
+            onClick={() => applyRange(firstValue, lastValue)}
+          >
+            {labels.fullRangeLabel}
+          </button>
+          <button
+            type="submit"
+            disabled={!hasTimestamps}
+            className="inline-flex h-10 items-center justify-center rounded-lg border-0 bg-kumo-brand px-3 text-sm font-medium text-white shadow-xs transition-transform hover:bg-kumo-brand-hover active:scale-[0.96] focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand disabled:cursor-not-allowed disabled:opacity-60 motion-reduce:transition-none motion-reduce:active:scale-100"
+          >
+            {labels.applyLabel}
+          </button>
+        </div>
+      </div>
+    </form>
+  );
+}
+
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
+function getTimeRangeControlTimestamps(data: TimeseriesData[]): number[] {
+  const timestamps = new Set<number>();
+
+  for (const series of data) {
+    for (const [timestamp] of series.data) {
+      if (Number.isFinite(timestamp)) {
+        timestamps.add(timestamp);
+      }
+    }
+  }
+
+  return [...timestamps].sort((a, b) => a - b);
+}
+
 /** Binary search for the value in `data` whose timestamp is closest to `ts`. */
 function findNearest(data: [number, number][], ts: number): number | null {
   if (data.length === 0) return null;
@@ -761,17 +1009,14 @@ function ChartWaveLoader({
         height={height}
         viewBox={`0 0 ${period} ${height}`}
         preserveAspectRatio="none"
-        className="w-full animate-pulse"
+        className="kumo-chart-wave-loader w-full animate-pulse motion-reduce:animate-none"
       >
         <path
           d={d}
           fill="none"
           stroke={strokeColor}
           strokeWidth="2"
-          style={{
-            animation: `kumo-chart-wave 2.4s linear infinite`,
-            transformOrigin: "0 0",
-          }}
+          className="kumo-chart-wave-path"
         />
       </svg>
     </div>
diff --git a/packages/kumo/src/components/chart/index.ts b/packages/kumo/src/components/chart/index.ts
index 588236c35d..94f17244c2 100644
--- a/packages/kumo/src/components/chart/index.ts
+++ b/packages/kumo/src/components/chart/index.ts
@@ -2,6 +2,7 @@ export {
   TimeseriesChart,
   type TimeseriesChartProps,
   type TimeseriesData,
+  type TimeseriesTimeRangeControlsLabels,
 } from "./TimeseriesChart";
 
 export {
diff --git a/packages/kumo/src/components/checkbox/checkbox.test.tsx b/packages/kumo/src/components/checkbox/checkbox.test.tsx
new file mode 100644
index 0000000000..b7fadaa371
--- /dev/null
+++ b/packages/kumo/src/components/checkbox/checkbox.test.tsx
@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Checkbox } from "./checkbox";
+
+describe("Checkbox", () => {
+  it("associates group description and error text with the group fieldset", () => {
+    const { container } = render(
+      <Checkbox.Group
+        legend="Preferences"
+        error="Select at least one preference"
+        description="Choose all that apply."
+      >
+        <Checkbox.Item label="Email" value="email" />
+      </Checkbox.Group>,
+    );
+
+    const fieldset = container.querySelector("fieldset");
+    const group = container.querySelector('[role="group"]');
+    const error = screen.getByText("Select at least one preference");
+    const description = screen.getByText("Choose all that apply.");
+
+    expect(error.id).toBeTruthy();
+    expect(description.id).toBeTruthy();
+    expect(error.getAttribute("role")).toBe("alert");
+    expect(fieldset?.getAttribute("aria-invalid")).toBe("true");
+    expect(group?.getAttribute("aria-invalid")).toBe("true");
+    expect(fieldset?.getAttribute("aria-describedby")).toBe(
+      `${error.id} ${description.id}`,
+    );
+    expect(group?.getAttribute("aria-describedby")).toBe(
+      `${error.id} ${description.id}`,
+    );
+  });
+});
diff --git a/packages/kumo/src/components/checkbox/checkbox.tsx b/packages/kumo/src/components/checkbox/checkbox.tsx
index 37fcbdfcb3..1e8f72790c 100644
--- a/packages/kumo/src/components/checkbox/checkbox.tsx
+++ b/packages/kumo/src/components/checkbox/checkbox.tsx
@@ -1,4 +1,10 @@
-import { forwardRef, createContext, useContext, type ReactNode } from "react";
+import {
+  forwardRef,
+  createContext,
+  useContext,
+  useId,
+  type ReactNode,
+} from "react";
 import { CheckIcon, MinusIcon } from "@phosphor-icons/react";
 import { cn } from "../../utils/cn";
 import { resolveVariant } from "../../utils/resolve-variant";
@@ -419,6 +425,12 @@ function CheckboxGroup({
   controlFirst = true,
   className,
 }: CheckboxGroupProps) {
+  const groupId = useId();
+  const errorId = error ? `${groupId}-error` : undefined;
+  const descriptionId = description ? `${groupId}-description` : undefined;
+  const describedBy =
+    [errorId, descriptionId].filter(Boolean).join(" ") || undefined;
+
   return (
     <CheckboxGroupContext.Provider value={{ controlFirst }}>
       <BaseCheckboxGroup
@@ -427,17 +439,29 @@ function CheckboxGroup({
         onValueChange={onValueChange}
         allValues={allValues}
         disabled={disabled}
+        aria-describedby={describedBy}
+        aria-invalid={error ? true : undefined}
       >
-        <Fieldset.Root className={cn("flex flex-col gap-4", className)}>
+        <Fieldset.Root
+          className={cn("flex flex-col gap-4", className)}
+          aria-describedby={describedBy}
+          aria-invalid={error ? true : undefined}
+        >
           {legend && (
             <Fieldset.Legend className="text-base font-medium text-kumo-default">
               {legend}
             </Fieldset.Legend>
           )}
           <div className="flex flex-col gap-2">{children}</div>
-          {error && <p className="text-sm text-kumo-danger">{error}</p>}
+          {error && (
+            <p id={errorId} role="alert" className="text-sm text-kumo-danger">
+              {error}
+            </p>
+          )}
           {description && (
-            <p className="text-sm text-kumo-subtle">{description}</p>
+            <p id={descriptionId} className="text-sm text-kumo-subtle">
+              {description}
+            </p>
           )}
         </Fieldset.Root>
       </BaseCheckboxGroup>
diff --git a/packages/kumo/src/components/combobox/combobox.test.tsx b/packages/kumo/src/components/combobox/combobox.test.tsx
index dcbdc9f698..ccc05832ad 100644
--- a/packages/kumo/src/components/combobox/combobox.test.tsx
+++ b/packages/kumo/src/components/combobox/combobox.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import {
   Combobox,
   KUMO_COMBOBOX_VARIANTS,
@@ -14,7 +14,10 @@ function renderComboboxWithInput(
 ) {
   return render(
     <Combobox items={fruits} {...props}>
-      <Combobox.TriggerInput placeholder="Pick a fruit…" />
+      <Combobox.TriggerInput
+        aria-label="Pick a fruit"
+        placeholder="Pick a fruit…"
+      />
       <Combobox.Content>
         <Combobox.List>
           {(item: string) => (
@@ -29,6 +32,10 @@ function renderComboboxWithInput(
 }
 
 describe("Combobox", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
   // Rendering
 
   it("renders without crashing", () => {
@@ -99,6 +106,7 @@ describe("Combobox", () => {
           items={fruits}
           error="Selection required"
           defaultValue="Apple"
+          label="Fruit"
         >
           <Combobox.TriggerValue placeholder="Select a fruit" />
           <Combobox.Content>
@@ -132,6 +140,25 @@ describe("Combobox", () => {
       });
       expect(screen.getByText("Fruit is required")).toBeTruthy();
     });
+
+    it("associates error with an aria-label-only TriggerInput", () => {
+      const { container } = render(
+        <Combobox items={fruits} error="Please select a fruit">
+          <Combobox.TriggerInput
+            aria-label="Pick a fruit"
+            placeholder="Pick a fruit…"
+          />
+        </Combobox>,
+      );
+
+      const input = screen.getByRole("combobox", { name: "Pick a fruit" });
+      const error = screen.getByText("Please select a fruit");
+
+      expect(error.id).toBeTruthy();
+      expect(input.getAttribute("aria-invalid")).toBe("true");
+      expect(input.getAttribute("aria-describedby")).toBe(error.id);
+      expect(container.querySelector("label")).toBeNull();
+    });
   });
 
   // Trigger structure
@@ -150,5 +177,214 @@ describe("Combobox", () => {
       const trigger = screen.getByRole("button", { name: "Show options" });
       expect(trigger).toBeTruthy();
     });
+
+    it("uses non-layout 24px hit targets for TriggerInput controls", () => {
+      render(
+        <Combobox items={fruits} defaultValue="Apple">
+          <Combobox.TriggerInput
+            aria-label="Pick a fruit"
+            placeholder="Pick a fruit…"
+          />
+        </Combobox>,
+      );
+
+      const clear = screen.getByRole("button", { name: "Clear selection" });
+      const trigger = screen.getByRole("button", { name: "Show options" });
+
+      expect(clear.className).toContain("before:min-h-6");
+      expect(clear.className).toContain("before:min-w-6");
+      expect(clear.className).not.toContain("size-6");
+      expect(clear.className).toContain("right-6");
+      expect(trigger.className).toContain("before:min-h-6");
+      expect(trigger.className).toContain("before:min-w-6");
+      expect(trigger.className).not.toContain("size-6");
+      expect(trigger.className).toContain("right-0");
+    });
+
+    it("uses a non-layout 24px hit target for chip remove controls", () => {
+      render(
+        <Combobox items={fruits} multiple>
+          <Combobox.TriggerMultipleWithInput
+            aria-label="Select fruits"
+            value={["Apple"]}
+            renderItem={(item: string) => (
+              <Combobox.Chip key={item}>{item}</Combobox.Chip>
+            )}
+          />
+        </Combobox>,
+      );
+
+      const remove = screen.getByRole("button", { name: "Remove" });
+      expect(remove.className).toContain("before:min-h-6");
+      expect(remove.className).toContain("before:min-w-6");
+      expect(remove.className).not.toContain("size-6");
+    });
+
+    it("passes aria-label through to TriggerInput", () => {
+      render(
+        <Combobox items={fruits}>
+          <Combobox.TriggerInput
+            aria-label="Pick a fruit"
+            placeholder="Pick a fruit…"
+          />
+        </Combobox>,
+      );
+
+      const input = screen.getByRole("combobox", { name: "Pick a fruit" });
+      expect(input.getAttribute("aria-label")).toBe("Pick a fruit");
+    });
+
+    it("associates description with an aria-label-only TriggerInput", () => {
+      const { container } = render(
+        <Combobox
+          items={fruits}
+          description="Choose one fruit for the deployment"
+        >
+          <Combobox.TriggerInput
+            aria-label="Pick a fruit"
+            placeholder="Pick a fruit…"
+          />
+        </Combobox>,
+      );
+
+      const input = screen.getByRole("combobox", { name: "Pick a fruit" });
+      const description = screen.getByText(
+        "Choose one fruit for the deployment",
+      );
+
+      expect(description.id).toBeTruthy();
+      expect(input.getAttribute("aria-describedby")).toBe(description.id);
+      expect(container.querySelector("label")).toBeNull();
+    });
+
+    it("passes aria-labelledby through to TriggerInput", () => {
+      render(
+        <>
+          <span id="fruit-combobox-label">Fruit picker</span>
+          <Combobox items={fruits}>
+            <Combobox.TriggerInput
+              aria-labelledby="fruit-combobox-label"
+              placeholder="Pick a fruit…"
+            />
+          </Combobox>
+        </>,
+      );
+
+      const input = screen.getByRole("combobox", { name: "Fruit picker" });
+      expect(input.getAttribute("aria-labelledby")).toBe(
+        "fruit-combobox-label",
+      );
+    });
+
+    it("passes aria-label through to TriggerValue", () => {
+      render(
+        <Combobox items={fruits} defaultValue="Apple">
+          <Combobox.TriggerValue aria-label="Selected fruit" />
+        </Combobox>,
+      );
+
+      const trigger = screen.getByRole("combobox", { name: "Selected fruit" });
+      expect(trigger.getAttribute("aria-label")).toBe("Selected fruit");
+    });
+
+    it("passes aria-label through to TriggerMultipleWithInput", () => {
+      render(
+        <Combobox items={fruits} multiple>
+          <Combobox.TriggerMultipleWithInput
+            aria-label="Select fruits"
+            renderItem={(item: string) => (
+              <Combobox.Chip key={item}>{item}</Combobox.Chip>
+            )}
+          />
+        </Combobox>,
+      );
+
+      const input = screen.getByRole("combobox", { name: "Select fruits" });
+      expect(input.getAttribute("aria-label")).toBe("Select fruits");
+    });
+  });
+
+  describe("accessible name warnings", () => {
+    it("warns when TriggerInput only has a placeholder", () => {
+      const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      render(
+        <Combobox items={fruits}>
+          <Combobox.TriggerInput placeholder="Pick a fruit…" />
+        </Combobox>,
+      );
+
+      expect(warnSpy).toHaveBeenCalledWith(
+        "[Kumo Combobox]: Combobox.TriggerInput must have an accessible name. Provide either:\n" +
+          "  - label prop: <Combobox label='Fruit' ... />\n" +
+          "  - aria-label: <Combobox.TriggerInput aria-label='Select fruit' />\n" +
+          "  - aria-labelledby for custom label association",
+      );
+    });
+
+    it("warns when TriggerValue lacks a label or aria name", () => {
+      const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      render(
+        <Combobox items={fruits} defaultValue="Apple">
+          <Combobox.TriggerValue />
+        </Combobox>,
+      );
+
+      expect(warnSpy).toHaveBeenCalledWith(
+        "[Kumo Combobox]: Combobox.TriggerValue must have an accessible name. Provide either:\n" +
+          "  - label prop: <Combobox label='Fruit' ... />\n" +
+          "  - aria-label: <Combobox.TriggerValue aria-label='Select fruit' />\n" +
+          "  - aria-labelledby for custom label association",
+      );
+    });
+
+    it("warns when TriggerMultipleWithInput lacks a label or aria name", () => {
+      const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      render(
+        <Combobox items={fruits} multiple>
+          <Combobox.TriggerMultipleWithInput
+            renderItem={(item: string) => (
+              <Combobox.Chip key={item}>{item}</Combobox.Chip>
+            )}
+          />
+        </Combobox>,
+      );
+
+      expect(warnSpy).toHaveBeenCalledWith(
+        "[Kumo Combobox]: Combobox.TriggerMultipleWithInput must have an accessible name. Provide either:\n" +
+          "  - label prop: <Combobox label='Fruit' ... />\n" +
+          "  - aria-label: <Combobox.TriggerMultipleWithInput aria-label='Select tags' ... />\n" +
+          "  - aria-labelledby for custom label association",
+      );
+    });
+
+    it("does not warn when the root label provides the accessible name", () => {
+      const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      render(
+        <Combobox items={fruits} label="Fruit">
+          <Combobox.TriggerInput placeholder="Pick a fruit…" />
+        </Combobox>,
+      );
+
+      expect(warnSpy).not.toHaveBeenCalled();
+    });
+
+    it("does not warn when aria-label provides the accessible name", () => {
+      const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      render(
+        <Combobox items={fruits}>
+          <Combobox.TriggerInput
+            aria-label="Pick a fruit"
+            placeholder="Pick a fruit…"
+          />
+        </Combobox>,
+      );
+
+      expect(warnSpy).not.toHaveBeenCalled();
+    });
   });
 });
diff --git a/packages/kumo/src/components/combobox/combobox.tsx b/packages/kumo/src/components/combobox/combobox.tsx
index 04b4a57004..6752280037 100644
--- a/packages/kumo/src/components/combobox/combobox.tsx
+++ b/packages/kumo/src/components/combobox/combobox.tsx
@@ -4,6 +4,7 @@ import {
   Fragment,
   createContext,
   useContext,
+  useId,
   type PropsWithChildren,
   type ReactNode,
 } from "react";
@@ -14,7 +15,11 @@ import {
 } from "../input/input";
 import { cn } from "../../utils/cn";
 import { resolveVariant } from "../../utils/resolve-variant";
-import { Field, type FieldErrorMatch } from "../field/field";
+import {
+  Field,
+  normalizeFieldError,
+  type FieldErrorMatch,
+} from "../field/field";
 import {
   usePortalContainer,
   type PortalContainer,
@@ -44,7 +49,23 @@ export const KUMO_COMBOBOX_DEFAULT_VARIANTS = {
 const ComboboxContext = createContext<{
   size: KumoInputSize;
   hasError: boolean;
-}>({ size: "base", hasError: false });
+  hasLabel: boolean;
+  describedBy?: string;
+}>({ size: "base", hasError: false, hasLabel: false });
+
+type AccessibleNameProps = {
+  /** Accessible name for the control when no visible `label` is provided. */
+  "aria-label"?: string;
+  /** ID of an element that labels the control when no visible `label` is provided. */
+  "aria-labelledby"?: string;
+};
+
+type AriaDescriptionProps = {
+  /** IDs of elements that describe the control. */
+  "aria-describedby"?: string;
+  /** Marks the control as invalid for assistive technologies. */
+  "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling";
+};
 
 // Derived types from KUMO_COMBOBOX_VARIANTS
 export type KumoComboboxSize = keyof typeof KUMO_COMBOBOX_VARIANTS.size;
@@ -82,6 +103,13 @@ export function comboboxVariants({
   );
 }
 
+function composeAriaDescribedBy(
+  ...ids: Array<string | undefined>
+): string | undefined {
+  const describedBy = ids.filter(Boolean).join(" ");
+  return describedBy || undefined;
+}
+
 // Legacy type alias for backwards compatibility
 export type ComboboxInputSide = KumoComboboxInputSide;
 export type ComboboxSize = KumoComboboxSize;
@@ -100,7 +128,7 @@ export type ComboboxRootProps<
  * @example
  * ```tsx
  * // Single-select with search input
- * <Combobox value={value} onValueChange={setValue} items={options}>
+ * <Combobox value={value} onValueChange={setValue} items={options} label="Fruit">
  *   <Combobox.TriggerInput placeholder="Search…" />
  *   <Combobox.Content>
  *     <Combobox.List>
@@ -149,6 +177,31 @@ export interface ComboboxProps extends KumoComboboxVariantsProps {
   error?: string | { message: ReactNode; match: FieldErrorMatch };
 }
 
+function warnIfMissingAccessibleName({
+  component,
+  hasLabel,
+  ariaLabel,
+  ariaLabelledBy,
+  example,
+}: {
+  component: string;
+  hasLabel: boolean;
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
+  example: string;
+}) {
+  if (process.env.NODE_ENV === "production") return;
+
+  if (!hasLabel && !ariaLabel && !ariaLabelledBy) {
+    console.warn(
+      `[Kumo Combobox]: ${component} must have an accessible name. Provide either:\n` +
+        "  - label prop: <Combobox label='Fruit' ... />\n" +
+        `  - aria-label: ${example}\n` +
+        "  - aria-labelledby for custom label association",
+    );
+  }
+}
+
 function Root<Value, Multiple extends boolean | undefined = false>({
   label,
   required,
@@ -166,8 +219,25 @@ function Root<Value, Multiple extends boolean | undefined = false>({
   error?: string | { message: ReactNode; match: FieldErrorMatch };
   size?: KumoComboboxSize;
 }) {
+  const descriptionId = useId();
+  const errorId = useId();
+  const normalizedError = normalizeFieldError(error);
+  const describedBy = !label
+    ? normalizedError
+      ? errorId
+      : description
+        ? descriptionId
+        : undefined
+    : undefined;
   const comboboxControl = (
-    <ComboboxContext.Provider value={{ size, hasError: Boolean(error) }}>
+    <ComboboxContext.Provider
+      value={{
+        size,
+        hasError: Boolean(normalizedError),
+        hasLabel: Boolean(label),
+        describedBy,
+      }}
+    >
       <ComboboxBase.Root {...props}>{children}</ComboboxBase.Root>
     </ComboboxContext.Provider>
   );
@@ -180,19 +250,35 @@ function Root<Value, Multiple extends boolean | undefined = false>({
         required={required}
         labelTooltip={labelTooltip}
         description={description}
-        error={
-          error
-            ? typeof error === "string"
-              ? { message: error, match: true }
-              : error
-            : undefined
-        }
+        error={normalizedError}
       >
         {comboboxControl}
       </Field>
     );
   }
 
+  if (normalizedError || description) {
+    return (
+      <div className="grid gap-2">
+        {comboboxControl}
+        {normalizedError ? (
+          <span id={errorId} className="text-sm leading-snug text-kumo-danger">
+            {normalizedError.message}
+          </span>
+        ) : (
+          description && (
+            <span
+              id={descriptionId}
+              className="text-sm leading-snug text-kumo-subtle"
+            >
+              {description}
+            </span>
+          )
+        )}
+      </div>
+    );
+  }
+
   // Render bare combobox without Field wrapper
   return comboboxControl;
 }
@@ -259,15 +345,33 @@ const triggerValueIconStyles: Record<
 
 function TriggerValue({
   className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
   ...props
-}: ComboboxBase.Value.Props & { className?: string }) {
-  const { size, hasError } = useContext(ComboboxContext);
+}: ComboboxBase.Value.Props &
+  { className?: string } &
+  AccessibleNameProps &
+  AriaDescriptionProps) {
+  const { size, hasError, hasLabel, describedBy } = useContext(ComboboxContext);
   const iconStyles = triggerValueIconStyles[size];
+  warnIfMissingAccessibleName({
+    component: "Combobox.TriggerValue",
+    hasLabel,
+    ariaLabel,
+    ariaLabelledBy,
+    example: "<Combobox.TriggerValue aria-label='Select fruit' />",
+  });
 
   return (
     <ComboboxBase.Trigger
       data-kumo-component="Combobox"
       data-kumo-part="trigger"
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      aria-describedby={composeAriaDescribedBy(ariaDescribedBy, describedBy)}
+      aria-invalid={hasError ? true : ariaInvalid}
       className={cn(
         inputVariants({ size, variant: hasError ? "error" : "default" }),
         "relative flex items-center",
@@ -296,34 +400,39 @@ const triggerInputIconStyles: Record<
   { padding: string; iconSize: number; clearRight: string; caretRight: string }
 > = {
   xs: {
-    padding: "pr-7",
+    padding: "pr-12",
     iconSize: 12,
-    clearRight: "right-5",
-    caretRight: "right-1",
+    clearRight: "right-6",
+    caretRight: "right-0",
   },
   sm: {
-    padding: "pr-9",
+    padding: "pr-12",
     iconSize: 14,
     clearRight: "right-6",
-    caretRight: "right-1.5",
+    caretRight: "right-0",
   },
   base: {
     padding: "pr-12",
     iconSize: 16,
-    clearRight: "right-8",
-    caretRight: "right-2",
+    clearRight: "right-6",
+    caretRight: "right-0",
   },
   lg: {
     padding: "pr-14",
     iconSize: 18,
-    clearRight: "right-9",
-    caretRight: "right-3",
+    clearRight: "right-8",
+    caretRight: "right-2",
   },
 };
 
 function TriggerInput({
   clearLabel = "Clear selection",
   showOptionsLabel = "Show options",
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
   ...props
 }: ComboboxBase.Input.Props & {
   /** Accessible label for the clear button. Pass a translated string for i18n.
@@ -335,19 +444,30 @@ function TriggerInput({
    */
   showOptionsLabel?: string;
 }) {
-  const { size, hasError } = useContext(ComboboxContext);
+  const { size, hasError, hasLabel, describedBy } = useContext(ComboboxContext);
   const iconStyles = triggerInputIconStyles[size];
+  warnIfMissingAccessibleName({
+    component: "Combobox.TriggerInput",
+    hasLabel,
+    ariaLabel,
+    ariaLabelledBy,
+    example: "<Combobox.TriggerInput aria-label='Select fruit' />",
+  });
 
   return (
     <div
       className={cn(
         "relative inline-block w-full max-w-xs",
         "has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed",
-        props.className,
+        className,
       )}
     >
       <ComboboxBase.Input
         {...props}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-describedby={composeAriaDescribedBy(ariaDescribedBy, describedBy)}
+        aria-invalid={hasError ? true : ariaInvalid}
         className={cn(
           inputVariants({ size, variant: hasError ? "error" : "default" }),
           "w-full",
@@ -361,7 +481,9 @@ function TriggerInput({
         data-kumo-part="clear"
         aria-label={clearLabel}
         className={cn(
-          "absolute top-1/2 flex -translate-y-1/2 cursor-pointer bg-transparent p-0",
+          "absolute top-1/2 flex -translate-y-1/2 items-center justify-center cursor-pointer rounded-sm bg-transparent p-0",
+          "before:absolute before:left-1/2 before:top-1/2 before:min-h-6 before:min-w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand",
           "data-[disabled]:pointer-events-none data-[disabled]:opacity-0",
           iconStyles.clearRight,
         )}
@@ -374,8 +496,10 @@ function TriggerInput({
         data-kumo-part="trigger"
         aria-label={showOptionsLabel}
         className={cn(
-          "absolute top-1/2 -translate-y-1/2 flex items-center justify-center cursor-pointer text-kumo-subtle",
+          "absolute top-1/2 flex -translate-y-1/2 items-center justify-center cursor-pointer rounded-sm text-kumo-subtle",
+          "before:absolute before:left-1/2 before:top-1/2 before:min-h-6 before:min-w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']",
           "m-0 bg-transparent p-0", // Reset Stratus global button styles
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand",
           iconStyles.caretRight,
         )}
       >
@@ -427,10 +551,29 @@ function Empty(props: ComboboxBase.Empty.Props) {
   );
 }
 
-function Input(props: ComboboxBase.Input.Props) {
+function Input({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  ...props
+}: ComboboxBase.Input.Props) {
+  const { hasError, hasLabel, describedBy } = useContext(ComboboxContext);
+  warnIfMissingAccessibleName({
+    component: "Combobox.Input",
+    hasLabel,
+    ariaLabel,
+    ariaLabelledBy,
+    example: "<Combobox.Input aria-label='Search fruits' />",
+  });
+
   return (
     <ComboboxBase.Input
       {...props}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      aria-describedby={composeAriaDescribedBy(ariaDescribedBy, describedBy)}
+      aria-invalid={hasError ? true : ariaInvalid}
       className={cn(
         inputVariants(),
         "mx-1.5 w-[calc(100%-0.75rem)] shrink-0 first:mb-2",
@@ -502,8 +645,9 @@ function Chip({
         data-kumo-part="chip-remove"
         aria-label={removeLabel}
         className={cn(
-          "cursor-pointer rounded-md p-1 hover:bg-kumo-fill-hover",
-          "bg-transparent flex",
+          "relative flex cursor-pointer items-center justify-center rounded-md p-1 hover:bg-kumo-fill-hover",
+          "before:absolute before:left-1/2 before:top-1/2 before:min-h-6 before:min-w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']",
+          "bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand",
         )}
       >
         <XIcon size={10} />
@@ -526,6 +670,10 @@ function TriggerMultipleWithInput<ValueType>({
   className,
   inputSide = "right",
   value: controlledValue,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
 }: {
   placeholder?: string;
   renderItem: (value: ValueType) => React.ReactNode;
@@ -533,8 +681,22 @@ function TriggerMultipleWithInput<ValueType>({
   inputSide?: "right" | "top";
   /** Optional controlled value for rendering chips (use when pre-selecting values) */
   value?: ValueType[];
-}) {
-  const { size, hasError } = useContext(ComboboxContext);
+} & AccessibleNameProps &
+  AriaDescriptionProps) {
+  const { size, hasError, hasLabel, describedBy } = useContext(ComboboxContext);
+  const inputAriaDescribedBy = composeAriaDescribedBy(
+    ariaDescribedBy,
+    describedBy,
+  );
+  const inputAriaInvalid = hasError ? true : ariaInvalid;
+  warnIfMissingAccessibleName({
+    component: "Combobox.TriggerMultipleWithInput",
+    hasLabel,
+    ariaLabel,
+    ariaLabelledBy,
+    example:
+      "<Combobox.TriggerMultipleWithInput aria-label='Select tags' ... />",
+  });
   // Determine which value to use for rendering chips
   const chipsToRender = controlledValue;
 
@@ -553,6 +715,10 @@ function TriggerMultipleWithInput<ValueType>({
       {inputSide === "top" && (
         <ComboboxBase.Input
           placeholder={placeholder}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledBy}
+          aria-describedby={inputAriaDescribedBy}
+          aria-invalid={inputAriaInvalid}
           className="w-full px-2 py-1 border-0 bg-inherit"
         />
       )}
@@ -577,6 +743,10 @@ function TriggerMultipleWithInput<ValueType>({
         {inputSide === "right" && (
           <ComboboxBase.Input
             placeholder={placeholder}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledBy}
+            aria-describedby={inputAriaDescribedBy}
+            aria-invalid={inputAriaInvalid}
             className="min-w-[100px] flex-1 px-2 py-1 border-0 bg-inherit"
           />
         )}
@@ -600,6 +770,10 @@ TriggerMultipleWithInput.displayName = "Combobox.TriggerMultipleWithInput";
  * `.TriggerMultipleWithInput`, `.Content`, `.Item`, `.Chip`, `.Input`,
  * `.Empty`, `.GroupLabel`, `.Group`, `.List`, `.Collection`.
  *
+ * Provide an accessible name with `label` on the root, or with
+ * `aria-label`/`aria-labelledby` on the trigger/search input sub-component;
+ * placeholder text is not a substitute for an accessible name.
+ *
  * @example
  * ```tsx
  * <Combobox items={fruits} label="Fruit">
diff --git a/packages/kumo/src/components/command-palette/command-palette.test.tsx b/packages/kumo/src/components/command-palette/command-palette.test.tsx
index c4e0961c73..3566398c44 100644
--- a/packages/kumo/src/components/command-palette/command-palette.test.tsx
+++ b/packages/kumo/src/components/command-palette/command-palette.test.tsx
@@ -58,8 +58,10 @@ const renderCommandPalette = ({
   value = "",
   onValueChange = vi.fn(),
   onSelect = vi.fn(),
+  dialogTitle,
   showLoading = false,
   showEmpty = false,
+  loadingLabel,
 }: {
   open?: boolean;
   onOpenChange?: ReturnType<typeof vi.fn>;
@@ -67,8 +69,10 @@ const renderCommandPalette = ({
   value?: string;
   onValueChange?: ReturnType<typeof vi.fn>;
   onSelect?: ReturnType<typeof vi.fn>;
+  dialogTitle?: string;
   showLoading?: boolean;
   showEmpty?: boolean;
+  loadingLabel?: string;
 } = {}) => {
   const displayItems = showEmpty ? emptyGroups : items;
 
@@ -81,12 +85,13 @@ const renderCommandPalette = ({
       onValueChange={onValueChange}
       itemToStringValue={(group: TestGroup) => group.label}
       onSelect={onSelect}
+      dialogTitle={dialogTitle}
       getSelectableItems={getSelectableItems}
     >
       <CommandPalette.Input placeholder="Search commands..." />
-      <CommandPalette.List>
+      <CommandPalette.List busy={showLoading}>
         {showLoading ? (
-          <CommandPalette.Loading />
+          <CommandPalette.Loading label={loadingLabel} />
         ) : (
           <>
             <Autocomplete.List className="space-y-3">
@@ -236,6 +241,15 @@ describe("CommandPalette", () => {
 
       expect(screen.getByText(/No results found/)).toBeTruthy();
     });
+
+    it("announces empty results as a polite status", () => {
+      renderCommandPalette({ showEmpty: true });
+
+      const status = screen.getByRole("status");
+      expect(status.getAttribute("aria-live")).toBe("polite");
+      expect(status.getAttribute("aria-atomic")).toBe("true");
+      expect(status.textContent).toContain("No results found");
+    });
   });
 
   describe("Loading State", () => {
@@ -247,6 +261,33 @@ describe("CommandPalette", () => {
       const loadingContainer = document.querySelector(".p-8.flex.items-center");
       expect(loadingContainer).toBeTruthy();
     });
+
+    it("announces loading as a polite busy status", () => {
+      renderCommandPalette({ showLoading: true });
+
+      const status = screen.getByRole("status");
+      expect(status.getAttribute("aria-live")).toBe("polite");
+      expect(status.getAttribute("aria-busy")).toBe("true");
+      expect(status.textContent).toContain("Loading results");
+    });
+
+    it("supports localized loading announcement text", () => {
+      renderCommandPalette({
+        showLoading: true,
+        loadingLabel: "Cargando resultados",
+      });
+
+      const status = screen.getByRole("status");
+      expect(status.textContent).toContain("Cargando resultados");
+      expect(status.textContent).not.toContain("Loading results");
+    });
+
+    it("marks the results container busy while loading", () => {
+      renderCommandPalette({ showLoading: true });
+
+      const list = document.querySelector(".overflow-y-auto");
+      expect(list?.getAttribute("aria-busy")).toBe("true");
+    });
   });
 
   describe("Footer", () => {
@@ -297,10 +338,17 @@ describe("CommandPalette", () => {
   });
 
   describe("Accessibility", () => {
-    it("has dialog role on popup", () => {
+    it("has a default accessible dialog name", () => {
       renderCommandPalette();
 
-      const dialog = document.querySelector('[role="dialog"]');
+      const dialog = screen.getByRole("dialog", { name: "Command palette" });
+      expect(dialog).toBeTruthy();
+    });
+
+    it("uses a localized accessible dialog name when provided", () => {
+      renderCommandPalette({ dialogTitle: "Buscar comandos" });
+
+      const dialog = screen.getByRole("dialog", { name: "Buscar comandos" });
       expect(dialog).toBeTruthy();
     });
 
diff --git a/packages/kumo/src/components/command-palette/command-palette.tsx b/packages/kumo/src/components/command-palette/command-palette.tsx
index 80ca2d8eca..e5a65be490 100644
--- a/packages/kumo/src/components/command-palette/command-palette.tsx
+++ b/packages/kumo/src/components/command-palette/command-palette.tsx
@@ -18,12 +18,10 @@ import {
 import { LayerCard } from "../layer-card";
 import { Loader } from "../loader";
 import { cn } from "../../utils";
-import {
-  usePortalContainer,
-  type PortalContainer,
-} from "../../utils/portal-provider";
+import { usePortalContainer } from "../../utils/portal-provider";
 import type {
   HighlightRange,
+  CommandPaletteDialogProps,
   CommandPaletteRootProps,
   CommandPaletteInputProps,
   CommandPaletteListProps,
@@ -36,6 +34,9 @@ import type {
   CommandPaletteResultItemProps,
 } from "./types";
 
+const DEFAULT_DIALOG_TITLE = "Command palette";
+const DEFAULT_LOADING_LABEL = "Loading results";
+
 /**
  * CommandPalette - A composable command palette component for Kumo
  *
@@ -53,6 +54,7 @@ import type {
  * <CommandPalette.Root
  *   open={open}
  *   onOpenChange={setOpen}
+ *   dialogTitle="Search documentation"
  *   items={results}
  *   value={searchTerm}
  *   onValueChange={setSearchTerm}
@@ -92,30 +94,6 @@ interface DialogContextValue {
 
 const DialogContext = createContext<DialogContextValue>({});
 
-/**
- * Props for the Dialog component
- */
-interface DialogProps {
-  /** Whether the dialog is open */
-  open: boolean;
-  /** Callback when the open state changes */
-  onOpenChange: (open: boolean) => void;
-  /**
-   * Optional callback when backdrop is clicked.
-   * Receives the mouse event for position tracking (e.g., for ripple effects).
-   * If not provided, backdrop click calls onOpenChange(false).
-   */
-  onBackdropClick?: (e: React.MouseEvent) => void;
-  /** Child content - typically one or more Panel components */
-  children: React.ReactNode;
-  /**
-   * Container element for the portal. Use this to render the command palette inside
-   * a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.
-   * @default document.body (or KumoPortalProvider container if set)
-   */
-  container?: PortalContainer;
-}
-
 /**
  * Dialog component - Modal wrapper for command palette content.
  *
@@ -124,7 +102,11 @@ interface DialogProps {
  *
  * @example
  * ```tsx
- * <CommandPalette.Dialog open={open} onOpenChange={setOpen}>
+ * <CommandPalette.Dialog
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   dialogTitle="Search documentation"
+ * >
  *   {showDrillDown ? (
  *     <ZonePicker />
  *   ) : (
@@ -140,10 +122,12 @@ function Dialog({
   onOpenChange,
   onBackdropClick,
   children,
+  dialogTitle,
   container: containerProp,
-}: DialogProps) {
+}: CommandPaletteDialogProps) {
   const contextContainer = usePortalContainer();
   const container = containerProp ?? contextContainer ?? undefined;
+  const accessibleTitle = dialogTitle?.trim() || DEFAULT_DIALOG_TITLE;
 
   const handleBackdropClick = (e: React.MouseEvent) => {
     if (onBackdropClick) {
@@ -179,6 +163,9 @@ function Dialog({
             } as CSSProperties
           }
         >
+          <DialogBase.Title className="sr-only">
+            {accessibleTitle}
+          </DialogBase.Title>
           <DialogContext.Provider value={{ onClose: handleClose }}>
             {children}
           </DialogContext.Provider>
@@ -205,6 +192,7 @@ function Root<TGroup, TItem = TGroup>({
   onOpenChange,
   onBackdropClick,
   children,
+  dialogTitle,
   items,
   value,
   onValueChange,
@@ -220,6 +208,7 @@ function Root<TGroup, TItem = TGroup>({
       open={open}
       onOpenChange={onOpenChange}
       onBackdropClick={onBackdropClick}
+      dialogTitle={dialogTitle}
       container={container}
     >
       <Panel
@@ -274,10 +263,11 @@ function InputHeader({
 const List = forwardRef<
   HTMLDivElement,
   CommandPaletteListProps & { className?: string }
->(function List({ children, className }, ref) {
+>(function List({ children, className, busy = false }, ref) {
   return (
     <div
       ref={ref}
+      aria-busy={busy || undefined}
       className={cn(
         "relative min-h-0 flex-1 overflow-y-auto rounded-b-lg bg-kumo-base px-2 py-2 scroll-py-2 ring-1 ring-kumo-hairline",
         className,
@@ -371,10 +361,8 @@ function Item<T>({
  */
 function Empty({ children }: CommandPaletteEmptyProps) {
   return (
-    <Autocomplete.Empty>
-      <div className="p-8 text-center">
-        <p className="text-kumo-subtle">{children ?? "No results found"}</p>
-      </div>
+    <Autocomplete.Empty className="p-8 text-center">
+      <p className="text-kumo-subtle">{children ?? "No results found"}</p>
     </Autocomplete.Empty>
   );
 }
@@ -384,10 +372,26 @@ function Empty({ children }: CommandPaletteEmptyProps) {
  *
  * Centered loading spinner using Kumo Loader.
  */
-function Loading({ children }: CommandPaletteLoadingProps) {
+function Loading({ children, label }: CommandPaletteLoadingProps) {
+  const accessibleLabel =
+    label ?? (children == null ? DEFAULT_LOADING_LABEL : undefined);
+
   return (
-    <div className="flex items-center justify-center p-8">
-      {children ?? <Loader size={24} />}
+    <div
+      role="status"
+      aria-live="polite"
+      aria-busy="true"
+      aria-atomic="true"
+      className="flex items-center justify-center p-8"
+    >
+      {children ?? (
+        <span aria-hidden="true">
+          <Loader size={24} />
+        </span>
+      )}
+      {accessibleLabel ? (
+        <span className="sr-only">{accessibleLabel}</span>
+      ) : null}
     </div>
   );
 }
diff --git a/packages/kumo/src/components/command-palette/index.ts b/packages/kumo/src/components/command-palette/index.ts
index f052af9af9..9706d8755f 100644
--- a/packages/kumo/src/components/command-palette/index.ts
+++ b/packages/kumo/src/components/command-palette/index.ts
@@ -5,6 +5,8 @@ export {
 } from "./command-palette";
 export type {
   HighlightRange,
+  CommandPaletteDialogProps,
+  CommandPaletteDialogTitleProps,
   CommandPaletteRootProps,
   CommandPaletteInputProps,
   CommandPaletteItemProps,
diff --git a/packages/kumo/src/components/command-palette/types.ts b/packages/kumo/src/components/command-palette/types.ts
index ce7a643600..f819671d2c 100644
--- a/packages/kumo/src/components/command-palette/types.ts
+++ b/packages/kumo/src/components/command-palette/types.ts
@@ -4,6 +4,41 @@ import type { PortalContainer } from "../../utils/portal-provider";
 /** A single highlight range within a string [startIndex, endIndex] (inclusive) */
 export type HighlightRange = [number, number];
 
+/** Shared accessible-title prop for command palette dialogs. */
+export interface CommandPaletteDialogTitleProps {
+  /**
+   * Accessible dialog title announced by assistive technology.
+   * Provide localized text that describes the palette's purpose.
+   * @default "Command palette"
+   */
+  dialogTitle?: string;
+}
+
+/**
+ * Props for the CommandPalette.Dialog component - modal wrapper for Panel content.
+ */
+export interface CommandPaletteDialogProps
+  extends CommandPaletteDialogTitleProps {
+  /** Whether the dialog is open */
+  open: boolean;
+  /** Callback when the open state changes */
+  onOpenChange: (open: boolean) => void;
+  /**
+   * Optional callback when backdrop is clicked.
+   * Receives the mouse event for position tracking (e.g., for ripple effects).
+   * If not provided, backdrop click calls onOpenChange(false).
+   */
+  onBackdropClick?: (e: React.MouseEvent) => void;
+  /** Child content - typically one or more Panel components */
+  children: ReactNode;
+  /**
+   * Container element for the portal. Use this to render the command palette inside
+   * a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.
+   * @default document.body (or KumoPortalProvider container if set)
+   */
+  container?: PortalContainer;
+}
+
 /**
  * Props for the CommandPalette.Root component - main dialog wrapper with Autocomplete
  *
@@ -13,7 +48,8 @@ export type HighlightRange = [number, number];
  * @template TGroup - The type of items in the list (groups when using getSelectableItems)
  * @template TItem - The type of selectable items (defaults to TGroup for flat lists)
  */
-export interface CommandPaletteRootProps<TGroup, TItem = TGroup> {
+export interface CommandPaletteRootProps<TGroup, TItem = TGroup>
+  extends CommandPaletteDialogTitleProps {
   /** Whether the dialog is open */
   open: boolean;
   /** Callback when the open state changes */
@@ -99,6 +135,12 @@ export interface CommandPaletteFooterProps {
 export interface CommandPaletteListProps {
   /** Result items or groups to render */
   children: ReactNode;
+  /**
+   * Marks the results region as updating for assistive technology.
+   * Set this while showing `CommandPalette.Loading`.
+   * @default false
+   */
+  busy?: boolean;
 }
 
 /**
@@ -131,6 +173,12 @@ export interface CommandPaletteEmptyProps {
 export interface CommandPaletteLoadingProps {
   /** Optional custom loading content */
   children?: ReactNode;
+  /**
+   * Text announced to assistive technology while loading.
+   * Pass localized text, or provide children with their own text.
+   * @default "Loading results"
+   */
+  label?: ReactNode;
 }
 
 /**
diff --git a/packages/kumo/src/components/input-group/context.ts b/packages/kumo/src/components/input-group/context.ts
index d0afa030bd..44cbdaf82f 100644
--- a/packages/kumo/src/components/input-group/context.ts
+++ b/packages/kumo/src/components/input-group/context.ts
@@ -139,6 +139,8 @@ export interface InputGroupContextValue {
   focusMode: "container" | "individual" | "hybrid";
   disabled: boolean;
   error?: FieldProps["error"];
+  /** ID of helper or error text rendered by InputGroup when no visible label is provided. */
+  describedBy?: string;
   /** Auto-generated id for the input element; used by the invisible label overlay. */
   inputId: string;
 }
diff --git a/packages/kumo/src/components/input-group/input-group-input.tsx b/packages/kumo/src/components/input-group/input-group-input.tsx
index 849419b010..eb3553c720 100644
--- a/packages/kumo/src/components/input-group/input-group-input.tsx
+++ b/packages/kumo/src/components/input-group/input-group-input.tsx
@@ -3,6 +3,13 @@ import { cn } from "../../utils/cn";
 import { Input as InputExternal, type InputProps } from "../input/input";
 import { useInputGroupContext, INPUT_GROUP_SIZE } from "./context";
 
+function composeAriaDescribedBy(
+  ...ids: Array<string | undefined>
+): string | undefined {
+  const describedBy = ids.filter(Boolean).join(" ");
+  return describedBy || undefined;
+}
+
 /** Props for InputGroup.Input — omits Field props since InputGroup handles them. */
 export type InputGroupInputProps = Omit<
   InputProps,
@@ -16,25 +23,30 @@ export type InputGroupInputProps = Omit<
 export const Input = forwardRef<HTMLInputElement, InputGroupInputProps>(
   (props, ref) => {
     const context = useInputGroupContext("Input");
+    const {
+      "aria-describedby": ariaDescribedBy,
+      "aria-invalid": ariaInvalid,
+      ...inputProps
+    } = props;
 
     // Warn when props that belong on <InputGroup> are passed directly
     if (process.env.NODE_ENV !== "production" && context) {
-      if ((props as any).size !== undefined) {
+      if ((inputProps as any).size !== undefined) {
         console.warn(
           "InputGroup.Input: Set `size` on <InputGroup> instead of <InputGroup.Input>.",
         );
       }
-      if ((props as any).disabled !== undefined) {
+      if ((inputProps as any).disabled !== undefined) {
         console.warn(
           "InputGroup.Input: Set `disabled` on <InputGroup> instead of <InputGroup.Input>.",
         );
       }
-      if ((props as any).label !== undefined) {
+      if ((inputProps as any).label !== undefined) {
         console.warn(
           "InputGroup.Input: Use the `label` prop on <InputGroup> instead of <InputGroup.Input>.",
         );
       }
-      if ((props as any).description !== undefined) {
+      if ((inputProps as any).description !== undefined) {
         console.warn(
           "InputGroup.Input: Use <InputGroup.Suffix> instead of passing `description` to <InputGroup.Input>.",
         );
@@ -50,15 +62,19 @@ export const Input = forwardRef<HTMLInputElement, InputGroupInputProps>(
 
     // Use explicit id if provided, otherwise fall back to context id
     // (links the input to the invisible label overlay for click-to-focus).
-    const inputId = props.id ?? context?.inputId;
+    const inputId = inputProps.id ?? context?.inputId;
 
     return (
       <InputExternal
         ref={ref}
         size={context?.size}
-        disabled={context?.disabled || (props as any).disabled}
-        aria-invalid={hasError || props["aria-invalid"]}
-        {...props}
+        disabled={context?.disabled || (inputProps as any).disabled}
+        aria-invalid={hasError ? true : ariaInvalid}
+        aria-describedby={composeAriaDescribedBy(
+          ariaDescribedBy,
+          context?.describedBy,
+        )}
+        {...inputProps}
         id={inputId}
         className={cn(
           // Base input layout: fill height, allow shrinking, strip native border/radius
@@ -81,7 +97,7 @@ export const Input = forwardRef<HTMLInputElement, InputGroupInputProps>(
               ].join(" ")
             : // Container mode: kill all focus indicators — the container handles them z-1 lifts the input above the invisible label overlay so cursor/selection work
               "relative z-1 ring-0! shadow-none outline-none focus:ring-0! focus:outline-none",
-          props.className,
+          inputProps.className,
         )}
       />
     );
diff --git a/packages/kumo/src/components/input-group/input-group.test.tsx b/packages/kumo/src/components/input-group/input-group.test.tsx
index 7ff6bd99bb..07118f20ea 100644
--- a/packages/kumo/src/components/input-group/input-group.test.tsx
+++ b/packages/kumo/src/components/input-group/input-group.test.tsx
@@ -305,6 +305,39 @@ describe("InputGroup", () => {
       expect(input.getAttribute("aria-invalid")).toBe("true");
     });
 
+    it("associates error with an aria-label-only input", () => {
+      const { container } = render(
+        <InputGroup
+          error={{ message: "Please enter a valid email", match: true }}
+        >
+          <InputGroup.Input aria-label="Email" type="email" />
+        </InputGroup>,
+      );
+
+      const input = screen.getByRole("textbox", { name: "Email" });
+      const error = screen.getByText("Please enter a valid email");
+
+      expect(error.id).toBeTruthy();
+      expect(input.getAttribute("aria-invalid")).toBe("true");
+      expect(input.getAttribute("aria-describedby")).toBe(error.id);
+      expect(container.querySelector("label")).toBeNull();
+    });
+
+    it("associates description with an aria-label-only input", () => {
+      const { container } = render(
+        <InputGroup description="Use your account email address">
+          <InputGroup.Input aria-label="Email" type="email" />
+        </InputGroup>,
+      );
+
+      const input = screen.getByRole("textbox", { name: "Email" });
+      const description = screen.getByText("Use your account email address");
+
+      expect(description.id).toBeTruthy();
+      expect(input.getAttribute("aria-describedby")).toBe(description.id);
+      expect(container.querySelector("label")).toBeNull();
+    });
+
     it("does not set aria-invalid when no error is present", () => {
       render(
         <InputGroup>
@@ -411,15 +444,16 @@ describe("InputGroup", () => {
       ).toBeTruthy();
     });
 
-    it("container is a <label> element when no label prop is provided", () => {
+    it("container is a <div> element when no label prop is provided", () => {
       const { container } = render(
         <InputGroup>
           <InputGroup.Addon>@</InputGroup.Addon>
           <InputGroup.Input placeholder="username" aria-label="Username" />
         </InputGroup>,
       );
-      const label = container.querySelector("label[data-slot='input-group']");
-      expect(label).toBeTruthy();
+      const group = container.querySelector("[data-slot='input-group']");
+      expect(group?.tagName).toBe("DIV");
+      expect(container.querySelector("label")).toBeNull();
     });
 
     it("container is a <div> element when label prop is provided", () => {
diff --git a/packages/kumo/src/components/input-group/input-group.tsx b/packages/kumo/src/components/input-group/input-group.tsx
index 80124e662a..026c73a53f 100644
--- a/packages/kumo/src/components/input-group/input-group.tsx
+++ b/packages/kumo/src/components/input-group/input-group.tsx
@@ -1,9 +1,12 @@
 import {
   forwardRef,
+  useCallback,
   useId,
   useMemo,
   type ComponentPropsWithoutRef,
+  type MouseEvent,
   type PropsWithChildren,
+  type ReactNode,
 } from "react";
 import { cn } from "../../utils/cn";
 import { inputVariants } from "../input/input";
@@ -101,7 +104,40 @@ const Root = forwardRef<
     forwardedRef,
   ) => {
     const inputId = useId();
+    const descriptionId = useId();
+    const errorId = useId();
     const focusMode = detectFocusMode(children);
+    const describedBy = !label
+      ? error
+        ? errorId
+        : description
+          ? descriptionId
+          : undefined
+      : undefined;
+    const { onMouseDown: userOnMouseDown, ...clickableContainerRest } = rest;
+
+    const handleContainerMouseDown = useCallback(
+      (event: MouseEvent<HTMLElement>) => {
+        userOnMouseDown?.(event);
+        if (event.defaultPrevented || disabled) return;
+
+        const target = event.target as HTMLElement;
+        if (
+          target.closest(
+            "button,input,textarea,select,a,[role='button'],[tabindex]:not([tabindex='-1'])",
+          )
+        ) {
+          return;
+        }
+
+        const input = document.getElementById(inputId) as HTMLInputElement | null;
+        if (input && event.currentTarget.contains(input)) {
+          event.preventDefault();
+          input.focus();
+        }
+      },
+      [disabled, inputId, userOnMouseDown],
+    );
 
     const contextValue = useMemo(
       () => ({
@@ -109,11 +145,32 @@ const Root = forwardRef<
         focusMode,
         disabled,
         error,
+        describedBy,
         inputId,
       }),
-      [size, focusMode, disabled, error, inputId],
+      [size, focusMode, disabled, error, describedBy, inputId],
+    );
+
+    const fieldFeedback = error ? (
+      <span id={errorId} className="text-sm leading-snug text-kumo-danger">
+        {error.message}
+      </span>
+    ) : (
+      description && (
+        <span
+          id={descriptionId}
+          className="text-sm leading-snug text-kumo-subtle"
+        >
+          {description}
+        </span>
+      )
     );
 
+    const renderWithoutVisibleLabel = (content: ReactNode) => {
+      if (!fieldFeedback) return content;
+      return <div className="grid gap-2">{content}{fieldFeedback}</div>;
+    };
+
     // When label is provided, Field already renders a <label> with htmlFor
     // that handles click-to-focus. Using <div> avoids nested <label> elements
     // (invalid HTML with undefined assistive technology behavior).
@@ -263,12 +320,12 @@ const Root = forwardRef<
         );
       }
 
-      return hybridContainer;
+      return renderWithoutVisibleLabel(hybridContainer);
     }
 
     // Container / Individual mode (non-hybrid)
     // Use <label> only when there's exactly one labelable descendant; otherwise <label> would propagate :hover to its first labelable descendant.
-    const useLabelContainer = !label && focusMode === "container";
+    const useClickableContainer = !label && focusMode === "container";
     const container = (
       <InputGroupContext.Provider value={contextValue}>
         {/* When label is set, use <div> to avoid nested <label> (Field provides one). An invisible <label> overlay handles click-to-focus on empty space. */}
@@ -288,16 +345,20 @@ const Root = forwardRef<
             />
             {children}
           </div>
-        ) : useLabelContainer ? (
-          // Standalone container mode: <label> enables click-to-focus on empty space.
-          <label
-            ref={forwardedRef as React.Ref<HTMLLabelElement>}
+        ) : useClickableContainer ? (
+          // Standalone container mode: a div plus a targeted mouse handler keeps
+          // click-to-focus without rendering an empty label when consumers name
+          // the input with aria-label/aria-labelledby.
+          // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- Mirrors native label click-to-focus without creating an empty label.
+          <div
+            ref={forwardedRef as React.Ref<HTMLDivElement>}
             {...dataProps}
+            onMouseDown={handleContainerMouseDown}
             className={cn(containerClassName, "mb-0!")}
-            {...rest}
+            {...clickableContainerRest}
           >
             {children}
-          </label>
+          </div>
         ) : (
           // Individual mode: <div> avoids :hover propagating to the first labelable sibling.
           <div
@@ -326,7 +387,7 @@ const Root = forwardRef<
       );
     }
 
-    return container;
+    return renderWithoutVisibleLabel(container);
   },
 );
 Root.displayName = "InputGroup";
diff --git a/packages/kumo/src/components/input/input.test.tsx b/packages/kumo/src/components/input/input.test.tsx
index 2503cff713..eb55dfe46e 100644
--- a/packages/kumo/src/components/input/input.test.tsx
+++ b/packages/kumo/src/components/input/input.test.tsx
@@ -64,6 +64,7 @@ describe("Input", () => {
   it("renders with size 'xs'", () => {
     render(<Input aria-label="Test" size="xs" />);
     expect(screen.getByRole("textbox").className).toContain("h-5");
+    expect(screen.getByRole("textbox").className).not.toContain("min-h-6");
   });
 
   it("renders with size 'sm'", () => {
@@ -198,6 +199,12 @@ describe("Input", () => {
     expect(classes).toContain("px-4");
   });
 
+  it("preserves the compact xs input visual height", () => {
+    const classes = inputVariants({ size: "xs" });
+    expect(classes).toContain("h-5");
+    expect(classes).not.toContain("min-h-6");
+  });
+
   it("applies variant classes from KUMO_INPUT_VARIANTS", () => {
     const classes = inputVariants({ variant: "error" });
     expect(classes).toContain("ring-kumo-danger");
diff --git a/packages/kumo/src/components/link/link.test.tsx b/packages/kumo/src/components/link/link.test.tsx
index 9dfe255482..99d40ec633 100644
--- a/packages/kumo/src/components/link/link.test.tsx
+++ b/packages/kumo/src/components/link/link.test.tsx
@@ -249,9 +249,7 @@ describe("Link with render prop", () => {
 
     render(
       <LinkProvider component={SpyLink}>
-        {/* oxlint-disable anchor-has-content, control-has-associated-label */}
-        <Link render={<a href="/direct" />}>Direct</Link>
-        {/* oxlint-enable anchor-has-content, control-has-associated-label */}
+        <Link render={<a href="/direct" aria-label="Direct" />}>Direct</Link>
       </LinkProvider>,
     );
 
diff --git a/packages/kumo/src/components/radio/radio.test.tsx b/packages/kumo/src/components/radio/radio.test.tsx
index d32eef3a5e..313adf1e0e 100644
--- a/packages/kumo/src/components/radio/radio.test.tsx
+++ b/packages/kumo/src/components/radio/radio.test.tsx
@@ -52,14 +52,28 @@ describe("Radio", () => {
   });
 
   it("renders error and description on the group", () => {
-    render(
+    const { container } = render(
       <Radio.Group legend="Choose" error="Required" description="Pick one">
         <Radio.Item label="A" value="a" />
       </Radio.Group>,
     );
 
-    expect(screen.getByText("Required")).toBeTruthy();
-    expect(screen.getByText("Pick one")).toBeTruthy();
+    const fieldset = container.querySelector("fieldset");
+    const radioGroup = screen.getByRole("radiogroup");
+    const error = screen.getByText("Required");
+    const description = screen.getByText("Pick one");
+
+    expect(error.id).toBeTruthy();
+    expect(description.id).toBeTruthy();
+    expect(error.getAttribute("role")).toBe("alert");
+    expect(fieldset?.getAttribute("aria-invalid")).toBe("true");
+    expect(fieldset?.getAttribute("aria-describedby")).toBe(
+      `${error.id} ${description.id}`,
+    );
+    expect(radioGroup.getAttribute("aria-invalid")).toBe("true");
+    expect(radioGroup.getAttribute("aria-describedby")).toBe(
+      `${error.id} ${description.id}`,
+    );
   });
 
   it("accepts ReactNode content for Radio.Item label", () => {
diff --git a/packages/kumo/src/components/radio/radio.tsx b/packages/kumo/src/components/radio/radio.tsx
index 1d429bd6ed..436e15ac4c 100644
--- a/packages/kumo/src/components/radio/radio.tsx
+++ b/packages/kumo/src/components/radio/radio.tsx
@@ -2,6 +2,7 @@ import {
   forwardRef,
   createContext,
   useContext,
+  useId,
   type ReactNode,
   type ReactElement,
   type ForwardedRef,
@@ -459,6 +460,12 @@ function RadioGroup<Value = string>({
   name,
   className,
 }: RadioGroupProps<Value>) {
+  const groupId = useId();
+  const errorId = error ? `${groupId}-error` : undefined;
+  const descriptionId = description ? `${groupId}-description` : undefined;
+  const describedBy =
+    [errorId, descriptionId].filter(Boolean).join(" ") || undefined;
+
   return (
     <RadioGroupContext.Provider value={{ controlPosition, appearance }}>
       <BaseRadioGroup<Value>
@@ -469,10 +476,14 @@ function RadioGroup<Value = string>({
         }
         disabled={disabled}
         name={name}
+        aria-describedby={describedBy}
+        aria-invalid={error ? true : undefined}
       >
         <Fieldset.Root
           disabled={disabled}
           className={cn("flex flex-col gap-4", className)}
+          aria-describedby={describedBy}
+          aria-invalid={error ? true : undefined}
         >
           {legend && (
             <Fieldset.Legend className="text-base font-medium text-kumo-default">
@@ -490,9 +501,15 @@ function RadioGroup<Value = string>({
           >
             {children}
           </div>
-          {error && <p className="text-sm text-kumo-danger">{error}</p>}
+          {error && (
+            <p id={errorId} role="alert" className="text-sm text-kumo-danger">
+              {error}
+            </p>
+          )}
           {description && (
-            <p className="text-sm text-kumo-subtle">{description}</p>
+            <p id={descriptionId} className="text-sm text-kumo-subtle">
+              {description}
+            </p>
           )}
         </Fieldset.Root>
       </BaseRadioGroup>
diff --git a/packages/kumo/src/components/select/select.test.tsx b/packages/kumo/src/components/select/select.test.tsx
index f3e2eec2d6..8776846150 100644
--- a/packages/kumo/src/components/select/select.test.tsx
+++ b/packages/kumo/src/components/select/select.test.tsx
@@ -115,6 +115,46 @@ describe("Select", () => {
       expect(screen.getByText("Please select a database")).toBeTruthy();
       expect(screen.queryByText("Select your preferred database")).toBeNull();
     });
+
+    it("associates description with an aria-label-only trigger", () => {
+      const { container } = render(
+        <Select
+          aria-label="Select a database"
+          description="Choose the database for this environment"
+        >
+          <Select.Option value="postgres">PostgreSQL</Select.Option>
+        </Select>,
+      );
+
+      const trigger = screen.getByRole("combobox", {
+        name: "Select a database",
+      });
+      const description = screen.getByText(
+        "Choose the database for this environment",
+      );
+
+      expect(description.id).toBeTruthy();
+      expect(trigger.getAttribute("aria-describedby")).toBe(description.id);
+      expect(container.querySelector("label")).toBeNull();
+    });
+
+    it("associates error with an aria-label-only trigger", () => {
+      const { container } = render(
+        <Select aria-label="Select a database" error="Select a database first">
+          <Select.Option value="postgres">PostgreSQL</Select.Option>
+        </Select>,
+      );
+
+      const trigger = screen.getByRole("combobox", {
+        name: "Select a database",
+      });
+      const error = screen.getByText("Select a database first");
+
+      expect(error.id).toBeTruthy();
+      expect(trigger.getAttribute("aria-invalid")).toBe("true");
+      expect(trigger.getAttribute("aria-describedby")).toBe(error.id);
+      expect(container.querySelector("label")).toBeNull();
+    });
   });
 
   describe("placeholder prop", () => {
diff --git a/packages/kumo/src/components/select/select.tsx b/packages/kumo/src/components/select/select.tsx
index 1dcb7edcde..cc23e6e45c 100644
--- a/packages/kumo/src/components/select/select.tsx
+++ b/packages/kumo/src/components/select/select.tsx
@@ -7,7 +7,11 @@ import { buttonVariants } from "../button";
 import { KUMO_INPUT_VARIANTS, type KumoInputSize } from "../input/input";
 import { SkeletonLine } from "../loader";
 import { Label } from "../label";
-import { Field, type FieldErrorMatch } from "../field/field";
+import {
+  Field,
+  normalizeFieldError,
+  type FieldErrorMatch,
+} from "../field/field";
 import {
   usePortalContainer,
   type PortalContainer,
@@ -85,6 +89,13 @@ export function selectVariants({
   );
 }
 
+function composeAriaDescribedBy(
+  ...ids: Array<string | undefined>
+): string | undefined {
+  const describedBy = ids.filter(Boolean).join(" ");
+  return describedBy || undefined;
+}
+
 const triggerIconStyles: Record<
   KumoInputSize,
   { iconSize: number; className: string }
@@ -361,13 +372,37 @@ export function Select<T, Multiple extends boolean | undefined = false>({
   ...props
 }: SelectPropsGeneric<T, Multiple> & { required?: boolean }) {
   const labelId = useId();
+  const descriptionId = useId();
+  const errorId = useId();
   const contextContainer = usePortalContainer();
   const container = containerProp ?? contextContainer ?? undefined;
   const propLookup = props as Record<string, unknown>;
   const ariaLabel = propLookup["aria-label"] as string | undefined;
   const ariaLabelledby = propLookup["aria-labelledby"] as string | undefined;
+  const ariaDescribedBy = propLookup["aria-describedby"] as string | undefined;
+  const ariaInvalid = propLookup["aria-invalid"] as
+    | boolean
+    | "false"
+    | "true"
+    | "grammar"
+    | "spelling"
+    | undefined;
   // For aria-label, use string label or placeholder (ReactNode labels can't be used for aria-label)
   const fallbackLabel = typeof label === "string" ? label : placeholder;
+  const normalizedError = normalizeFieldError(error);
+  const feedbackId =
+    label && hideLabel !== true
+      ? undefined
+      : normalizedError
+        ? errorId
+        : description
+          ? descriptionId
+          : undefined;
+  const triggerAriaDescribedBy = composeAriaDescribedBy(
+    ariaDescribedBy,
+    feedbackId,
+  );
+  const triggerAriaInvalid = normalizedError ? true : ariaInvalid;
 
   // Deprecation warning for hideLabel
   if (process.env.NODE_ENV !== "production" && hideLabel !== undefined) {
@@ -462,6 +497,8 @@ export function Select<T, Multiple extends boolean | undefined = false>({
         )}
         aria-label={triggerAriaLabel}
         aria-labelledby={triggerLabelledBy}
+        aria-describedby={triggerAriaDescribedBy}
+        aria-invalid={triggerAriaInvalid}
       >
         {loading ? (
           <SkeletonLine className="w-32" />
@@ -516,13 +553,7 @@ export function Select<T, Multiple extends boolean | undefined = false>({
         required={required}
         labelTooltip={labelTooltip}
         description={description}
-        error={
-          error
-            ? typeof error === "string"
-              ? { message: error, match: true }
-              : error
-            : undefined
-        }
+        error={normalizedError}
         hideLabel
       >
         {selectControl}
@@ -532,12 +563,6 @@ export function Select<T, Multiple extends boolean | undefined = false>({
 
   // Render with standalone label when label is hidden (sr-only)
   // Still show description/error for accessibility and UX
-  const normalizedError = error
-    ? typeof error === "string"
-      ? { message: error, match: true as const }
-      : error
-    : undefined;
-
   return (
     <div className="grid gap-2">
       {label && (
@@ -547,12 +572,15 @@ export function Select<T, Multiple extends boolean | undefined = false>({
       )}
       {selectControl}
       {normalizedError ? (
-        <span className="text-sm text-kumo-danger">
+        <span id={errorId} className="text-sm text-kumo-danger">
           {normalizedError.message}
         </span>
       ) : (
         description && (
-          <span className="text-sm leading-snug text-kumo-subtle">
+          <span
+            id={descriptionId}
+            className="text-sm leading-snug text-kumo-subtle"
+          >
             {description}
           </span>
         )
diff --git a/packages/kumo/src/components/sensitive-input/index.ts b/packages/kumo/src/components/sensitive-input/index.ts
index 5c0a0f8d90..899c793b2c 100644
--- a/packages/kumo/src/components/sensitive-input/index.ts
+++ b/packages/kumo/src/components/sensitive-input/index.ts
@@ -1,5 +1,6 @@
 export {
   SensitiveInput,
+  type SensitiveInputLabels,
   type SensitiveInputProps,
   KUMO_SENSITIVE_INPUT_VARIANTS,
   KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS,
diff --git a/packages/kumo/src/components/sensitive-input/sensitive-input.test.tsx b/packages/kumo/src/components/sensitive-input/sensitive-input.test.tsx
index 8457f8331f..120fbd44cd 100644
--- a/packages/kumo/src/components/sensitive-input/sensitive-input.test.tsx
+++ b/packages/kumo/src/components/sensitive-input/sensitive-input.test.tsx
@@ -1,9 +1,15 @@
-import { describe, it, expect } from "vitest";
+import { afterEach, describe, it, expect, vi } from "vitest";
 import { createElement } from "react";
-import { render } from "@testing-library/react";
-import { SensitiveInput } from "./sensitive-input";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { SensitiveInput, type SensitiveInputLabels } from "./sensitive-input";
 
 describe("SensitiveInput", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
   it("should be defined", () => {
     expect(SensitiveInput).toBeDefined();
   });
@@ -45,4 +51,251 @@ describe("SensitiveInput", () => {
     const inputEl = container.querySelector("input");
     expect(inputEl?.parentElement?.className).toContain("ring-kumo-danger");
   });
+
+  it("associates description with an aria-label-only input", () => {
+    const { container } = render(
+      <SensitiveInput
+        aria-label="API Key"
+        description="Use a key with read-only permissions"
+      />,
+    );
+
+    const input = container.querySelector("input");
+    const description = screen.getByText("Use a key with read-only permissions");
+
+    expect(description.id).toBeTruthy();
+    expect(input?.getAttribute("aria-describedby")).toBe(description.id);
+    expect(container.querySelector("label")).toBeNull();
+  });
+
+  it("associates error with an aria-label-only input", () => {
+    const { container } = render(
+      <SensitiveInput aria-label="API Key" error="Invalid API key" />,
+    );
+
+    const input = container.querySelector("input");
+    const error = screen.getByText("Invalid API key");
+
+    expect(error.id).toBeTruthy();
+    expect(input?.getAttribute("aria-invalid")).toBe("true");
+    expect(input?.getAttribute("aria-describedby")).toBe(error.id);
+    expect(container.querySelector("label")).toBeNull();
+  });
+
+  it("uses sibling native buttons instead of a button-role container", () => {
+    const { container } = render(
+      <SensitiveInput label="API Key" defaultValue="secret-value" />,
+    );
+
+    expect(
+      container.querySelector('[data-kumo-part="masked-container"]'),
+    ).toBeNull();
+    expect(container.querySelector('[role="button"]')).toBeNull();
+    expect(
+      screen.getByRole("button", { name: "Reveal value: API Key" }),
+    ).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it("uses non-layout hit areas for copy and visibility controls", async () => {
+    const user = userEvent.setup();
+    render(<SensitiveInput label="API Key" defaultValue="secret-value" />);
+
+    const copyButton = screen.getByRole("button", {
+      name: "Copy to clipboard",
+    });
+    expect(copyButton.className).toContain("before:min-h-6");
+    expect(copyButton.className).toContain("before:min-w-6");
+    expect(copyButton.className).not.toContain("min-h-6 min-w-6");
+
+    await user.click(
+      screen.getByRole("button", { name: "Reveal value: API Key" }),
+    );
+
+    const visibilityButton = screen.getByRole("button", {
+      name: "Hide value: API Key",
+    });
+    expect(visibilityButton.className).toContain("before:min-h-6");
+    expect(visibilityButton.className).toContain("before:min-w-6");
+    expect(visibilityButton.className).not.toContain("size-6");
+    expect(visibilityButton.querySelector("svg")?.getAttribute("class")).toContain(
+      "size-4",
+    );
+  });
+
+  it("uses localized labels and live-region status text", async () => {
+    const user = userEvent.setup();
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    const navigatorWithClipboard = Object.create(navigator) as Navigator;
+    Object.defineProperty(navigatorWithClipboard, "clipboard", {
+      configurable: true,
+      value: { writeText },
+    });
+    vi.stubGlobal("navigator", navigatorWithClipboard);
+    const labels: SensitiveInputLabels = {
+      maskedValue: "••••",
+      clickToReveal: "Cliquer pour afficher",
+      revealValue: "Afficher la valeur",
+      hideValue: "Masquer la valeur",
+      copy: "Copier",
+      copyToClipboard: "Copier dans le presse-papiers",
+      copied: "Copié",
+      valueRevealed: "Valeur affichée",
+      valueHidden: "Valeur masquée",
+      copiedToClipboard: "Copié dans le presse-papiers",
+      revealInstruction: "Appuyez sur Entrée ou Espace pour afficher.",
+    };
+
+    render(
+      <SensitiveInput
+        label="Clé API"
+        defaultValue="secret-value"
+        labels={labels}
+      />,
+    );
+
+    expect(screen.getByText("••••")).toBeTruthy();
+    expect(screen.getByText("Cliquer pour afficher")).toBeTruthy();
+    expect(screen.getByText("Valeur masquée")).toBeTruthy();
+
+    await user.click(
+      screen.getByRole("button", { name: "Afficher la valeur: Clé API" }),
+    );
+    expect(
+      screen.getByRole("textbox", { name: "Clé API" }).getAttribute("type"),
+    ).toBe("text");
+    expect(screen.getByText("Valeur affichée")).toBeTruthy();
+
+    await user.click(
+      screen.getByRole("button", { name: "Masquer la valeur: Clé API" }),
+    );
+    expect(screen.getByText("Valeur masquée")).toBeTruthy();
+
+    await user.click(
+      screen.getByRole("button", { name: "Copier dans le presse-papiers" }),
+    );
+
+    await waitFor(() => {
+      expect(writeText).toHaveBeenCalledWith("secret-value");
+    });
+    expect(screen.getByRole("button", { name: "Copié" })).toBeTruthy();
+    expect(screen.getByText("Copié dans le presse-papiers")).toBeTruthy();
+  });
+
+  it("supports keyboard reveal and hide", async () => {
+    const user = userEvent.setup();
+    render(<SensitiveInput label="API Key" defaultValue="secret-value" />);
+
+    screen.getByRole("button", { name: "Reveal value: API Key" }).focus();
+    await user.keyboard("{Enter}");
+
+    expect(
+      screen.getByRole("textbox", { name: "API Key" }).getAttribute("type"),
+    ).toBe("text");
+    expect(screen.getByText("Value revealed")).toBeTruthy();
+
+    await user.keyboard("{Escape}");
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole("button", { name: "Reveal value: API Key" }),
+      ).toBeTruthy();
+    });
+    expect(screen.getByText("Value hidden")).toBeTruthy();
+  });
+
+  it("preserves a user-provided aria-label across reveal and hide controls", async () => {
+    const user = userEvent.setup();
+    render(
+      <SensitiveInput
+        aria-label="Production API token"
+        defaultValue="secret-value"
+      />,
+    );
+
+    await user.click(
+      screen.getByRole("button", {
+        name: "Reveal value: Production API token",
+      }),
+    );
+
+    expect(
+      screen
+        .getByRole("textbox", { name: "Production API token" })
+        .getAttribute("type"),
+    ).toBe("text");
+    expect(
+      screen.getByRole("button", { name: "Hide value: Production API token" }),
+    ).toBeTruthy();
+  });
+
+  it("does not use a generic fallback name when no accessible name is provided", () => {
+    vi.spyOn(console, "warn").mockImplementation(() => {});
+    const { container } = render(<SensitiveInput defaultValue="secret-value" />);
+
+    expect(
+      screen.queryByRole("button", { name: "Reveal value: Sensitive value" }),
+    ).toBeNull();
+    expect(container.querySelector("input")?.getAttribute("aria-label")).not.toBe(
+      "Sensitive value",
+    );
+    expect(screen.getByRole("button", { name: "Reveal value" })).toBeTruthy();
+  });
+
+  it("warns when no accessible name is provided", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    render(<SensitiveInput defaultValue="secret-value" />);
+
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining(
+        "[Kumo SensitiveInput]: SensitiveInput must have an accessible name.",
+      ),
+    );
+  });
+
+  it("does not warn when a string label provides the accessible name", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    render(<SensitiveInput label="API Key" defaultValue="secret-value" />);
+
+    expect(warn).not.toHaveBeenCalled();
+  });
+
+  it("does not warn when aria-label provides the accessible name", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    render(
+      <SensitiveInput
+        aria-label="Production API token"
+        defaultValue="secret-value"
+      />,
+    );
+
+    expect(warn).not.toHaveBeenCalled();
+  });
+
+  it("does not warn or override rich labels associated with aria-labelledby", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    render(
+      <SensitiveInput
+        label={
+          <span id="token-label">
+            Production <strong>API token</strong>
+          </span>
+        }
+        aria-labelledby="token-label"
+        defaultValue="secret-value"
+      />,
+    );
+
+    expect(warn).not.toHaveBeenCalled();
+    const revealButton = screen.getByRole("button", {
+      name: /Reveal value.*Production API token/,
+    });
+    expect(revealButton.getAttribute("aria-labelledby")).toContain(
+      "token-label",
+    );
+    expect(revealButton.hasAttribute("aria-label")).toBe(false);
+  });
 });
diff --git a/packages/kumo/src/components/sensitive-input/sensitive-input.tsx b/packages/kumo/src/components/sensitive-input/sensitive-input.tsx
index a1a719005e..eb62d847b5 100644
--- a/packages/kumo/src/components/sensitive-input/sensitive-input.tsx
+++ b/packages/kumo/src/components/sensitive-input/sensitive-input.tsx
@@ -4,6 +4,7 @@ import {
   useCallback,
   useEffect,
   useId,
+  useMemo,
   useRef,
   useState,
   type ComponentPropsWithoutRef,
@@ -17,7 +18,11 @@ import {
   type KumoInputSize,
   type KumoInputVariant,
 } from "../input/input";
-import { Field, type FieldErrorMatch } from "../field/field";
+import {
+  Field,
+  normalizeFieldError,
+  type FieldErrorMatch,
+} from "../field/field";
 
 export const KUMO_SENSITIVE_INPUT_VARIANTS = KUMO_INPUT_VARIANTS;
 
@@ -28,6 +33,56 @@ export const KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS = {
 
 type Mode = "masked" | "revealed" | "empty";
 
+/**
+ * Localizable secondary labels and status messages for SensitiveInput.
+ * These English defaults do not replace the field's required accessible name.
+ */
+export interface SensitiveInputLabels {
+  /** Visible masked value text. @default "••••••••" */
+  maskedValue?: string;
+  /** Visible reveal hint shown on hover/focus while masked. @default "Click to reveal" */
+  clickToReveal?: string;
+  /** Accessible label for the masked reveal button. @default "Reveal value" */
+  revealValue?: string;
+  /** Accessible label for the hide button. @default "Hide value" */
+  hideValue?: string;
+  /** Visible label for the copy button. @default "Copy" */
+  copy?: string;
+  /** Accessible label for the copy button. @default "Copy to clipboard" */
+  copyToClipboard?: string;
+  /** Visible/accessibility label for the copied state. @default "Copied" */
+  copied?: string;
+  /** Live-region status after revealing the value. @default "Value revealed" */
+  valueRevealed?: string;
+  /** Live-region status after hiding the value. @default "Value hidden" */
+  valueHidden?: string;
+  /** Live-region status after copying the value. @default "Copied to clipboard" */
+  copiedToClipboard?: string;
+  /** Screen-reader hint for the reveal button. @default "Press Enter or Space to reveal." */
+  revealInstruction?: string;
+}
+
+const DEFAULT_LABELS: Required<SensitiveInputLabels> = {
+  maskedValue: "••••••••",
+  clickToReveal: "Click to reveal",
+  revealValue: "Reveal value",
+  hideValue: "Hide value",
+  copy: "Copy",
+  copyToClipboard: "Copy to clipboard",
+  copied: "Copied",
+  valueRevealed: "Value revealed",
+  valueHidden: "Value hidden",
+  copiedToClipboard: "Copied to clipboard",
+  revealInstruction: "Press Enter or Space to reveal.",
+};
+
+function composeAriaDescribedBy(
+  ...ids: Array<string | undefined>
+): string | undefined {
+  const describedBy = ids.filter(Boolean).join(" ");
+  return describedBy || undefined;
+}
+
 /**
  * SensitiveInput component props.
  *
@@ -74,6 +129,8 @@ export interface SensitiveInputProps
   description?: ReactNode;
   /** Error message or validation error object */
   error?: string | { message: ReactNode; match: FieldErrorMatch };
+  /** Localizable secondary control labels and live-region status text. */
+  labels?: SensitiveInputLabels;
 }
 
 /**
@@ -104,7 +161,12 @@ export const SensitiveInput = forwardRef<HTMLInputElement, SensitiveInputProps>(
       labelTooltip,
       description,
       error,
+      labels: labelsProp,
       required,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-invalid": ariaInvalid,
       ...inputProps
     },
     ref,
@@ -120,10 +182,33 @@ export const SensitiveInput = forwardRef<HTMLInputElement, SensitiveInputProps>(
 
     // Auto-apply error styling when error prop is truthy
     // Explicit variant prop takes precedence for backwards compatibility
-    const variant = variantProp ?? (error ? "error" : "default");
-    // For aria-label, only use string labels (ReactNode labels can't be used for aria-label)
-    const ariaLabelFallback =
-      typeof label === "string" ? label : "Sensitive value";
+    const normalizedError = normalizeFieldError(error);
+    const variant = variantProp ?? (normalizedError ? "error" : "default");
+    const labels = useMemo<Required<SensitiveInputLabels>>(
+      () => ({ ...DEFAULT_LABELS, ...labelsProp }),
+      [labelsProp],
+    );
+    const hasAriaLabel = Boolean(ariaLabel);
+    const hasAriaLabelledBy = Boolean(ariaLabelledBy);
+    const stringLabel = typeof label === "string" ? label : undefined;
+    const hasAccessibleName = Boolean(
+      hasAriaLabel || hasAriaLabelledBy || stringLabel,
+    );
+
+    // A11y enforcement: the component should not invent a generic field name
+    // for secrets. Rich labels should be associated with aria-labelledby so the
+    // reveal/hide buttons can include that same label in their accessible names.
+    if (process.env.NODE_ENV !== "production" && !hasAccessibleName) {
+      console.warn(
+        "[Kumo SensitiveInput]: SensitiveInput must have an accessible name. Provide either:\n" +
+          "  - label prop with string content: <SensitiveInput label='API key' />\n" +
+          "  - aria-label: <SensitiveInput aria-label='API key' />\n" +
+          "  - aria-labelledby for custom or rich label associations",
+      );
+    }
+
+    const valueLabel = hasAriaLabel ? ariaLabel : stringLabel;
+    const inputAriaLabel = ariaLabel;
     const isControlled = controlledValue !== undefined;
     const [internalValue, setInternalValue] = useState(defaultValue);
     const value = isControlled ? controlledValue : internalValue;
@@ -137,10 +222,26 @@ export const SensitiveInput = forwardRef<HTMLInputElement, SensitiveInputProps>(
 
     const inputRef = useRef<HTMLInputElement | null>(null);
     const containerRef = useRef<HTMLDivElement>(null);
+    const revealButtonRef = useRef<HTMLButtonElement | null>(null);
     const liveRegionId = useId();
     const generatedId = useId();
     const inputId = id ?? generatedId;
+    const descriptionId = useId();
+    const errorId = useId();
     const maskedInstructionId = useId();
+    const revealActionLabelId = useId();
+    const feedbackId = !label
+      ? normalizedError
+        ? errorId
+        : description
+          ? descriptionId
+          : undefined
+      : undefined;
+    const inputAriaDescribedBy = composeAriaDescribedBy(
+      ariaDescribedBy,
+      feedbackId,
+    );
+    const inputAriaInvalid = normalizedError ? true : ariaInvalid;
 
     const mergedRef = useCallback(
       (node: HTMLInputElement | null) => {
@@ -219,28 +320,21 @@ export const SensitiveInput = forwardRef<HTMLInputElement, SensitiveInputProps>(
       }
     }
 
-    const handleContainerClick = useCallback(
-      (e: React.MouseEvent) => {
+    const revealValue = useCallback(() => {
+      if (disabled || !hasValue || mode !== "masked") return;
+      setMode("revealed");
+      if (!readOnly) {
+        setTimeout(() => inputRef.current?.focus(), 0);
+      }
+    }, [mode, hasValue, disabled, readOnly]);
+
+    const handleRevealClick = useCallback(
+      (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
         if (disabled) return;
-        // Ignore clicks that originated from outside (e.g., label click focusing input)
-        // Label clicks trigger a click on the input, but the click coordinates are outside the container
-        if (containerRef.current) {
-          const rect = containerRef.current.getBoundingClientRect();
-          const isClickInsideContainer =
-            e.clientX >= rect.left &&
-            e.clientX <= rect.right &&
-            e.clientY >= rect.top &&
-            e.clientY <= rect.bottom;
-          if (!isClickInsideContainer) return;
-        }
-        if (mode === "masked" && hasValue) {
-          setMode("revealed");
-          if (!readOnly) {
-            setTimeout(() => inputRef.current?.focus(), 0);
-          }
-        }
+        revealValue();
       },
-      [mode, hasValue, disabled, readOnly],
+      [disabled, revealValue],
     );
 
     const handleToggleVisibility = useCallback(
@@ -289,28 +383,13 @@ export const SensitiveInput = forwardRef<HTMLInputElement, SensitiveInputProps>(
       [hasValue],
     );
 
-    const handleContainerKeyDown = useCallback(
-      (e: React.KeyboardEvent<HTMLDivElement>) => {
-        if (disabled) return;
-        if (mode === "masked" && hasValue) {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            setMode("revealed");
-            if (!readOnly) {
-              setTimeout(() => inputRef.current?.focus(), 0);
-            }
-          }
-        }
-      },
-      [mode, hasValue, disabled, readOnly],
-    );
-
     const handleInputKeyDown = useCallback(
       (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (mode === "revealed" && e.key === "Escape") {
           setMode("masked");
-          // Move focus to container to avoid focus trap (input becomes tabIndex={-1})
-          setTimeout(() => containerRef.current?.focus(), 0);
+          // Move focus to the native reveal button to avoid a focus trap once the
+          // input becomes hidden from assistive technologies again.
+          setTimeout(() => revealButtonRef.current?.focus(), 0);
         }
       },
       [mode],
@@ -319,8 +398,23 @@ export const SensitiveInput = forwardRef<HTMLInputElement, SensitiveInputProps>(
     const isMaskedWithValue = mode === "masked" && hasValue;
     const showEyeButton =
       !disabled && (mode === "revealed" || (mode === "empty" && hasValue));
+    const actionLabel =
+      mode === "revealed" ? labels.hideValue : labels.revealValue;
+    const controlName = valueLabel ? `${actionLabel}: ${valueLabel}` : actionLabel;
+    const controlLabelledBy = ariaLabelledBy
+      ? `${revealActionLabelId} ${ariaLabelledBy}`
+      : undefined;
+    const controlAriaLabel = controlLabelledBy ? undefined : controlName;
+    const liveRegionText = copied
+      ? labels.copiedToClipboard
+      : mode === "revealed" && hasValue
+        ? labels.valueRevealed
+        : mode === "masked" && hasValue
+          ? labels.valueHidden
+          : "";
 
-    // Icon sizes matching input sizes
+    // Icon sizes matching input sizes. Pseudo-elements expand hit areas
+    // without changing the visible icon button dimensions.
     const iconSize = size === "xs" || size === "sm" ? "size-3" : "size-4";
 
     const containerClassName = cn(
@@ -348,11 +442,15 @@ export const SensitiveInput = forwardRef<HTMLInputElement, SensitiveInputProps>(
           readOnly={readOnly || isMaskedWithValue}
           autoComplete={autoComplete}
           tabIndex={isMaskedWithValue ? -1 : 0}
+          aria-label={inputAriaLabel}
+          aria-labelledby={ariaLabelledBy}
+          aria-describedby={inputAriaDescribedBy}
+          aria-invalid={inputAriaInvalid}
           className={cn(
             "w-full border-0 bg-transparent p-0 text-kumo-default ring-0 outline-none kumo-input-placeholder disabled:cursor-not-allowed disabled:text-kumo-subtle",
-            size === "xs" && "pr-5",
-            size === "sm" && "pr-6",
-            size === "base" && "pr-8",
+            size === "xs" && "pr-7.5",
+            size === "sm" && "pr-8",
+            size === "base" && "pr-9",
             size === "lg" && "pr-10",
             isMaskedWithValue && "pointer-events-none text-transparent",
           )}
@@ -360,78 +458,92 @@ export const SensitiveInput = forwardRef<HTMLInputElement, SensitiveInputProps>(
           {...inputProps}
         />
 
-        {/* Mask overlay - absolutely positioned, doesn't affect layout */}
-        <span
-          className={cn(
-            "pointer-events-none absolute inset-y-0 left-0 flex items-center overflow-hidden select-none",
-            // Match input pr padding (space for icon)
-            size === "xs" && "right-5",
-            size === "sm" && "right-6",
-            size === "base" && "right-8",
-            size === "lg" && "right-10",
-            // Match the padding from inputVariants
-            size === "xs" && "px-1.5",
-            size === "sm" && "px-2",
-            size === "base" && "px-3",
-            size === "lg" && "px-4",
-            // Hidden when not masked
-            !isMaskedWithValue && "invisible",
-            // When masked: enable pointer events
-            isMaskedWithValue && "pointer-events-auto",
-            // Text color - use text-kumo-default to contrast with bg-kumo-control input background
-            "text-kumo-default",
-            // Hover state - pure CSS, no React state (group for children)
-            "group/mask",
-          )}
-          aria-hidden="true"
-        >
-          {/* Both texts rendered, stacked. Visibility toggled on hover to prevent layout shift */}
-          <span className="relative">
-            <span
-              className={cn(
-                isMaskedWithValue &&
+        {controlLabelledBy && (
+          <span id={revealActionLabelId} className="sr-only">
+            {mode === "revealed" ? labels.hideValue : labels.revealValue}
+          </span>
+        )}
+
+        {isMaskedWithValue && (
+          <button
+            ref={revealButtonRef}
+            type="button"
+            data-kumo-component="SensitiveInput"
+            data-kumo-part="reveal"
+            onClick={handleRevealClick}
+            aria-label={controlAriaLabel}
+            aria-labelledby={controlLabelledBy}
+            aria-describedby={composeAriaDescribedBy(
+              maskedInstructionId,
+              liveRegionId,
+              feedbackId,
+            )}
+            disabled={disabled}
+            className={cn(
+              "absolute inset-y-0 left-0 flex cursor-pointer items-center overflow-hidden bg-transparent border-none shadow-none p-0 m-0 h-auto min-h-0 text-kumo-default select-none",
+              // Match input pr padding (space for icon)
+              size === "xs" && "right-7.5",
+              size === "sm" && "right-8",
+              size === "base" && "right-9",
+              size === "lg" && "right-10",
+              // Match the padding from inputVariants
+              size === "xs" && "px-1.5",
+              size === "sm" && "px-2",
+              size === "base" && "px-3",
+              size === "lg" && "px-4",
+              "focus:outline-none disabled:cursor-not-allowed",
+              // Hover state - pure CSS, no React state (group for children)
+              "group/mask",
+            )}
+          >
+            {/* Both texts rendered, stacked. Visibility toggled on hover to prevent layout shift */}
+            <span className="relative" aria-hidden="true">
+              <span
+                className={cn(
                   !disabled &&
-                  "group-focus-within/container:invisible group-hover/mask:invisible",
+                    "group-focus-within/container:invisible group-hover/mask:invisible",
+                )}
+              >
+                {labels.maskedValue}
+              </span>
+              {!disabled && (
+                <span className="invisible absolute left-0 top-0 whitespace-nowrap text-kumo-subtle group-focus-within/container:visible group-hover/mask:visible">
+                  {labels.clickToReveal}
+                </span>
               )}
-            >
-              ••••••••
             </span>
-            {isMaskedWithValue && !disabled && (
-              <span className="invisible absolute left-0 top-0 whitespace-nowrap text-kumo-subtle group-focus-within/container:visible group-hover/mask:visible">
-                Click to reveal
-              </span>
-            )}
-          </span>
-        </span>
+          </button>
+        )}
 
         {/* Eye button - absolutely positioned to the right */}
-        <button
-          type="button"
-          data-kumo-component="SensitiveInput"
-          data-kumo-part="toggle-visibility"
-          onClick={handleToggleVisibility}
-          onKeyDown={(e) => e.stopPropagation()}
-          aria-label={mode === "revealed" ? "Hide value" : "Reveal value"}
-          tabIndex={showEyeButton ? 0 : -1}
-          className={cn(
-            "absolute top-1/2 right-0 -translate-y-1/2 cursor-pointer text-kumo-subtle hover:text-kumo-default focus:text-kumo-default focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand focus-visible:rounded-sm",
-            // Defensive styles to prevent global CSS pollution (e.g., button { background: gray })
-            "bg-transparent border-none shadow-none p-0 m-0 h-auto min-h-0 inline-flex items-center justify-center",
-            // Match right padding from inputVariants
-            size === "xs" && "right-1.5",
-            size === "sm" && "right-2",
-            size === "base" && "right-3",
-            size === "lg" && "right-4",
-            iconSize,
-            !showEyeButton && "pointer-events-none opacity-0",
-          )}
-        >
-          {mode === "revealed" ? (
-            <EyeSlash className="size-full" />
-          ) : (
-            <Eye className="size-full" />
-          )}
-        </button>
+        {showEyeButton && (
+          <button
+            type="button"
+            data-kumo-component="SensitiveInput"
+            data-kumo-part="toggle-visibility"
+            onClick={handleToggleVisibility}
+            onKeyDown={(e) => e.stopPropagation()}
+            aria-label={controlAriaLabel}
+            aria-labelledby={controlLabelledBy}
+            className={cn(
+              "absolute top-1/2 right-0 -translate-y-1/2 cursor-pointer rounded-sm text-kumo-subtle hover:text-kumo-default focus:text-kumo-default focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand",
+              "before:absolute before:left-1/2 before:top-1/2 before:min-h-6 before:min-w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']",
+              // Defensive styles to prevent global CSS pollution (e.g., button { background: gray })
+              "inline-flex items-center justify-center bg-transparent border-none shadow-none p-0 m-0",
+              // Match right padding from inputVariants
+              size === "xs" && "right-1.5",
+              size === "sm" && "right-2",
+              size === "base" && "right-3",
+              size === "lg" && "right-4",
+            )}
+          >
+            {mode === "revealed" ? (
+              <EyeSlash className={iconSize} aria-hidden="true" />
+            ) : (
+              <Eye className={iconSize} aria-hidden="true" />
+            )}
+          </button>
+        )}
 
         {/* Copy tab - appears on hover/focus at top right (hidden when disabled) */}
         {hasValue && !disabled && (
@@ -441,14 +553,15 @@ export const SensitiveInput = forwardRef<HTMLInputElement, SensitiveInputProps>(
             data-kumo-part="copy"
             onClick={copyToClipboard}
             onKeyDown={(e) => e.stopPropagation()}
-            aria-label={copied ? "Copied" : "Copy to clipboard"}
+            aria-label={copied ? labels.copied : labels.copyToClipboard}
             className={cn(
-              "absolute -top-px right-2 -translate-y-full cursor-pointer rounded-t-md bg-kumo-brand px-2 py-0.5 text-xs text-white opacity-0 transition-opacity group-focus-within/container:opacity-100 group-hover/container:opacity-100 hover:brightness-120 focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand",
+              "absolute -top-px right-2 inline-flex -translate-y-full cursor-pointer items-center justify-center rounded-t-md bg-kumo-brand px-2 py-0.5 text-xs text-white opacity-0 transition-opacity group-focus-within/container:opacity-100 group-hover/container:opacity-100 hover:brightness-120 focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand",
+              "before:absolute before:left-1/2 before:top-1/2 before:min-h-6 before:min-w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']",
               // Defensive styles to prevent global CSS pollution
-              "border-none shadow-none m-0 h-auto min-h-0",
+              "border-none shadow-none m-0",
             )}
           >
-            {copied ? "Copied" : "Copy"}
+            {copied ? labels.copied : labels.copy}
           </button>
         )}
       </>
@@ -456,38 +569,16 @@ export const SensitiveInput = forwardRef<HTMLInputElement, SensitiveInputProps>(
 
     const input = (
       <div>
-        {isMaskedWithValue ? (
-          <div
-            ref={containerRef}
-            // Cannot use <button> here because containerContent contains interactive button elements (Copy, Reveal).
-            // Using role="button" with proper keyboard handling instead.
-            // oxlint-disable-next-line prefer-tag-over-role
-            role="button"
-            data-kumo-component="SensitiveInput"
-            data-kumo-part="masked-container"
-            tabIndex={disabled ? -1 : 0}
-            className={containerClassName}
-            onClick={handleContainerClick}
-            onKeyDown={handleContainerKeyDown}
-            aria-label={`${ariaLabelFallback}, masked.`}
-            aria-describedby={`${maskedInstructionId} ${liveRegionId}`}
-            aria-disabled={disabled}
-          >
-            {containerContent}
-          </div>
-        ) : (
-          <div ref={containerRef} className={containerClassName}>
-            {containerContent}
-          </div>
-        )}
+        <div ref={containerRef} className={containerClassName}>
+          {containerContent}
+        </div>
         {isMaskedWithValue && (
           <span id={maskedInstructionId} className="sr-only">
-            Click or press Enter to reveal.
+            {labels.revealInstruction}
           </span>
         )}
         <span id={liveRegionId} className="sr-only" aria-live="polite">
-          {mode === "masked" && hasValue && "Value hidden"}
-          {copied && "Copied to clipboard"}
+          {liveRegionText}
         </span>
       </div>
     );
@@ -500,19 +591,35 @@ export const SensitiveInput = forwardRef<HTMLInputElement, SensitiveInputProps>(
           required={required}
           labelTooltip={labelTooltip}
           description={description}
-          error={
-            error
-              ? typeof error === "string"
-                ? { message: error, match: true }
-                : error
-              : undefined
-          }
+          error={normalizedError}
         >
           {input}
         </Field>
       );
     }
 
+    if (normalizedError || description) {
+      return (
+        <div className="grid gap-2">
+          {input}
+          {normalizedError ? (
+            <span id={errorId} className="text-sm leading-snug text-kumo-danger">
+              {normalizedError.message}
+            </span>
+          ) : (
+            description && (
+              <span
+                id={descriptionId}
+                className="text-sm leading-snug text-kumo-subtle"
+              >
+                {description}
+              </span>
+            )
+          )}
+        </div>
+      );
+    }
+
     // Render bare input without Field wrapper
     return input;
   },
diff --git a/packages/kumo/src/components/sidebar/sidebar.test.tsx b/packages/kumo/src/components/sidebar/sidebar.test.tsx
index c69a25f8e9..bb83d835a7 100644
--- a/packages/kumo/src/components/sidebar/sidebar.test.tsx
+++ b/packages/kumo/src/components/sidebar/sidebar.test.tsx
@@ -526,6 +526,8 @@ describe("Sidebar.ResizeHandle", () => {
     expect(handle.tagName).toBe("BUTTON");
     expect(handle.getAttribute("aria-label")).toBe("Resize sidebar");
     expect(handle.getAttribute("tabindex")).toBe("0");
+    expect(handle.className).toContain("w-6");
+    expect(handle.className).toContain("-right-3");
   });
 });
 
diff --git a/packages/kumo/src/components/sidebar/sidebar.tsx b/packages/kumo/src/components/sidebar/sidebar.tsx
index 447a43c1d3..5031a3e1f2 100644
--- a/packages/kumo/src/components/sidebar/sidebar.tsx
+++ b/packages/kumo/src/components/sidebar/sidebar.tsx
@@ -1728,14 +1728,14 @@ const SidebarResizeHandle = forwardRef<
       tabIndex={0}
       data-sidebar="resize-handle"
       className={cn(
-        // Hit area inside the sidebar edge; thin visual line pinned to the edge via ::after
-        "absolute inset-y-0 z-2 hidden w-3 cursor-col-resize sm:block",
-        "after:absolute after:inset-y-0 after:w-0.5",
+        // 24px hit area centered on the sidebar edge; thin visual line via ::after.
+        "absolute inset-y-0 z-2 hidden w-6 cursor-col-resize sm:block",
+        "after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 after:-translate-x-1/2",
         "after:bg-transparent after:transition-colors",
         "hover:after:bg-kumo-hairline active:after:bg-kumo-hairline focus-visible:after:bg-kumo-hairline",
-        "focus:outline-none",
-        side === "left" && "right-0 after:right-0",
-        side === "right" && "left-0 after:left-0",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand",
+        side === "left" && "-right-3",
+        side === "right" && "-left-3",
         className,
       )}
       onPointerDown={handlePointerDown}
diff --git a/packages/kumo/src/components/switch/switch.test.tsx b/packages/kumo/src/components/switch/switch.test.tsx
new file mode 100644
index 0000000000..022165efb9
--- /dev/null
+++ b/packages/kumo/src/components/switch/switch.test.tsx
@@ -0,0 +1,144 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Switch } from "./switch";
+
+describe("Switch", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("does not use a generic fallback accessible name", () => {
+    vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    render(<Switch checked={false} onCheckedChange={() => {}} />);
+
+    const switchControl = screen.getByRole("switch");
+    expect(switchControl.getAttribute("aria-label")).not.toBe("Switch");
+    expect(screen.queryByRole("switch", { name: "Switch" })).toBeNull();
+  });
+
+  it("warns when no accessible name is provided", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    render(<Switch checked={false} onCheckedChange={() => {}} />);
+
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining(
+        "[Kumo Switch]: Switch must have an accessible name.",
+      ),
+    );
+  });
+
+  it("does not warn when a visible label provides the accessible name", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    render(
+      <Switch
+        label="Email notifications"
+        checked={false}
+        onCheckedChange={() => {}}
+      />,
+    );
+
+    expect(warn).not.toHaveBeenCalled();
+    expect(
+      screen.getByRole("switch", { name: "Email notifications" }),
+    ).toBeTruthy();
+  });
+
+  it("does not warn when aria-label provides the accessible name", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    render(
+      <Switch
+        aria-label="Email notifications"
+        checked={false}
+        onCheckedChange={() => {}}
+      />,
+    );
+
+    expect(warn).not.toHaveBeenCalled();
+    expect(
+      screen.getByRole("switch", { name: "Email notifications" }),
+    ).toBeTruthy();
+  });
+
+  it("expands an aria-label-only switch target to at least 24px", () => {
+    render(
+      <Switch
+        aria-label="Email notifications"
+        size="sm"
+        checked={false}
+        onCheckedChange={() => {}}
+      />,
+    );
+
+    const switchControl = screen.getByRole("switch", {
+      name: "Email notifications",
+    });
+    expect(switchControl.className).toContain("before:min-h-6");
+    expect(switchControl.className).toContain("before:min-w-6");
+  });
+
+  it("expands grouped switch item targets to at least 24px", () => {
+    render(
+      <Switch.Group legend="Notifications">
+        <Switch.Item label="Email" size="sm" />
+      </Switch.Group>,
+    );
+
+    const switchControl = screen.getByRole("switch", { name: "Email" });
+    expect(switchControl.className).toContain("before:min-h-6");
+    expect(switchControl.className).toContain("before:min-w-6");
+  });
+
+  it("does not warn or override rich labels associated with aria-labelledby", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    render(
+      <Switch
+        label={
+          <span id="advanced-mode-label">
+            Advanced <strong>mode</strong>
+          </span>
+        }
+        aria-labelledby="advanced-mode-label"
+        checked={false}
+        onCheckedChange={() => {}}
+      />,
+    );
+
+    expect(warn).not.toHaveBeenCalled();
+    const switchControl = screen.getByRole("switch", {
+      name: "Advanced mode",
+    });
+    expect(switchControl.getAttribute("aria-labelledby")).toBe(
+      "advanced-mode-label",
+    );
+    expect(switchControl.hasAttribute("aria-label")).toBe(false);
+  });
+
+  it("associates group description and error text with the group fieldset", () => {
+    const { container } = render(
+      <Switch.Group
+        legend="Notifications"
+        error="Enable at least one notification type"
+        description="Choose where alerts should be sent."
+      >
+        <Switch.Item label="Email" />
+      </Switch.Group>,
+    );
+
+    const fieldset = container.querySelector("fieldset");
+    const error = screen.getByText("Enable at least one notification type");
+    const description = screen.getByText("Choose where alerts should be sent.");
+
+    expect(error.id).toBeTruthy();
+    expect(description.id).toBeTruthy();
+    expect(error.getAttribute("role")).toBe("alert");
+    expect(fieldset?.getAttribute("aria-invalid")).toBe("true");
+    expect(fieldset?.getAttribute("aria-describedby")).toBe(
+      `${error.id} ${description.id}`,
+    );
+  });
+});
diff --git a/packages/kumo/src/components/switch/switch.tsx b/packages/kumo/src/components/switch/switch.tsx
index 6cd8f70079..e51df0b5f9 100644
--- a/packages/kumo/src/components/switch/switch.tsx
+++ b/packages/kumo/src/components/switch/switch.tsx
@@ -6,6 +6,7 @@ import {
   type ReactNode,
   createContext,
   useContext,
+  useId,
 } from "react";
 import { cn } from "../../utils/cn";
 import { resolveVariant } from "../../utils/resolve-variant";
@@ -86,7 +87,14 @@ const SwitchGroupContext = createContext<{ controlFirst: boolean }>({
 });
 
 /**
- * Single switch component props (with built-in Field)
+ * Single switch component props (with built-in Field).
+ *
+ * **Accessible Name Required:** Switch should have one of:
+ * 1. `label` prop (recommended) - built-in Field wrapper with horizontal layout
+ * 2. `aria-label` - for switches without visible label
+ * 3. `aria-labelledby` - for custom label association
+ *
+ * Missing accessible names will trigger console warnings in development.
  *
  * Usage patterns:
  *
@@ -114,7 +122,7 @@ export type SwitchProps = Omit<
 > & {
   /** Visual variant: "default" (pill, brand color) or "neutral" (squircle, monochrome) */
   variant?: SwitchVariant;
-  /** Label content for the switch (Field wrapper is built-in) - can be a string or any React node. Optional when used standalone for visual-only purposes. */
+  /** Label content for the switch (Field wrapper is built-in) - can be a string or any React node. */
   label?: ReactNode;
   /** Tooltip content to display next to the label via an info icon */
   labelTooltip?: ReactNode;
@@ -220,12 +228,31 @@ const SwitchBase = forwardRef<HTMLButtonElement, SwitchProps>(
       onCheckedChange,
       transitioning,
       id,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      role: roleProp,
       ...props
     },
     ref,
   ) => {
-    // For aria-label, only use string labels (ReactNode labels can't be used for aria-label)
-    const ariaLabelFallback = typeof label === "string" ? label : "Switch";
+    // A11y enforcement: warn in dev if no accessible name provided.
+    if (process.env.NODE_ENV !== "production") {
+      const hasLabel = Boolean(label);
+      const hasAriaLabel = Boolean(ariaLabel);
+      const hasAriaLabelledBy = Boolean(ariaLabelledBy);
+
+      if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy) {
+        console.warn(
+          "[Kumo Switch]: Switch must have an accessible name. Provide either:\n" +
+            "  - label prop: <Switch label='Enable notifications' />\n" +
+            "  - aria-label: <Switch aria-label='Enable notifications' />\n" +
+            "  - aria-labelledby for custom label association",
+        );
+      }
+    }
+
+    // For aria-label, only use string labels (ReactNode labels can't be used for aria-label).
+    const stringLabel = typeof label === "string" ? label : undefined;
     const switchControl = (
       <BaseSwitch.Root
         ref={ref}
@@ -239,6 +266,8 @@ const SwitchBase = forwardRef<HTMLButtonElement, SwitchProps>(
             ref: rootRef,
             className: baseClassName,
             role: baseRole,
+            "aria-label": rootAriaLabel,
+            "aria-labelledby": rootAriaLabelledBy,
             "aria-checked": _ariaChecked,
             "aria-pressed": _ariaPressed,
             ...restRootProps
@@ -246,6 +275,8 @@ const SwitchBase = forwardRef<HTMLButtonElement, SwitchProps>(
             ref?: Ref<HTMLButtonElement>;
             className?: string;
             role?: string;
+            "aria-label"?: string;
+            "aria-labelledby"?: string;
             "aria-checked"?: boolean;
             "aria-pressed"?: boolean;
           };
@@ -284,6 +315,7 @@ const SwitchBase = forwardRef<HTMLButtonElement, SwitchProps>(
 
           const trackClassName = cn(
             "relative inline-flex items-center ring cursor-pointer border-none p-0",
+            "before:absolute before:left-1/2 before:top-1/2 before:min-h-6 before:min-w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] disabled:before:hidden",
             "focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand",
             "transition-colors duration-150 ease-out motion-reduce:transition-none",
             "disabled:cursor-not-allowed disabled:opacity-50",
@@ -303,12 +335,16 @@ const SwitchBase = forwardRef<HTMLButtonElement, SwitchProps>(
             state.checked ? s.slide : "left-0",
           );
 
-          const role =
-            (props.role as string | undefined) ?? baseRole ?? "switch";
+          const role = (roleProp as string | undefined) ?? baseRole ?? "switch";
           const checkedA11yProps =
             role === "switch"
               ? { "aria-checked": state.checked }
               : { "aria-pressed": state.checked };
+          const controlLabelledBy = ariaLabelledBy ?? rootAriaLabelledBy;
+          const controlAriaLabel =
+            ariaLabel ??
+            rootAriaLabel ??
+            (controlLabelledBy ? undefined : stringLabel);
 
           return (
             <button
@@ -320,7 +356,8 @@ const SwitchBase = forwardRef<HTMLButtonElement, SwitchProps>(
               role={role}
               {...checkedA11yProps}
               aria-busy={transitioning || undefined}
-              aria-label={props["aria-label"] ?? ariaLabelFallback}
+              aria-labelledby={controlLabelledBy}
+              aria-label={controlAriaLabel}
               className={trackClassName}
             >
               <div className={thumbClassName} />
@@ -437,6 +474,7 @@ const SwitchItem = forwardRef<HTMLButtonElement, SwitchItemProps>(
 
             const trackClassName = cn(
               "relative inline-flex items-center ring cursor-pointer border-none p-0",
+              "before:absolute before:left-1/2 before:top-1/2 before:min-h-6 before:min-w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] disabled:before:hidden",
               "focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand",
               "transition-colors duration-150 ease-out motion-reduce:transition-none",
               "disabled:cursor-not-allowed disabled:opacity-50",
@@ -509,11 +547,19 @@ function SwitchGroup({
   controlFirst = true,
   className,
 }: SwitchGroupProps) {
+  const groupId = useId();
+  const errorId = error ? `${groupId}-error` : undefined;
+  const descriptionId = description ? `${groupId}-description` : undefined;
+  const describedBy =
+    [errorId, descriptionId].filter(Boolean).join(" ") || undefined;
+
   return (
     <SwitchGroupContext.Provider value={{ controlFirst }}>
       <Fieldset.Root
         className={cn("flex flex-col gap-4", className)}
         disabled={disabled}
+        aria-describedby={describedBy}
+        aria-invalid={error ? true : undefined}
       >
         {legend && (
           <Fieldset.Legend className="text-base font-medium text-kumo-default">
@@ -521,9 +567,15 @@ function SwitchGroup({
           </Fieldset.Legend>
         )}
         <div className="flex flex-col gap-2">{children}</div>
-        {error && <p className="text-sm text-kumo-danger">{error}</p>}
+        {error && (
+          <p id={errorId} role="alert" className="text-sm text-kumo-danger">
+            {error}
+          </p>
+        )}
         {description && (
-          <p className="text-sm text-kumo-subtle">{description}</p>
+          <p id={descriptionId} className="text-sm text-kumo-subtle">
+            {description}
+          </p>
         )}
       </Fieldset.Root>
     </SwitchGroupContext.Provider>
diff --git a/packages/kumo/src/components/table-of-contents/table-of-contents.test.tsx b/packages/kumo/src/components/table-of-contents/table-of-contents.test.tsx
index b327e0e29c..527287f856 100644
--- a/packages/kumo/src/components/table-of-contents/table-of-contents.test.tsx
+++ b/packages/kumo/src/components/table-of-contents/table-of-contents.test.tsx
@@ -234,7 +234,10 @@ describe("TableOfContents", () => {
     render(
       <TableOfContents>
         <TableOfContents.List>
-          <TableOfContents.Item render={<button type="button" />} active>
+          <TableOfContents.Item
+            render={<button type="button" aria-label="Custom" />}
+            active
+          >
             Custom
           </TableOfContents.Item>
         </TableOfContents.List>
diff --git a/packages/kumo/src/components/table/table.test.tsx b/packages/kumo/src/components/table/table.test.tsx
index c7d5a3c502..07a77579f4 100644
--- a/packages/kumo/src/components/table/table.test.tsx
+++ b/packages/kumo/src/components/table/table.test.tsx
@@ -3,6 +3,64 @@ import { render, screen } from "@testing-library/react";
 import { Table } from "./table";
 
 describe("Table.CheckCell / Table.CheckHead", () => {
+  it("uses localized aria-label props for selection checkboxes", () => {
+    render(
+      <table>
+        <thead>
+          <tr>
+            <Table.CheckHead
+              aria-label="Seleccionar todas las filas"
+              label="Select all rows"
+            />
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <Table.CheckCell
+              aria-label="Seleccionar Kumo v1.0.0"
+              label="Select row"
+            />
+          </tr>
+        </tbody>
+      </table>,
+    );
+
+    expect(
+      screen.getByRole("checkbox", {
+        name: "Seleccionar todas las filas",
+      }),
+    ).toBeDefined();
+    expect(
+      screen.getByRole("checkbox", { name: "Seleccionar Kumo v1.0.0" }),
+    ).toBeDefined();
+  });
+
+  it("falls back to the legacy label prop for selection checkbox names", () => {
+    render(
+      <table>
+        <thead>
+          <tr>
+            <Table.CheckHead label="Sélectionner toutes les lignes" />
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <Table.CheckCell label="Sélectionner cette ligne" />
+          </tr>
+        </tbody>
+      </table>,
+    );
+
+    expect(
+      screen.getByRole("checkbox", {
+        name: "Sélectionner toutes les lignes",
+      }),
+    ).toBeDefined();
+    expect(
+      screen.getByRole("checkbox", { name: "Sélectionner cette ligne" }),
+    ).toBeDefined();
+  });
+
   it("calls onCheckedChange with the new checked state", async () => {
     const onCheckedChange = vi.fn();
     render(
@@ -68,3 +126,29 @@ describe("Table.CheckCell / Table.CheckHead", () => {
     expect(onValueChange).toHaveBeenCalledTimes(1);
   });
 });
+
+describe("Table.ResizeHandle", () => {
+  it("uses the default English aria-label", () => {
+    render(<Table.ResizeHandle />);
+
+    expect(
+      screen.getByRole("button", { name: "Resize column" }),
+    ).toBeDefined();
+  });
+
+  it("allows the resize control aria-label to be localized", () => {
+    render(<Table.ResizeHandle aria-label="Redimensionar columna" />);
+
+    expect(
+      screen.getByRole("button", { name: "Redimensionar columna" }),
+    ).toBeDefined();
+  });
+
+  it("uses a 24px non-layout hit area centered on the column edge", () => {
+    render(<Table.ResizeHandle />);
+
+    const handle = screen.getByRole("button", { name: "Resize column" });
+    expect(handle.className).toContain("w-6");
+    expect(handle.className).toContain("-right-3");
+  });
+});
diff --git a/packages/kumo/src/components/table/table.tsx b/packages/kumo/src/components/table/table.tsx
index 26132550f5..a808d59f4b 100644
--- a/packages/kumo/src/components/table/table.tsx
+++ b/packages/kumo/src/components/table/table.tsx
@@ -238,28 +238,34 @@ const TableFooter = forwardRef<
 
 const TableResizeHandle = forwardRef<
   HTMLButtonElement,
-  React.HTMLAttributes<HTMLButtonElement>
->((props, ref) => {
-  return (
-    <button
-      ref={ref}
-      {...props}
-      type="button"
-      aria-label="Resize column"
-      className={cn(
-        "invisible h-full group-hover:visible", // Make the handle invisible by default
-        "w-[10px]", // Hitting area
-        "flex items-center justify-center", // Center the handle
-        "cursor-col-resize touch-none select-none", // Prevent selection and touch events
-        "absolute top-0 right-0", // Position the handle
-        "m-0 bg-kumo-base p-0", // Override the stratus button styles
-        "focus-visible:ring-2 focus-visible:ring-kumo-brand", // Consistent keyboard focus styling
-      )}
-    >
-      <span className="h-5 w-[2px] rounded bg-kumo-hairline" />
-    </button>
-  );
-});
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(
+  (
+    { "aria-label": ariaLabel = "Resize column", className, ...props },
+    ref,
+  ) => {
+    return (
+      <button
+        ref={ref}
+        {...props}
+        type="button"
+        aria-label={ariaLabel}
+        className={cn(
+          "h-full opacity-0 group-hover:opacity-100 focus-visible:opacity-100", // Keep the handle visually quiet until hover/focus
+          "w-6", // 24px hitting area
+          "flex items-center justify-center", // Center the handle
+          "cursor-col-resize touch-none select-none", // Prevent selection and touch events
+          "absolute top-0 -right-3", // Center the hit area on the column edge
+          "m-0 bg-transparent p-0", // Override the stratus button styles
+          "focus-visible:ring-2 focus-visible:ring-kumo-brand", // Consistent keyboard focus styling
+          className,
+        )}
+      >
+        <span className="h-5 w-[2px] rounded bg-kumo-hairline" />
+      </button>
+    );
+  },
+);
 
 /**
  * Special cell that makes the entire cell area a hit target for the checkbox.
@@ -293,6 +299,7 @@ const TableCheckCell = forwardRef<
       onValueChange,
       label,
       disabled,
+      "aria-label": ariaLabel,
       ...props
     },
     ref,
@@ -310,7 +317,7 @@ const TableCheckCell = forwardRef<
             onCheckedChange?.(newChecked, eventDetails);
             onValueChange?.(newChecked);
           }}
-          aria-label={label ?? "Select row"}
+          aria-label={ariaLabel ?? label ?? "Select row"}
           disabled={disabled}
           className="relative before:absolute before:-inset-3 before:content-['']"
         />
@@ -347,6 +354,7 @@ const TableCheckHead = forwardRef<
       onValueChange,
       label,
       disabled,
+      "aria-label": ariaLabel,
       ...props
     },
     ref,
@@ -364,7 +372,7 @@ const TableCheckHead = forwardRef<
             onCheckedChange?.(newChecked, eventDetails);
             onValueChange?.(newChecked);
           }}
-          aria-label={label ?? "Select all rows"}
+          aria-label={ariaLabel ?? label ?? "Select all rows"}
           disabled={disabled}
           className="relative before:absolute before:-inset-3 before:content-['']"
         />
diff --git a/packages/kumo/src/components/tabs/tabs.test.tsx b/packages/kumo/src/components/tabs/tabs.test.tsx
new file mode 100644
index 0000000000..5140b8f14c
--- /dev/null
+++ b/packages/kumo/src/components/tabs/tabs.test.tsx
@@ -0,0 +1,102 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Tabs } from "./tabs";
+
+function setReducedMotionPreference(matches: boolean) {
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: vi.fn().mockImplementation((query: string) => ({
+      matches: query === "(prefers-reduced-motion: reduce)" ? matches : false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  });
+}
+
+describe("Tabs", () => {
+  const originalScrollIntoViewDescriptor = Object.getOwnPropertyDescriptor(
+    HTMLElement.prototype,
+    "scrollIntoView",
+  );
+  const originalMatchMediaDescriptor = Object.getOwnPropertyDescriptor(
+    window,
+    "matchMedia",
+  );
+
+  afterEach(() => {
+    if (originalScrollIntoViewDescriptor) {
+      Object.defineProperty(
+        HTMLElement.prototype,
+        "scrollIntoView",
+        originalScrollIntoViewDescriptor,
+      );
+    } else {
+      delete HTMLElement.prototype.scrollIntoView;
+    }
+    if (originalMatchMediaDescriptor) {
+      Object.defineProperty(window, "matchMedia", originalMatchMediaDescriptor);
+    } else {
+      Reflect.deleteProperty(window, "matchMedia");
+    }
+    vi.restoreAllMocks();
+  });
+
+  it("scrolls selected tabs smoothly by default", () => {
+    setReducedMotionPreference(false);
+    const scrollIntoView = vi.fn();
+    Object.defineProperty(HTMLElement.prototype, "scrollIntoView", {
+      configurable: true,
+      value: scrollIntoView,
+    });
+
+    render(
+      <Tabs
+        variant="underline"
+        tabs={[
+          { value: "overview", label: "Overview" },
+          { value: "settings", label: "Settings" },
+        ]}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("tab", { name: "Settings" }));
+
+    expect(scrollIntoView).toHaveBeenCalledWith({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "nearest",
+    });
+  });
+
+  it("avoids smooth tab scrolling when reduced motion is preferred", () => {
+    setReducedMotionPreference(true);
+    const scrollIntoView = vi.fn();
+    Object.defineProperty(HTMLElement.prototype, "scrollIntoView", {
+      configurable: true,
+      value: scrollIntoView,
+    });
+
+    render(
+      <Tabs
+        variant="underline"
+        tabs={[
+          { value: "overview", label: "Overview" },
+          { value: "settings", label: "Settings" },
+        ]}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("tab", { name: "Settings" }));
+
+    expect(scrollIntoView).toHaveBeenCalledWith({
+      behavior: "auto",
+      block: "nearest",
+      inline: "nearest",
+    });
+  });
+});
diff --git a/packages/kumo/src/components/tabs/tabs.tsx b/packages/kumo/src/components/tabs/tabs.tsx
index c9ff512f7b..af4eb076fe 100644
--- a/packages/kumo/src/components/tabs/tabs.tsx
+++ b/packages/kumo/src/components/tabs/tabs.tsx
@@ -208,7 +208,7 @@ export function Tabs({
             render={tab.render}
             onClick={(e) => {
               e.currentTarget.scrollIntoView({
-                behavior: "smooth",
+                behavior: getMotionSafeScrollBehavior(),
                 block: "nearest",
                 inline: "nearest",
               });
@@ -237,7 +237,7 @@ export function Tabs({
               {...props}
               className={cn(
                 "absolute z-1 left-0",
-                "w-(--active-tab-width) translate-x-(--active-tab-left) transition-all duration-200",
+                "w-(--active-tab-width) translate-x-(--active-tab-left) transition-all duration-200 motion-reduce:transition-none",
                 "data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0",
                 isSegmented &&
                   cn(
@@ -367,3 +367,12 @@ function useOverflowDetect(enabled: boolean) {
 
   return { ref, isOverflowing };
 }
+
+function getMotionSafeScrollBehavior(): ScrollBehavior {
+  const prefersReducedMotion =
+    typeof window !== "undefined" &&
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  return prefersReducedMotion ? "auto" : "smooth";
+}
diff --git a/packages/kumo/src/index.ts b/packages/kumo/src/index.ts
index f33c8a7f19..7470e24b8f 100644
--- a/packages/kumo/src/index.ts
+++ b/packages/kumo/src/index.ts
@@ -149,6 +149,7 @@ export {
 } from "./components/popover";
 export {
   SensitiveInput,
+  type SensitiveInputLabels,
   type SensitiveInputProps,
   KUMO_SENSITIVE_INPUT_VARIANTS,
   KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS,
@@ -173,6 +174,8 @@ export {
   CommandPalette,
   KUMO_COMMAND_PALETTE_VARIANTS,
   KUMO_COMMAND_PALETTE_DEFAULT_VARIANTS,
+  type CommandPaletteDialogProps,
+  type CommandPaletteDialogTitleProps,
   type CommandPaletteRootProps,
   type CommandPaletteInputProps,
   type CommandPaletteItemProps,
@@ -194,7 +197,13 @@ export {
   type KumoLinkVariant,
   type KumoLinkVariantsProps,
 } from "./components/link";
-export { Breadcrumbs, type BreadcrumbsProps } from "./components/breadcrumbs";
+export {
+  Breadcrumbs,
+  type BreadcrumbsClipboardLabels,
+  type BreadcrumbsClipboardProps,
+  type BreadcrumbsLabels,
+  type BreadcrumbsProps,
+} from "./components/breadcrumbs";
 export { Empty, type EmptyProps } from "./components/empty";
 export {
   Grid,
@@ -240,6 +249,9 @@ export {
   TimeseriesChart,
   ChartLegend,
   type KumoChartOption,
+  type TimeseriesChartProps,
+  type TimeseriesData,
+  type TimeseriesTimeRangeControlsLabels,
   type SankeyChartProps,
   type SankeyNodeData,
   type SankeyLinkData,
diff --git a/packages/kumo/src/styles/kumo-binding.css b/packages/kumo/src/styles/kumo-binding.css
index b8e8dff6c1..61ffd6f22c 100644
--- a/packages/kumo/src/styles/kumo-binding.css
+++ b/packages/kumo/src/styles/kumo-binding.css
@@ -153,6 +153,11 @@
   }
 }
 
+.kumo-chart-wave-path {
+  animation: kumo-chart-wave 2.4s linear infinite;
+  transform-origin: 0 0;
+}
+
 @keyframes toast-bump {
   0% {
     transform: scale(1);
@@ -172,6 +177,25 @@
   transform-origin: center;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .float,
+  .animate-refresh,
+  .animate-bounce-in,
+  .animate-toast-bump,
+  .skeleton-line::after,
+  .kumo-chart-wave-loader,
+  .kumo-chart-wave-path {
+    animation: none;
+  }
+
+  .animate-bounce-in,
+  .animate-toast-bump,
+  .skeleton-line::after,
+  .kumo-chart-wave-path {
+    transform: none;
+  }
+}
+
 @layer base {
   .skeleton-line {
     position: relative;
diff --git a/packages/kumo/src/styles/kumo.css b/packages/kumo/src/styles/kumo.css
index 83bcf9b1c5..795ab2225f 100644
--- a/packages/kumo/src/styles/kumo.css
+++ b/packages/kumo/src/styles/kumo.css
@@ -91,6 +91,17 @@
   animation: refresh 1s linear infinite;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .skeleton,
+  .animate-refresh {
+    animation: none;
+  }
+
+  .skeleton {
+    background-position: 0 0;
+  }
+}
+
 /* ============================================
    react-day-picker styles for Calendar/DatePicker
    ============================================ */
@@ -332,6 +343,18 @@
   position: relative;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .rdp-root {
+    --rdp-animation_duration: 0s;
+  }
+
+  .rdp-day_button,
+  .rdp-button_next,
+  .rdp-button_previous {
+    transition: none;
+  }
+}
+
 .rdp-root[data-nav-layout="around"] .rdp-month_caption {
   justify-content: center;
   margin-inline-start: var(--rdp-nav_button-width);

From 0f91456ec6421c7268848565fd7f6b321904eef1 Mon Sep 17 00:00:00 2001
From: Pedro Menezes <pmenezes@cloudflare.com>
Date: Fri, 19 Jun 2026 18:37:17 +0100
Subject: [PATCH 2/2] fix: address accessibility review feedback

---
 .changeset/accessibility-improvements.md      |   3 +-
 .../src/components/SearchDialog.tsx           |  40 +++++-
 .../src/components/demos/BreadcrumbsDemo.tsx  |  12 +-
 .../components/demos/CommandPaletteDemo.tsx   |  56 ++++++--
 .../components/demos/SensitiveInputDemo.tsx   |  22 +--
 .../src/pages/components/command-palette.mdx  |  20 ++-
 .../src/pages/components/sensitive-input.mdx  |  22 +--
 .../src/components/banner/banner.test.tsx     |  26 ++++
 .../kumo/src/components/banner/banner.tsx     |  31 ++++-
 .../breadcrumbs/breadcrumbs.test.tsx          |  30 ++--
 .../src/components/chart/SankeyChart.test.tsx |  12 +-
 .../command-palette/command-palette.test.tsx  | 130 +++++++++++++++++-
 .../command-palette/command-palette.tsx       |  79 ++++++++++-
 .../src/components/command-palette/types.ts   |   5 +
 .../sensitive-input/sensitive-input.test.tsx  |  46 ++++---
 15 files changed, 430 insertions(+), 104 deletions(-)

diff --git a/.changeset/accessibility-improvements.md b/.changeset/accessibility-improvements.md
index 5f1ec4c848..9d16fce26c 100644
--- a/.changeset/accessibility-improvements.md
+++ b/.changeset/accessibility-improvements.md
@@ -6,7 +6,8 @@ Improve accessibility across Kumo components, charts, and docs.
 
 ### Components
 
-- Improve CommandPalette screen reader context with a dialog title, busy, loading, and empty-state announcements, and localizable labels for status and action text.
+- Improve CommandPalette screen reader context with a dialog title, named inputs, busy, loading, and empty-state announcements, localizable labels for status and action text, and decorative icons hidden from assistive technology.
+- Hide Banner icons from assistive technology because they duplicate the surrounding banner text.
 - Improve SensitiveInput semantics with localizable labels and status text, warnings for missing or generic primary names, clearer warning and error text, compact hit areas that do not change the visual layout where possible, and decorative icons that are hidden from assistive technology.
 - Add accessible-name warnings for Switch, associate Switch groups with descriptions and errors, announce invalid and error states, and expand Switch hit areas without changing compact visuals where possible.
 - Improve Button icon-only guidance with accessible-name warnings, decorative icon handling, and compact hit areas that preserve the existing visual size where possible.
diff --git a/packages/kumo-docs-astro/src/components/SearchDialog.tsx b/packages/kumo-docs-astro/src/components/SearchDialog.tsx
index 5490767597..e2a1e111c5 100644
--- a/packages/kumo-docs-astro/src/components/SearchDialog.tsx
+++ b/packages/kumo-docs-astro/src/components/SearchDialog.tsx
@@ -211,6 +211,7 @@ interface SearchDialogProps {
 
 const SEARCH_DIALOG_MESSAGES = {
   dialogTitle: "Search Kumo documentation",
+  inputLabel: "Search documentation",
   loadError: "Failed to load search index",
   emptyIdle: "Type to search docs",
   placeholder: "Search docs...",
@@ -302,13 +303,41 @@ function asSearchResults(items: SearchItem[]): SearchGroup[] {
 function getTypeIcon(type: "component" | "block" | "layout" | "page") {
   switch (type) {
     case "block":
-      return <StackIcon size={16} weight="duotone" />;
+      return (
+        <StackIcon
+          aria-hidden="true"
+          focusable="false"
+          size={16}
+          weight="duotone"
+        />
+      );
     case "layout":
-      return <SquaresFourIcon size={16} weight="duotone" />;
+      return (
+        <SquaresFourIcon
+          aria-hidden="true"
+          focusable="false"
+          size={16}
+          weight="duotone"
+        />
+      );
     case "page":
-      return <BookOpenIcon size={16} weight="duotone" />;
+      return (
+        <BookOpenIcon
+          aria-hidden="true"
+          focusable="false"
+          size={16}
+          weight="duotone"
+        />
+      );
     default:
-      return <CubeIcon size={16} weight="duotone" />;
+      return (
+        <CubeIcon
+          aria-hidden="true"
+          focusable="false"
+          size={16}
+          weight="duotone"
+        />
+      );
   }
 }
 
@@ -456,9 +485,12 @@ export function SearchDialog({ open, onOpenChange }: SearchDialogProps) {
       filter={() => true}
     >
       <CommandPalette.Input
+        aria-label={SEARCH_DIALOG_MESSAGES.inputLabel}
         placeholder={SEARCH_DIALOG_MESSAGES.placeholder}
         leading={
           <MagnifyingGlassIcon
+            aria-hidden="true"
+            focusable="false"
             className="h-4 w-4 text-kumo-subtle"
             weight="bold"
           />
diff --git a/packages/kumo-docs-astro/src/components/demos/BreadcrumbsDemo.tsx b/packages/kumo-docs-astro/src/components/demos/BreadcrumbsDemo.tsx
index 8289a24ed6..66ef19c2c1 100644
--- a/packages/kumo-docs-astro/src/components/demos/BreadcrumbsDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/BreadcrumbsDemo.tsx
@@ -66,18 +66,18 @@ export function BreadcrumbsLocalizedDemo() {
   return (
     <Breadcrumbs
       labels={{
-        navigation: "Ruta de navegación",
+        navigation: "Trilha de navegação",
         copyAction: "Copiar",
-        copyTooltip: "Haz clic para copiar",
+        copyTooltip: "Clique para copiar",
         copiedFeedback: "Copiado",
       }}
     >
-      <Breadcrumbs.Link href="#">Inicio</Breadcrumbs.Link>
+      <Breadcrumbs.Link href="#">Início</Breadcrumbs.Link>
       <Breadcrumbs.Separator />
-      <Breadcrumbs.Link href="#">Documentación</Breadcrumbs.Link>
+      <Breadcrumbs.Link href="#">Documentação</Breadcrumbs.Link>
       <Breadcrumbs.Separator />
-      <Breadcrumbs.Current>Migas de pan</Breadcrumbs.Current>
-      <Breadcrumbs.Clipboard text="#migas-de-pan" />
+      <Breadcrumbs.Current>Navegação estrutural</Breadcrumbs.Current>
+      <Breadcrumbs.Clipboard text="#navegacao-estrutural" />
     </Breadcrumbs>
   );
 }
diff --git a/packages/kumo-docs-astro/src/components/demos/CommandPaletteDemo.tsx b/packages/kumo-docs-astro/src/components/demos/CommandPaletteDemo.tsx
index ecd44d256a..358c776f80 100644
--- a/packages/kumo-docs-astro/src/components/demos/CommandPaletteDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/CommandPaletteDemo.tsx
@@ -23,6 +23,11 @@ interface CommandGroup {
   items: CommandItem[];
 }
 
+const decorativeIconProps = {
+  "aria-hidden": true,
+  focusable: "false",
+} as const;
+
 // Sample data
 const sampleGroups: CommandGroup[] = [
   {
@@ -32,13 +37,17 @@ const sampleGroups: CommandGroup[] = [
       {
         id: "new-project",
         title: "Create New Project",
-        icon: <FolderIcon size={16} />,
+        icon: <FolderIcon {...decorativeIconProps} size={16} />,
+      },
+      {
+        id: "settings",
+        title: "Open Settings",
+        icon: <GearIcon {...decorativeIconProps} size={16} />,
       },
-      { id: "settings", title: "Open Settings", icon: <GearIcon size={16} /> },
       {
         id: "search",
         title: "Search Files",
-        icon: <MagnifyingGlassIcon size={16} />,
+        icon: <MagnifyingGlassIcon {...decorativeIconProps} size={16} />,
       },
     ],
   },
@@ -46,13 +55,21 @@ const sampleGroups: CommandGroup[] = [
     id: "pages",
     label: "Pages",
     items: [
-      { id: "home", title: "Home", icon: <HouseIcon size={16} /> },
+      {
+        id: "home",
+        title: "Home",
+        icon: <HouseIcon {...decorativeIconProps} size={16} />,
+      },
       {
         id: "dashboard",
         title: "Dashboard",
-        icon: <ChartLineIcon size={16} />,
+        icon: <ChartLineIcon {...decorativeIconProps} size={16} />,
+      },
+      {
+        id: "users",
+        title: "Users",
+        icon: <UsersIcon {...decorativeIconProps} size={16} />,
       },
-      { id: "users", title: "Users", icon: <UsersIcon size={16} /> },
     ],
   },
 ];
@@ -115,7 +132,10 @@ export function CommandPaletteBasicDemo() {
         }}
         getSelectableItems={getSelectableItems}
       >
-        <CommandPalette.Input placeholder="Type a command or search..." />
+        <CommandPalette.Input
+          aria-label="Search commands and pages"
+          placeholder="Type a command or search..."
+        />
         <CommandPalette.List>
           <CommandPalette.Results>
             {(group: CommandGroup) => (
@@ -198,7 +218,10 @@ export function CommandPaletteSimpleDemo() {
         }}
         getSelectableItems={(items) => items}
       >
-        <CommandPalette.Input placeholder="Search actions..." />
+        <CommandPalette.Input
+          aria-label="Filter editing actions"
+          placeholder="Search actions..."
+        />
         <CommandPalette.List>
           <CommandPalette.Results>
             {(item: SimpleItem) => (
@@ -250,7 +273,10 @@ export function CommandPaletteLoadingDemo() {
         itemToStringValue={(group) => group.label}
         getSelectableItems={getSelectableItems}
       >
-        <CommandPalette.Input placeholder="Search..." />
+        <CommandPalette.Input
+          aria-label="Search commands while results load"
+          placeholder="Search..."
+        />
         <CommandPalette.List>
           {loading ? (
             <CommandPalette.Loading />
@@ -320,6 +346,7 @@ export function CommandPaletteNoAutocompleteDemo() {
         getSelectableItems={getSelectableItems}
       >
         <CommandPalette.Input
+          aria-label="Search commands without browser autocomplete"
           placeholder="Search commands..."
           autoComplete="off"
           autoCorrect="off"
@@ -377,19 +404,19 @@ const searchResults: SearchResult[] = [
     id: "1",
     title: "Button",
     breadcrumbs: ["Components"],
-    icon: <FileIcon size={16} />,
+    icon: <FileIcon {...decorativeIconProps} size={16} />,
   },
   {
     id: "2",
     title: "Dialog",
     breadcrumbs: ["Components"],
-    icon: <FileIcon size={16} />,
+    icon: <FileIcon {...decorativeIconProps} size={16} />,
   },
   {
     id: "3",
     title: "Page Header",
     breadcrumbs: ["Blocks"],
-    icon: <FileIcon size={16} />,
+    icon: <FileIcon {...decorativeIconProps} size={16} />,
   },
 ];
 
@@ -410,7 +437,10 @@ export function CommandPaletteResultItemDemo() {
         itemToStringValue={(item) => item.title}
         getSelectableItems={(items) => items}
       >
-        <CommandPalette.Input placeholder="Search documentation..." />
+        <CommandPalette.Input
+          aria-label="Search documentation pages"
+          placeholder="Search documentation..."
+        />
         <CommandPalette.List>
           <CommandPalette.Results>
             {(item: SearchResult) => (
diff --git a/packages/kumo-docs-astro/src/components/demos/SensitiveInputDemo.tsx b/packages/kumo-docs-astro/src/components/demos/SensitiveInputDemo.tsx
index 5fba881b84..d0bd888caf 100644
--- a/packages/kumo-docs-astro/src/components/demos/SensitiveInputDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/SensitiveInputDemo.tsx
@@ -84,19 +84,19 @@ export function SensitiveInputLocalizationDemo() {
   return (
     <div className="w-80">
       <SensitiveInput
-        label="Clé API"
+        label="Chave de API"
         defaultValue="sk_live_abc123xyz789"
         labels={{
-          clickToReveal: "Cliquer pour afficher",
-          revealValue: "Afficher la valeur",
-          hideValue: "Masquer la valeur",
-          copy: "Copier",
-          copyToClipboard: "Copier dans le presse-papiers",
-          copied: "Copié",
-          valueRevealed: "Valeur affichée",
-          valueHidden: "Valeur masquée",
-          copiedToClipboard: "Copié dans le presse-papiers",
-          revealInstruction: "Appuyez sur Entrée ou Espace pour afficher.",
+          clickToReveal: "Clique para revelar",
+          revealValue: "Revelar valor",
+          hideValue: "Ocultar valor",
+          copy: "Copiar",
+          copyToClipboard: "Copiar para a área de transferência",
+          copied: "Copiado",
+          valueRevealed: "Valor revelado",
+          valueHidden: "Valor oculto",
+          copiedToClipboard: "Copiado para a área de transferência",
+          revealInstruction: "Pressione Enter ou Espaço para revelar.",
         }}
       />
     </div>
diff --git a/packages/kumo-docs-astro/src/pages/components/command-palette.mdx b/packages/kumo-docs-astro/src/pages/components/command-palette.mdx
index dd733a017a..5f6fd0f149 100644
--- a/packages/kumo-docs-astro/src/pages/components/command-palette.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/command-palette.mdx
@@ -61,6 +61,13 @@ import { CommandPalette } from "@cloudflare/kumo/components/command-palette";
     dialog title for screen readers. Set `dialogTitle` to localized text that
     describes the palette's purpose, such as "Search documentation".
   </p>
+  <p>
+    `CommandPalette.Input` does not render a visible `Label` by default.
+    Placeholder text is only a hint and should not be used as the accessible
+    name, so provide localized `aria-label` text when there is no visible label,
+    or associate custom visible label text with `htmlFor`/`id` or
+    `aria-labelledby` instead of adding a redundant `aria-label`.
+  </p>
   <p>
     `CommandPalette.Loading` and `CommandPalette.Empty` are announced as polite
     status updates. Localize loading text with the `label` prop, or replace the
@@ -102,7 +109,10 @@ export default function Example() {
         itemToStringValue={(item) => item.title}
         getSelectableItems={(items) => items}
       >
-        <CommandPalette.Input placeholder="Search..." />
+        <CommandPalette.Input
+          aria-label="Search actions"
+          placeholder="Search..."
+        />
         <CommandPalette.List>
           <CommandPalette.Results>
             {(item) => (
@@ -217,7 +227,13 @@ export default function Example() {
 
 ### CommandPalette.Input
 
-<p>Search input field with auto-focus and keyboard handling.</p>
+<p>
+  Search input field with auto-focus and keyboard handling. It does not render a
+  visible `Label` by default. Provide a localized accessible name with
+  `aria-label` when there is no visible label, or associate custom visible label
+  text with `htmlFor`/`id` or `aria-labelledby`; placeholder text is not a
+  substitute for a label.
+</p>
 
 ### CommandPalette.List
 
diff --git a/packages/kumo-docs-astro/src/pages/components/sensitive-input.mdx b/packages/kumo-docs-astro/src/pages/components/sensitive-input.mdx
index 055d127063..fd74f218b6 100644
--- a/packages/kumo-docs-astro/src/pages/components/sensitive-input.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/sensitive-input.mdx
@@ -126,19 +126,19 @@ export default function Example() {
 
 ```tsx
 <SensitiveInput
-  label="Clé API"
+  label="Chave de API"
   defaultValue="sk_live_abc123xyz789"
   labels={{
-    clickToReveal: "Cliquer pour afficher",
-    revealValue: "Afficher la valeur",
-    hideValue: "Masquer la valeur",
-    copy: "Copier",
-    copyToClipboard: "Copier dans le presse-papiers",
-    copied: "Copié",
-    valueRevealed: "Valeur affichée",
-    valueHidden: "Valeur masquée",
-    copiedToClipboard: "Copié dans le presse-papiers",
-    revealInstruction: "Appuyez sur Entrée ou Espace pour afficher.",
+    clickToReveal: "Clique para revelar",
+    revealValue: "Revelar valor",
+    hideValue: "Ocultar valor",
+    copy: "Copiar",
+    copyToClipboard: "Copiar para a área de transferência",
+    copied: "Copiado",
+    valueRevealed: "Valor revelado",
+    valueHidden: "Valor oculto",
+    copiedToClipboard: "Copiado para a área de transferência",
+    revealInstruction: "Pressione Enter ou Espaço para revelar.",
   }}
 />
 ```
diff --git a/packages/kumo/src/components/banner/banner.test.tsx b/packages/kumo/src/components/banner/banner.test.tsx
index f7fb4138b5..aebfa73242 100644
--- a/packages/kumo/src/components/banner/banner.test.tsx
+++ b/packages/kumo/src/components/banner/banner.test.tsx
@@ -26,4 +26,30 @@ describe("Banner", () => {
     expect(banner.textContent).toBe("System status");
   });
 
+  it("forces structured banner icons to be decorative", () => {
+    render(
+      <Banner
+        title="System status"
+        icon={
+          <svg data-testid="banner-icon" aria-label="Info" focusable="true" />
+        }
+      />,
+    );
+
+    const icon = screen.getByTestId("banner-icon");
+    expect(icon.getAttribute("aria-hidden")).toBe("true");
+    expect(icon.getAttribute("focusable")).toBe("false");
+  });
+
+  it("forces legacy banner icons to be decorative", () => {
+    render(
+      <Banner icon={<svg data-testid="legacy-banner-icon" />}>
+        Legacy status
+      </Banner>,
+    );
+
+    const icon = screen.getByTestId("legacy-banner-icon");
+    expect(icon.getAttribute("aria-hidden")).toBe("true");
+    expect(icon.getAttribute("focusable")).toBe("false");
+  });
 });
diff --git a/packages/kumo/src/components/banner/banner.tsx b/packages/kumo/src/components/banner/banner.tsx
index d8af0e683e..6df27ac0c4 100644
--- a/packages/kumo/src/components/banner/banner.tsx
+++ b/packages/kumo/src/components/banner/banner.tsx
@@ -1,8 +1,11 @@
 import {
+  cloneElement,
+  forwardRef,
+  isValidElement,
   type HTMLAttributes,
+  type ReactElement,
   type ReactNode,
-  isValidElement,
-  forwardRef,
+  type SVGProps,
 } from "react";
 import { cn } from "../../utils/cn";
 import { resolveVariant } from "../../utils/resolve-variant";
@@ -41,6 +44,20 @@ export const KUMO_BANNER_DEFAULT_VARIANTS = {
   variant: "default",
 } as const;
 
+const DECORATIVE_ICON_PROPS = {
+  "aria-hidden": true,
+  focusable: "false",
+} as const;
+
+function renderDecorativeIcon(icon: ReactNode) {
+  if (!isValidElement(icon)) return icon;
+
+  return cloneElement(
+    icon as ReactElement<SVGProps<SVGSVGElement>>,
+    DECORATIVE_ICON_PROPS,
+  );
+}
+
 // Derived types from KUMO_BANNER_VARIANTS
 export type KumoBannerVariant = keyof typeof KUMO_BANNER_VARIANTS.variant;
 
@@ -167,12 +184,13 @@ export const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(
       >
         {icon && (
           <span
+            aria-hidden="true"
             className={cn(
               "shrink-0 flex items-center h-[1.375em]",
               variantConfig.iconClasses,
             )}
           >
-            {icon}
+            {renderDecorativeIcon(icon)}
           </span>
         )}
         <div
@@ -212,8 +230,11 @@ export const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(
       {...props}
     >
       {icon && (
-        <span className={cn("shrink-0", variantConfig.iconClasses)}>
-          {icon}
+        <span
+          aria-hidden="true"
+          className={cn("shrink-0", variantConfig.iconClasses)}
+        >
+          {renderDecorativeIcon(icon)}
         </span>
       )}
       {content}
diff --git a/packages/kumo/src/components/breadcrumbs/breadcrumbs.test.tsx b/packages/kumo/src/components/breadcrumbs/breadcrumbs.test.tsx
index 46ba6aa543..c83ef869ed 100644
--- a/packages/kumo/src/components/breadcrumbs/breadcrumbs.test.tsx
+++ b/packages/kumo/src/components/breadcrumbs/breadcrumbs.test.tsx
@@ -99,30 +99,30 @@ describe("Breadcrumbs", () => {
     render(
       <Breadcrumb
         labels={{
-          navigation: "Ruta de navegación",
+          navigation: "Trilha de navegação",
           copyAction: "Copiar",
-          copyTooltip: "Haz clic para copiar",
+          copyTooltip: "Clique para copiar",
           copiedFeedback: "Copiado",
         }}
       >
-        <Breadcrumb.Link href="#">Inicio</Breadcrumb.Link>
+        <Breadcrumb.Link href="#">Início</Breadcrumb.Link>
         <Breadcrumb.Separator />
-        <Breadcrumb.Current>Documentación</Breadcrumb.Current>
-        <Breadcrumb.Clipboard text="#documentacion" />
+        <Breadcrumb.Current>Documentação</Breadcrumb.Current>
+        <Breadcrumb.Clipboard text="#documentacao" />
       </Breadcrumb>,
     );
 
     expect(
-      screen.getByRole("navigation", { name: "Ruta de navegación" }),
+      screen.getByRole("navigation", { name: "Trilha de navegação" }),
     ).toBeTruthy();
 
     const copyButton = screen.getAllByRole("button", { name: "Copiar" })[0];
     await user.hover(copyButton);
-    expect(await screen.findByText("Haz clic para copiar")).toBeTruthy();
+    expect(await screen.findByText("Clique para copiar")).toBeTruthy();
 
     await user.click(copyButton);
 
-    expect(writeText).toHaveBeenCalledWith("#documentacion");
+    expect(writeText).toHaveBeenCalledWith("#documentacao");
     await waitFor(() => expect(screen.getByText("Copiado")).toBeTruthy());
   });
 
@@ -133,29 +133,29 @@ describe("Breadcrumbs", () => {
     render(
       <Breadcrumb
         labels={{
-          navigation: "Ruta de navegación",
+          navigation: "Trilha de navegação",
           copyAction: "Copiar",
           copiedFeedback: "Copiado",
         }}
       >
-        <Breadcrumb.Current>Página actual</Breadcrumb.Current>
+        <Breadcrumb.Current>Página atual</Breadcrumb.Current>
         <Breadcrumb.Clipboard
-          text="#actual"
+          text="#atual"
           labels={{
-            copyAction: "Copiar enlace",
-            copiedFeedback: "Enlace copiado",
+            copyAction: "Copiar link",
+            copiedFeedback: "Link copiado",
           }}
         />
       </Breadcrumb>,
     );
 
     const copyButton = screen.getAllByRole("button", {
-      name: "Copiar enlace",
+      name: "Copiar link",
     })[0];
     await user.click(copyButton);
 
     await waitFor(() =>
-      expect(screen.getByText("Enlace copiado")).toBeTruthy(),
+      expect(screen.getByText("Link copiado")).toBeTruthy(),
     );
   });
 });
diff --git a/packages/kumo/src/components/chart/SankeyChart.test.tsx b/packages/kumo/src/components/chart/SankeyChart.test.tsx
index ea80f2d98d..8c79eaa8b7 100644
--- a/packages/kumo/src/components/chart/SankeyChart.test.tsx
+++ b/packages/kumo/src/components/chart/SankeyChart.test.tsx
@@ -464,23 +464,23 @@ describe("SankeyChart", () => {
           links={baseLinks}
           onNodeClick={onNodeClick}
           onLinkClick={onLinkClick}
-          keyboardActionsLabel="Acciones del diagrama"
-          getNodeActionLabel={(node) => `Elegir ${node.name}`}
+          keyboardActionsLabel="Ações do diagrama"
+          getNodeActionLabel={(node) => `Escolher ${node.name}`}
           getLinkActionLabel={(_link, { sourceName, targetName }) =>
-            `Elegir enlace ${sourceName} a ${targetName}`
+            `Escolher conexão de ${sourceName} para ${targetName}`
           }
         />,
       );
 
       expect(
-        screen.getByRole("group", { name: "Acciones del diagrama" }),
+        screen.getByRole("group", { name: "Ações do diagrama" }),
       ).toBeTruthy();
       expect(
-        screen.getByRole("button", { name: "Elegir Source A" }),
+        screen.getByRole("button", { name: "Escolher Source A" }),
       ).toBeTruthy();
       expect(
         screen.getByRole("button", {
-          name: "Elegir enlace Source A a Target X",
+          name: "Escolher conexão de Source A para Target X",
         }),
       ).toBeTruthy();
     });
diff --git a/packages/kumo/src/components/command-palette/command-palette.test.tsx b/packages/kumo/src/components/command-palette/command-palette.test.tsx
index 3566398c44..a9869836c1 100644
--- a/packages/kumo/src/components/command-palette/command-palette.test.tsx
+++ b/packages/kumo/src/components/command-palette/command-palette.test.tsx
@@ -88,7 +88,10 @@ const renderCommandPalette = ({
       dialogTitle={dialogTitle}
       getSelectableItems={getSelectableItems}
     >
-      <CommandPalette.Input placeholder="Search commands..." />
+      <CommandPalette.Input
+        aria-label="Search test commands"
+        placeholder="Search commands..."
+      />
       <CommandPalette.List busy={showLoading}>
         {showLoading ? (
           <CommandPalette.Loading label={loadingLabel} />
@@ -355,10 +358,133 @@ describe("CommandPalette", () => {
     it("input has combobox role", () => {
       renderCommandPalette();
 
-      const input = screen.getByRole("combobox");
+      const input = screen.getByRole("combobox", {
+        name: "Search test commands",
+      });
       expect(input).toBeTruthy();
     });
 
+    it("hides the default decorative input icon from assistive technology", () => {
+      renderCommandPalette();
+
+      const icon = document.querySelector("svg");
+      expect(icon?.getAttribute("aria-hidden")).toBe("true");
+      expect(icon?.getAttribute("focusable")).toBe("false");
+    });
+
+    it("forces ResultItem icons to be decorative", () => {
+      const results = [
+        { id: "button", title: "Button", breadcrumbs: ["Components"] },
+      ];
+
+      render(
+        <CommandPalette.Panel
+          items={results}
+          itemToStringValue={(item) => item.title}
+        >
+          <CommandPalette.List>
+            <CommandPalette.Results>
+              {(item: (typeof results)[number]) => (
+                <CommandPalette.ResultItem
+                  key={item.id}
+                  value={item}
+                  title={item.title}
+                  breadcrumbs={item.breadcrumbs}
+                  icon={
+                    <svg
+                      data-testid="result-icon"
+                      aria-label="File"
+                      focusable="true"
+                    />
+                  }
+                  onClick={() => {}}
+                />
+              )}
+            </CommandPalette.Results>
+          </CommandPalette.List>
+        </CommandPalette.Panel>,
+      );
+
+      const icon = screen.getByTestId("result-icon");
+      expect(icon.getAttribute("aria-hidden")).toBe("true");
+      expect(icon.getAttribute("focusable")).toBe("false");
+    });
+
+    it("warns in development when input has no accessible name", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      try {
+        render(
+          <CommandPalette.Panel items={[]}>
+            <CommandPalette.Input placeholder="Search commands..." />
+            <CommandPalette.List>
+              <CommandPalette.Empty>No commands found</CommandPalette.Empty>
+            </CommandPalette.List>
+          </CommandPalette.Panel>,
+        );
+
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringContaining(
+            "[Kumo CommandPalette]: CommandPalette.Input must have an accessible name.",
+          ),
+        );
+      } finally {
+        warn.mockRestore();
+      }
+    });
+
+    it("does not warn when aria-labelledby provides the input name", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      try {
+        render(
+          <CommandPalette.Panel items={[]}>
+            <span id="command-search-label">Search documentation</span>
+            <CommandPalette.Input
+              aria-labelledby="command-search-label"
+              placeholder="Search docs..."
+            />
+            <CommandPalette.List>
+              <CommandPalette.Empty>No commands found</CommandPalette.Empty>
+            </CommandPalette.List>
+          </CommandPalette.Panel>,
+        );
+
+        expect(
+          screen.getByRole("combobox", { name: "Search documentation" }),
+        ).toBeTruthy();
+        expect(warn).not.toHaveBeenCalled();
+      } finally {
+        warn.mockRestore();
+      }
+    });
+
+    it("does not warn when a visible label provides the input name", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      try {
+        render(
+          <CommandPalette.Panel items={[]}>
+            <label htmlFor="command-search-input">Search documentation</label>
+            <CommandPalette.Input
+              id="command-search-input"
+              placeholder="Search docs..."
+            />
+            <CommandPalette.List>
+              <CommandPalette.Empty>No commands found</CommandPalette.Empty>
+            </CommandPalette.List>
+          </CommandPalette.Panel>,
+        );
+
+        expect(
+          screen.getByRole("combobox", { name: "Search documentation" }),
+        ).toBeTruthy();
+        expect(warn).not.toHaveBeenCalled();
+      } finally {
+        warn.mockRestore();
+      }
+    });
+
     it("auto-focuses input when dialog opens", async () => {
       renderCommandPalette();
 
diff --git a/packages/kumo/src/components/command-palette/command-palette.tsx b/packages/kumo/src/components/command-palette/command-palette.tsx
index e5a65be490..464dc20186 100644
--- a/packages/kumo/src/components/command-palette/command-palette.tsx
+++ b/packages/kumo/src/components/command-palette/command-palette.tsx
@@ -3,8 +3,13 @@ import {
   useCallback,
   createContext,
   useContext,
+  useEffect,
   forwardRef,
+  cloneElement,
+  isValidElement,
   type CSSProperties,
+  type ReactElement,
+  type SVGProps,
 } from "react";
 import { Autocomplete } from "@base-ui/react/autocomplete";
 import { Dialog as DialogBase } from "@base-ui/react/dialog";
@@ -36,6 +41,41 @@ import type {
 
 const DEFAULT_DIALOG_TITLE = "Command palette";
 const DEFAULT_LOADING_LABEL = "Loading results";
+const DECORATIVE_ICON_PROPS = {
+  "aria-hidden": true,
+  focusable: "false",
+} as const;
+
+function renderDecorativeIcon(icon: React.ReactNode) {
+  if (!isValidElement(icon)) return icon;
+
+  return cloneElement(
+    icon as ReactElement<SVGProps<SVGSVGElement>>,
+    DECORATIVE_ICON_PROPS,
+  );
+}
+
+function warnIfMissingInputAccessibleName({
+  input,
+  ariaLabel,
+  ariaLabelledBy,
+}: {
+  input: HTMLInputElement | null;
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
+}) {
+  if (process.env.NODE_ENV === "production") return;
+
+  const hasVisibleLabel = (input?.labels?.length ?? 0) > 0;
+
+  if (!ariaLabel?.trim() && !ariaLabelledBy?.trim() && !hasVisibleLabel) {
+    console.warn(
+      "[Kumo CommandPalette]: CommandPalette.Input must have an accessible name. Placeholder text is only a hint, not a label. Provide either:\n" +
+        "  - aria-label: <CommandPalette.Input aria-label='Search documentation' /> when there is no visible label\n" +
+        "  - aria-labelledby or an associated <label> for custom visible label text",
+    );
+  }
+}
 
 /**
  * CommandPalette - A composable command palette component for Kumo
@@ -62,7 +102,7 @@ const DEFAULT_LOADING_LABEL = "Loading results";
  *   onSelect={(item, { newTab }) => handleSelect(item, newTab)}
  *   getSelectableItems={(groups) => groups.flatMap(g => g.items)}
  * >
- *   <CommandPalette.Input placeholder="Search..." />
+ *   <CommandPalette.Input aria-label="Search documentation" placeholder="Search..." />
  *   <CommandPalette.List>
  *     <Autocomplete.List>
  *       {(group) => (
@@ -244,6 +284,7 @@ function InputHeader({
     <div className="flex items-center gap-3 bg-kumo-base px-4 py-3 focus-within:ring-2 focus-within:ring-kumo-brand">
       {leading ?? (
         <MagnifyingGlassIcon
+          {...DECORATIVE_ICON_PROPS}
           className="h-4 w-4 text-kumo-subtle"
           weight="bold"
         />
@@ -504,8 +545,11 @@ function ResultItem<T>({
       )}
     >
       {icon && (
-        <div className="flex flex-shrink-0 items-center text-kumo-subtle">
-          {icon}
+        <div
+          aria-hidden="true"
+          className="flex flex-shrink-0 items-center text-kumo-subtle"
+        >
+          {renderDecorativeIcon(icon)}
         </div>
       )}
       <div className="min-w-0 flex-1">
@@ -518,6 +562,7 @@ function ResultItem<T>({
                 className="text-base text-kumo-default"
               />
               <CaretRightIcon
+                {...DECORATIVE_ICON_PROPS}
                 className="h-3 w-3 flex-shrink-0 text-kumo-subtle"
                 weight="bold"
               />
@@ -529,7 +574,10 @@ function ResultItem<T>({
             className="text-base text-kumo-default"
           />
           {external && (
-            <ArrowSquareOutIcon className="h-3.5 w-3.5 flex-shrink-0 text-kumo-subtle" />
+            <ArrowSquareOutIcon
+              {...DECORATIVE_ICON_PROPS}
+              className="h-3.5 w-3.5 flex-shrink-0 text-kumo-subtle"
+            />
           )}
           {description && (
             <>
@@ -542,7 +590,10 @@ function ResultItem<T>({
         </div>
       </div>
       {showArrow && !external && !nonInteractive && (
-        <ArrowRightIcon className="h-4 w-4 flex-shrink-0 text-kumo-subtle opacity-0 transition-opacity group-data-[highlighted]:opacity-100" />
+        <ArrowRightIcon
+          {...DECORATIVE_ICON_PROPS}
+          className="h-4 w-4 flex-shrink-0 text-kumo-subtle opacity-0 transition-opacity group-data-[highlighted]:opacity-100"
+        />
       )}
     </Autocomplete.Item>
   );
@@ -634,7 +685,7 @@ interface PanelProps<TGroup, TItem = TGroup> {
  *       onValueChange={setSearchTerm}
  *       itemToStringValue={(group) => group.label}
  *     >
- *       <CommandPalette.Input placeholder="Search..." />
+ *       <CommandPalette.Input aria-label="Search documentation" placeholder="Search..." />
  *       <CommandPalette.List>
  *         <CommandPalette.Results>
  *           {(group) => (
@@ -735,10 +786,21 @@ function PanelInput({
   onKeyDown: onKeyDownProp,
   leading,
   trailing,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   ...props
 }: CommandPaletteInputProps) {
   const { onInputKeyDown } = useContext(PanelContext);
   const { onClose } = useContext(DialogContext);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    warnIfMissingInputAccessibleName({
+      input: inputRef.current,
+      ariaLabel,
+      ariaLabelledBy,
+    });
+  }, [ariaLabel, ariaLabelledBy]);
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -760,7 +822,10 @@ function PanelInput({
   return (
     <InputHeader leading={leading} trailing={trailing}>
       <Autocomplete.Input
+        ref={inputRef}
         placeholder={placeholder}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
         className={cn(
           "flex-1 border-none bg-transparent text-base kumo-input-placeholder",
           "outline-none",
@@ -823,7 +888,7 @@ export const KUMO_COMMAND_PALETTE_DEFAULT_VARIANTS = {} as const;
  *   onSelect={(item, { newTab }) => navigate(item, newTab)}
  *   getSelectableItems={(groups) => groups.flatMap((g) => g.items)}
  * >
- *   <CommandPalette.Input placeholder="Search…" />
+ *   <CommandPalette.Input aria-label="Search documentation" placeholder="Search..." />
  *   <CommandPalette.List>
  *     <CommandPalette.Results>
  *       {(group) => (
diff --git a/packages/kumo/src/components/command-palette/types.ts b/packages/kumo/src/components/command-palette/types.ts
index f819671d2c..5e793d03c6 100644
--- a/packages/kumo/src/components/command-palette/types.ts
+++ b/packages/kumo/src/components/command-palette/types.ts
@@ -212,6 +212,11 @@ export interface CommandPaletteResultItemProps<T = unknown> {
 /**
  * Props for the CommandPalette.Input component - search input inside the palette.
  *
+ * This input does not render a visible label by default. Provide a localized
+ * `aria-label` when there is no visible label, or associate custom visible
+ * label text with `htmlFor`/`id` or `aria-labelledby`. Placeholder text is not
+ * a substitute for a label.
+ *
  * Extends standard HTML input attributes so you can pass props like
  * `autoComplete`, `autoCorrect`, `autoCapitalize`, `spellCheck`, `data-*`, etc.
  */
diff --git a/packages/kumo/src/components/sensitive-input/sensitive-input.test.tsx b/packages/kumo/src/components/sensitive-input/sensitive-input.test.tsx
index 120fbd44cd..12435f9816 100644
--- a/packages/kumo/src/components/sensitive-input/sensitive-input.test.tsx
+++ b/packages/kumo/src/components/sensitive-input/sensitive-input.test.tsx
@@ -133,52 +133,56 @@ describe("SensitiveInput", () => {
     vi.stubGlobal("navigator", navigatorWithClipboard);
     const labels: SensitiveInputLabels = {
       maskedValue: "••••",
-      clickToReveal: "Cliquer pour afficher",
-      revealValue: "Afficher la valeur",
-      hideValue: "Masquer la valeur",
-      copy: "Copier",
-      copyToClipboard: "Copier dans le presse-papiers",
-      copied: "Copié",
-      valueRevealed: "Valeur affichée",
-      valueHidden: "Valeur masquée",
-      copiedToClipboard: "Copié dans le presse-papiers",
-      revealInstruction: "Appuyez sur Entrée ou Espace pour afficher.",
+      clickToReveal: "Clique para revelar",
+      revealValue: "Revelar valor",
+      hideValue: "Ocultar valor",
+      copy: "Copiar",
+      copyToClipboard: "Copiar para a área de transferência",
+      copied: "Copiado",
+      valueRevealed: "Valor revelado",
+      valueHidden: "Valor oculto",
+      copiedToClipboard: "Copiado para a área de transferência",
+      revealInstruction: "Pressione Enter ou Espaço para revelar.",
     };
 
     render(
       <SensitiveInput
-        label="Clé API"
+        label="Chave de API"
         defaultValue="secret-value"
         labels={labels}
       />,
     );
 
     expect(screen.getByText("••••")).toBeTruthy();
-    expect(screen.getByText("Cliquer pour afficher")).toBeTruthy();
-    expect(screen.getByText("Valeur masquée")).toBeTruthy();
+    expect(screen.getByText("Clique para revelar")).toBeTruthy();
+    expect(screen.getByText("Valor oculto")).toBeTruthy();
 
     await user.click(
-      screen.getByRole("button", { name: "Afficher la valeur: Clé API" }),
+      screen.getByRole("button", { name: "Revelar valor: Chave de API" }),
     );
     expect(
-      screen.getByRole("textbox", { name: "Clé API" }).getAttribute("type"),
+      screen.getByRole("textbox", { name: "Chave de API" }).getAttribute("type"),
     ).toBe("text");
-    expect(screen.getByText("Valeur affichée")).toBeTruthy();
+    expect(screen.getByText("Valor revelado")).toBeTruthy();
 
     await user.click(
-      screen.getByRole("button", { name: "Masquer la valeur: Clé API" }),
+      screen.getByRole("button", { name: "Ocultar valor: Chave de API" }),
     );
-    expect(screen.getByText("Valeur masquée")).toBeTruthy();
+    expect(screen.getByText("Valor oculto")).toBeTruthy();
 
     await user.click(
-      screen.getByRole("button", { name: "Copier dans le presse-papiers" }),
+      screen.getByRole("button", {
+        name: "Copiar para a área de transferência",
+      }),
     );
 
     await waitFor(() => {
       expect(writeText).toHaveBeenCalledWith("secret-value");
     });
-    expect(screen.getByRole("button", { name: "Copié" })).toBeTruthy();
-    expect(screen.getByText("Copié dans le presse-papiers")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Copiado" })).toBeTruthy();
+    expect(
+      screen.getByText("Copiado para a área de transferência"),
+    ).toBeTruthy();
   });
 
   it("supports keyboard reveal and hide", async () => {