@undevy-org/tablewright 0.5.0 → 0.5.1

package/dist/es/components/data-table/DrawerShell.js

@@ -3,6 +3,7 @@ import { useState, useRef, useEffect } from "react";
 import { Minimize2, Maximize2, X } from "lucide-react";
 import { Button } from "../ui/button.js";
 import { cn } from "../../lib/utils.js";
+import { SCROLL_REGION_TAB_INDEX } from "../../lib/scroll-region-tab-index.js";
 import { useScrollActivity } from "../../hooks/use-scroll-activity.js";
 import { DrawerExpandContext } from "../../context/drawer-expand-context.js";
 function DrawerShell({
@@ -86,6 +87,7 @@ function DrawerShell({
     "div",
     {
       ref: bodyScrollRef,
+      tabIndex: SCROLL_REGION_TAB_INDEX,
       className: "scrollbar-auto-hide min-h-0 flex-1 overflow-y-auto px-6 py-6",
       children
     }

package/dist/es/components/data-table/TableLayout.js

@@ -1,12 +1,21 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
+import { SCROLL_REGION_TAB_INDEX } from "../../lib/scroll-region-tab-index.js";
 import { useScrollActivity } from "../../hooks/use-scroll-activity.js";
 function TableLayout({ children, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("relative flex flex-1 flex-col overflow-hidden", className), children });
 }
 function ScrollArea({ children, className }) {
   const scrollRef = useScrollActivity();
-  return /* @__PURE__ */ jsx("div", { ref: scrollRef, className: cn("scrollbar-auto-hide flex-1 overflow-auto", className), children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: scrollRef,
+      tabIndex: SCROLL_REGION_TAB_INDEX,
+      className: cn("scrollbar-auto-hide flex-1 overflow-auto", className),
+      children
+    }
+  );
 }
 TableLayout.ScrollArea = ScrollArea;
 export {

package/dist/es/components/layout/Sidebar.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { ChevronRight, ChevronLeft } from "lucide-react";
+import { collapsedNavLinkAriaLabel } from "../../lib/collapsed-nav-link-a11y.js";
 import { cn } from "../../lib/utils.js";
 import { useAppShell } from "./app-shell-context.js";
 function isItemActive(href, activeKey) {
@@ -75,10 +76,15 @@ const Sidebar = React.forwardRef(
                 ),
                 showExpanded && /* @__PURE__ */ jsx("span", { className: "truncate text-[13px]", children: item.label })
               ] });
+              const collapsedLinkLabel = collapsedNavLinkAriaLabel(
+                showExpanded,
+                item.label
+              );
               if (renderLink) {
                 return /* @__PURE__ */ jsx(React.Fragment, { children: renderLink(item.href, {
                   className: itemClassName,
-                  children
+                  children,
+                  ...collapsedLinkLabel ? { "aria-label": collapsedLinkLabel } : {}
                 }) }, item.key);
               }
               return /* @__PURE__ */ jsx(
@@ -86,6 +92,7 @@ const Sidebar = React.forwardRef(
                 {
                   href: item.href,
                   className: itemClassName,
+                  "aria-label": collapsedLinkLabel,
                   children
                 },
                 item.key

package/dist/es/components/layout/SidebarAccountMenu.js

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { ChevronDown, SunMoon, LogOut } from "lucide-react";
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "../ui/dropdown-menu.js";
 import { ThemeSwitch } from "../ui/theme-switch.js";
+import { decorativeAvatarAlt } from "../../lib/decorative-avatar-alt.js";
 import { cn } from "../../lib/utils.js";
 import { useAppShell } from "./app-shell-context.js";
 function getInitials(name) {
@@ -26,7 +27,7 @@ function SidebarAccountMenu({
     "img",
     {
       src: avatarUrl,
-      alt: name,
+      alt: decorativeAvatarAlt(!effectiveCollapsed, name),
       className: "h-7 w-7 shrink-0 rounded-full object-cover"
     }
   ) : /* @__PURE__ */ jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[var(--bg-tertiary)] text-[11px] font-semibold text-[var(--text-secondary)]", children: getInitials(name) });
@@ -62,7 +63,7 @@ function SidebarAccountMenu({
               "img",
               {
                 src: avatarUrl,
-                alt: name,
+                alt: decorativeAvatarAlt(true, name),
                 className: "h-8 w-8 shrink-0 rounded-full object-cover"
               }
             ) : /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--bg-tertiary)] text-[11px] font-semibold text-[var(--text-secondary)]", children: getInitials(name) }),

package/dist/es/components/layout/SidebarUser.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { decorativeAvatarAlt } from "../../lib/decorative-avatar-alt.js";
 import { cn } from "../../lib/utils.js";
 import { useAppShell } from "./app-shell-context.js";
 function getInitials(name) {
@@ -23,7 +24,7 @@ const SidebarUser = React.forwardRef(
             "img",
             {
               src: avatarUrl,
-              alt: name,
+              alt: decorativeAvatarAlt(!effectiveCollapsed, name),
               className: "h-8 w-8 shrink-0 rounded-full object-cover"
             }
           ) : /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--bg-tertiary)] text-[11px] font-semibold text-[var(--text-secondary)]", children: getInitials(name) }),

package/dist/es/lib/collapsed-nav-link-a11y.js

@@ -0,0 +1,6 @@
+function collapsedNavLinkAriaLabel(showExpanded, label) {
+  return showExpanded ? void 0 : label;
+}
+export {
+  collapsedNavLinkAriaLabel
+};

package/dist/es/lib/decorative-avatar-alt.js

@@ -0,0 +1,6 @@
+function decorativeAvatarAlt(adjacentNameVisible, name) {
+  return adjacentNameVisible ? "" : name;
+}
+export {
+  decorativeAvatarAlt
+};

package/dist/es/lib/scroll-region-tab-index.js

@@ -0,0 +1,4 @@
+const SCROLL_REGION_TAB_INDEX = 0;
+export {
+  SCROLL_REGION_TAB_INDEX
+};

package/dist/styles.css

@@ -580,6 +580,9 @@
 .h-9 {
     height: 2.25rem
 }
+.h-96 {
+    height: 24rem
+}
 .h-\[18px\] {
     height: 18px
 }

package/dist/tablewright.cjs

@@ -682,6 +682,7 @@ function CopyableText({
     )
   ] });
 }
+const SCROLL_REGION_TAB_INDEX = 0;
 function useScrollActivity(idleMs = 700) {
   const nodeRef = React.useRef(null);
   const [nodeVersion, setNodeVersion] = React.useState(0);
@@ -797,6 +798,7 @@ function DrawerShell({
     "div",
     {
       ref: bodyScrollRef,
+      tabIndex: SCROLL_REGION_TAB_INDEX,
       className: "scrollbar-auto-hide min-h-0 flex-1 overflow-y-auto px-6 py-6",
       children
     }
@@ -862,7 +864,15 @@ function TableLayout({ children, className }) {
 }
 function ScrollArea({ children, className }) {
   const scrollRef = useScrollActivity();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: cn("scrollbar-auto-hide flex-1 overflow-auto", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: scrollRef,
+      tabIndex: SCROLL_REGION_TAB_INDEX,
+      className: cn("scrollbar-auto-hide flex-1 overflow-auto", className),
+      children
+    }
+  );
 }
 TableLayout.ScrollArea = ScrollArea;
 function stickyStyle(meta, isHeader) {
@@ -1845,6 +1855,9 @@ const AppShellContext = React.createContext(null);
 function useAppShell() {
   return React.useContext(AppShellContext);
 }
+function collapsedNavLinkAriaLabel(showExpanded, label) {
+  return showExpanded ? void 0 : label;
+}
 function isItemActive(href, activeKey) {
   if (href === "" || href === "/") return activeKey === "" || activeKey === "/";
   return activeKey === href || activeKey.startsWith(href + "/");
@@ -1917,10 +1930,15 @@ const Sidebar = React__namespace.forwardRef(
                 ),
                 showExpanded && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[13px]", children: item.label })
               ] });
+              const collapsedLinkLabel = collapsedNavLinkAriaLabel(
+                showExpanded,
+                item.label
+              );
               if (renderLink) {
                 return /* @__PURE__ */ jsxRuntime.jsx(React__namespace.Fragment, { children: renderLink(item.href, {
                   className: itemClassName,
-                  children
+                  children,
+                  ...collapsedLinkLabel ? { "aria-label": collapsedLinkLabel } : {}
                 }) }, item.key);
               }
               return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1928,6 +1946,7 @@ const Sidebar = React__namespace.forwardRef(
                 {
                   href: item.href,
                   className: itemClassName,
+                  "aria-label": collapsedLinkLabel,
                   children
                 },
                 item.key
@@ -2088,6 +2107,9 @@ const AppShell = Object.assign(AppShellRoot, {
   Header: AppShellHeader,
   Content: AppShellContent
 });
+function decorativeAvatarAlt(adjacentNameVisible, name) {
+  return adjacentNameVisible ? "" : name;
+}
 function getInitials$1(name) {
   return name.split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase();
 }
@@ -2109,7 +2131,7 @@ const SidebarUser = React__namespace.forwardRef(
             "img",
             {
               src: avatarUrl,
-              alt: name,
+              alt: decorativeAvatarAlt(!effectiveCollapsed, name),
               className: "h-8 w-8 shrink-0 rounded-full object-cover"
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--bg-tertiary)] text-[11px] font-semibold text-[var(--text-secondary)]", children: getInitials$1(name) }),
@@ -2141,7 +2163,7 @@ function SidebarAccountMenu({
     "img",
     {
       src: avatarUrl,
-      alt: name,
+      alt: decorativeAvatarAlt(!effectiveCollapsed, name),
       className: "h-7 w-7 shrink-0 rounded-full object-cover"
     }
   ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[var(--bg-tertiary)] text-[11px] font-semibold text-[var(--text-secondary)]", children: getInitials(name) });
@@ -2177,7 +2199,7 @@ function SidebarAccountMenu({
               "img",
               {
                 src: avatarUrl,
-                alt: name,
+                alt: decorativeAvatarAlt(true, name),
                 className: "h-8 w-8 shrink-0 rounded-full object-cover"
               }
             ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--bg-tertiary)] text-[11px] font-semibold text-[var(--text-secondary)]", children: getInitials(name) }),

package/dist/tablewright.css

@@ -428,6 +428,9 @@
 .h-9 {
     height: 2.25rem
 }
+.h-96 {
+    height: 24rem
+}
 .h-\[18px\] {
     height: 18px
 }

package/dist/types/components/layout/Sidebar.d.ts

@@ -8,6 +8,7 @@ export interface SidebarProps {
     renderLink?: (href: string, props: {
         className: string;
         children: React.ReactNode;
+        "aria-label"?: string;
     }) => React.ReactNode;
     header?: React.ReactNode;
     footer?: React.ReactNode;

package/dist/types/lib/collapsed-nav-link-a11y.d.ts

@@ -0,0 +1,2 @@
+/** Accessible name for icon-only nav links when the sidebar rail is collapsed. */
+export declare function collapsedNavLinkAriaLabel(showExpanded: boolean, label: string): string | undefined;

package/dist/types/lib/decorative-avatar-alt.d.ts

@@ -0,0 +1,2 @@
+/** Avatar alt when the same name is shown as visible text beside the image. */
+export declare function decorativeAvatarAlt(adjacentNameVisible: boolean, name: string): string;

package/dist/types/lib/scroll-region-tab-index.d.ts

@@ -0,0 +1,2 @@
+/** Makes overflow scroll regions reachable from the keyboard (WCAG 2.1.1). */
+export declare const SCROLL_REGION_TAB_INDEX = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@undevy-org/tablewright",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "React data-table and application-shell components: filters, drawers, row controls, sortable and resizable columns, built on Radix UI and TanStack Table.",
   "license": "MIT",
   "repository": {