@dogsbay/ui 0.2.0-beta.152 → 0.2.0-beta.153

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dogsbay/ui",
-  "version": "0.2.0-beta.152",
+  "version": "0.2.0-beta.153",
   "description": "Accessible UI components for Astro, inspired by Base UI and shadcn",
   "type": "module",
   "exports": {
@@ -22,9 +22,9 @@
     "katex": "^0.16.47",
     "maplibre-gl": "^5.24.0",
     "shiki": "^4.3.1",
-    "@dogsbay/elements": "0.2.0-beta.152",
-    "@dogsbay/primitives": "0.2.0-beta.152",
-    "@dogsbay/icons": "0.2.0-beta.152"
+    "@dogsbay/icons": "0.2.0-beta.153",
+    "@dogsbay/primitives": "0.2.0-beta.153",
+    "@dogsbay/elements": "0.2.0-beta.153"
   },
   "files": [
     "src",

package/src/api-params/ApiParams.astro

@@ -57,7 +57,7 @@ function splitCodeBlocks(html: string): Segment[] {
 }
 ---
 
-<table class="api-params w-full text-sm border-collapse not-prose">
+<table class="api-params w-full text-sm border-collapse">
   <thead>
     <tr class="border-b border-border">
       <th class="py-3 px-4 text-left font-semibold text-muted-foreground uppercase tracking-wider text-xs w-[140px]">Parameter</th>

package/src/api-symbol/ApiSymbol.astro

@@ -18,7 +18,7 @@ const slug = name.toLowerCase().replace(/[^\w]/g, "-").replace(/-+/g, "-");
 const HeadingTag = `h${level}` as any;
 ---
 
-<div class="api-symbol not-prose" data-kind={kind}>
+<div class="api-symbol" data-kind={kind}>
   <div class="api-symbol-heading">
     <span class={`api-badge api-badge-${badgeKind}`}>{badgeKind}</span>
     <HeadingTag id={slug} class="!mt-0 !mb-0 !border-0">

package/src/sidebar/Sidebar.astro

@@ -22,6 +22,11 @@ interface Props {
   variant?: "sidebar" | "floating" | "inset";
   collapsible?: "offcanvas" | "icon" | "none";
   defaultOpen?: boolean;
+  /**
+   * The sidebar is a navigation landmark (`<nav>`), named by this label, so its content (the
+   * site name or logo too) is in a landmark: axe's `region` rule. Default "Sidebar".
+   */
+  label?: string;
   class?: string;
   [key: string]: unknown;
 }
@@ -31,6 +36,7 @@ const {
   variant = "sidebar",
   collapsible = "offcanvas",
   defaultOpen = true,
+  label = "Sidebar",
   class: className,
   ...rest
 } = Astro.props;
@@ -60,7 +66,8 @@ const mobileSideClass = side === "left" ? "left-0" : "right-0";
 ---
 
 {collapsible === "none" ? (
-  <div
+  <nav
+    aria-label={label}
     data-component="sidebar"
     data-collapsible="none"
     data-side={side}
@@ -70,7 +77,7 @@ const mobileSideClass = side === "left" ? "left-0" : "right-0";
     {...rest}
   >
     <slot />
-  </div>
+  </nav>
 ) : (
   <div
     data-component="sidebar"
@@ -89,7 +96,8 @@ const mobileSideClass = side === "left" ? "left-0" : "right-0";
       data-side={side}
     >
       <div class={`${sidebarGap()} ${gapIconClass}`} />
-      <div
+      <nav
+        aria-label={label}
         class={`${sidebarContainer()} ${containerVariantClass} ${sideClass} ${className || ""}`}
         data-side={side}
         {...rest}
@@ -97,17 +105,19 @@ const mobileSideClass = side === "left" ? "left-0" : "right-0";
         <div class={`${sidebarInner()} ${innerVariantClass}`} data-sidebar="sidebar-inner">
           <slot />
         </div>
-      </div>
+      </nav>
     </div>
 
     {/* Mobile backdrop + sidebar shell (content moved here by JS) */}
     <div class="fixed inset-0 z-50 bg-black/80" data-sidebar-mobile-backdrop hidden></div>
-    <div
+    {/* A landmark too: the content moves here while it is open */}
+    <nav
+      aria-label={label}
       class={`fixed inset-y-0 z-50 flex h-svh w-[18rem] flex-col bg-sidebar p-0 text-sidebar-foreground ${mobileSideClass}`}
       data-sidebar-mobile
       data-state="closed"
       hidden
     >
-    </div>
+    </nav>
   </div>
 )}

package/src/table/Table.astro

@@ -26,7 +26,8 @@ const { class: className, caption, ...rest } = Astro.props;
 const captionClass = "mb-2 text-left text-sm font-medium text-foreground";
 ---
 
-<div class={tableContainer()}>
+{/* Focusable, so a table wider than the screen scrolls from the keyboard (axe `scrollable-region-focusable`), as render-html's */}
+<div class={tableContainer()} tabindex="0">
   <table class={table({ class: className })} {...rest}>
     {Astro.slots.has("caption") ? (
       <caption class={captionClass}><slot name="caption" /></caption>