@dloizides/ui-nav 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 1.3.0
+
+Give the `NavBar` the v1 `.gn-links` look + a full accessibility pass (and extend the
+same a11y bar to `Sidebar`/`Topbar`).
+
+**Look & hover (NavBar).** Each link is a rounded-pill target with the v1 hover
+affordance — muted at rest, and on HOVER the text brightens to full contrast while a
+subtle rounded-pill background appears; the ACTIVE link is a solid accent pill. All
+theme-driven (rest = `textSecondary`, hover text = `text`, hover bg = `surfaceElevated`,
+active/ring = `palette.primary`). Hover/focus are web-only (`onHoverIn/Out`, `onFocus/Blur`
+via `Pressable`); native stays at the rest style. The hover cross-fade is cheap CSS and is
+disabled under `prefers-reduced-motion: reduce` (new `useReducedMotion`). Backwards
+compatible — the hover pill is the default (aml-v2 is the only `NavBar` consumer) and the
+brand/right slots, responsive hamburger collapse, and `containerStyle` width behaviour are
+unchanged.
+
+**Accessibility.** NavBar toggle now carries `aria-controls` pointing at the collapsible
+links region (id via `nativeID`), keeps `aria-expanded`, and gains a themed keyboard focus
+ring; links keep `aria-current="page"` + `role="link"` and gain a focus ring; link/toggle
+touch targets are now ≥44×44. `Sidebar` leaves gain `aria-current="page"` + a focus ring;
+`Topbar` action buttons gain a focus ring (new internal `FocusableTouchable`). Focus rings
+never remove the outline without a themed replacement.
+
 ## 1.2.0
 
 Add `NavBar` — a config-driven **horizontal top navigation bar**, the top-bar

package/README.md

@@ -74,8 +74,21 @@ import { NavBar, type NavItem } from '@dloizides/ui-nav';
 An app that renders a `Sidebar` today switches to a top bar by swapping the
 `Sidebar` element for `NavBar` (same `items` / `pathname` / `onNavigate`) — e.g.
 the AML v2 app drops `NavBar` into the `AppShell` `header` (or `nav`) slot so its
-links sit across the top like the rest of the console. Active links expose
-`aria-current="page"`; the container is a `role="navigation"` landmark.
+links sit across the top like the rest of the console.
+
+Each link is a rounded-pill target with the v1 `.gn-links` affordance: muted at
+rest, brightening its text + showing a subtle pill background on **hover**, and a
+solid accent pill when **active**. All colours are theme-driven (rest =
+`textSecondary`, hover text = `text`, hover bg = `surfaceElevated`, active/ring =
+`palette.primary`); hover/focus are web-only and the hover cross-fade honours
+`prefers-reduced-motion`.
+
+**Accessibility.** The container is a `role="navigation"` landmark named by
+`regionLabel`; active links expose `aria-current="page"` + `role="link"`; the
+responsive hamburger carries `role="button"`, `aria-expanded`, and `aria-controls`
+pointing at the collapsible links region; every link/toggle is keyboard-operable
+(Enter/Space) with a themed focus ring and a ≥44×44 touch target. `Sidebar` leaves
+carry `aria-current="page"` and `Topbar` buttons a focus ring under the same bar.
 
 ### Role gating
 

package/dist/index.d.mts

@@ -154,10 +154,17 @@ declare const Topbar: ({ left, language, notificationSlot, user, account, logout
  * collapses the links behind a hamburger toggle — mirroring the v1 AML console's
  * responsive `.global-nav`.
  *
+ * Look + feel: each link is a rounded-pill target with the v1 `.gn-links a`
+ * affordance — muted at rest, brightening text + a subtle pill background on
+ * HOVER, and a solid accent pill when ACTIVE. All colours are THEME-DRIVEN from
+ * the `@dloizides/ui-feedback` UiProvider (rest=`textSecondary`, hover text=`text`,
+ * hover bg=`surfaceElevated`, active=`palette.primary`, ring=`palette.primary`).
+ * Hover/focus are web-only (react-native-web); native stays at the rest style.
+ *
  * Contract discipline (same as the rest of `@dloizides/ui-nav`): NO FM, router,
  * icon set, or store imports. Labels are pre-localized strings, icons are render
- * slots, and every colour is read from the `@dloizides/ui-feedback` UiProvider
- * theme. This is purely additive — `Sidebar`/`Topbar` are unchanged.
+ * slots, and every colour is read from the theme. This is purely additive —
+ * `Sidebar`/`Topbar` are unchanged.
  */
 
 interface NavBarProps {

package/dist/index.d.ts

@@ -154,10 +154,17 @@ declare const Topbar: ({ left, language, notificationSlot, user, account, logout
  * collapses the links behind a hamburger toggle — mirroring the v1 AML console's
  * responsive `.global-nav`.
  *
+ * Look + feel: each link is a rounded-pill target with the v1 `.gn-links a`
+ * affordance — muted at rest, brightening text + a subtle pill background on
+ * HOVER, and a solid accent pill when ACTIVE. All colours are THEME-DRIVEN from
+ * the `@dloizides/ui-feedback` UiProvider (rest=`textSecondary`, hover text=`text`,
+ * hover bg=`surfaceElevated`, active=`palette.primary`, ring=`palette.primary`).
+ * Hover/focus are web-only (react-native-web); native stays at the rest style.
+ *
  * Contract discipline (same as the rest of `@dloizides/ui-nav`): NO FM, router,
  * icon set, or store imports. Labels are pre-localized strings, icons are render
- * slots, and every colour is read from the `@dloizides/ui-feedback` UiProvider
- * theme. This is purely additive — `Sidebar`/`Topbar` are unchanged.
+ * slots, and every colour is read from the theme. This is purely additive —
+ * `Sidebar`/`Topbar` are unchanged.
  */
 
 interface NavBarProps {

package/dist/index.js

@@ -81,7 +81,12 @@ var navBarStyles = reactNative.StyleSheet.create({
     marginLeft: "auto",
     paddingHorizontal: 10,
     paddingVertical: 6,
-    borderRadius: 4
+    borderRadius: 4,
+    // a11y: keep the hamburger a comfortable ≥44×44 touch target.
+    minWidth: 44,
+    minHeight: 44,
+    alignItems: "center",
+    justifyContent: "center"
   },
   toggleGlyph: { fontSize: 20, fontWeight: "700" },
   links: {
@@ -106,7 +111,10 @@ var navBarStyles = reactNative.StyleSheet.create({
     paddingHorizontal: 14,
     borderRadius: 8,
     flexDirection: "row",
-    alignItems: "center"
+    alignItems: "center",
+    // a11y: comfortable ≥44 tall touch target (rounded-pill hover/active affordance).
+    minHeight: 44,
+    justifyContent: "center"
   },
   linkStacked: { paddingVertical: 10 },
   linkIcon: { marginRight: 6 },
@@ -149,6 +157,31 @@ var expandableStyles = reactNative.StyleSheet.create({
 var BASE_INDENT = 12;
 var NAV_ICON_SIZE = 14;
 var CHEVRON_ICON_SIZE = 12;
+var IS_WEB = reactNative.Platform.OS === "web";
+var FOCUS_RING_WIDTH = 2;
+var FOCUS_RING_OFFSET = 2;
+var HOVER_TRANSITION_MS = 150;
+function focusRingStyle(focused, ringColor) {
+  if (!IS_WEB || !focused) return void 0;
+  const ring = {
+    outlineWidth: FOCUS_RING_WIDTH,
+    outlineStyle: "solid",
+    outlineColor: ringColor,
+    outlineOffset: FOCUS_RING_OFFSET
+  };
+  return ring;
+}
+function hoverTransitionStyle(reducedMotion) {
+  if (!IS_WEB) return void 0;
+  const transition = {
+    transitionProperty: "color, background-color",
+    transitionDuration: reducedMotion ? "0ms" : `${HOVER_TRANSITION_MS}ms`
+  };
+  return transition;
+}
+function ariaCurrentProps(isActive) {
+  return isActive ? { "aria-current": "page" } : {};
+}
 var NavExpandableItem = ({
   item,
   pathname,
@@ -160,6 +193,7 @@ var NavExpandableItem = ({
   depth = 0
 }) => {
   const [expanded, setExpanded] = react.useState(false);
+  const [focused, setFocused] = react.useState(false);
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
   const primaryColor = theme.palette.primary["500"];
@@ -180,9 +214,18 @@ var NavExpandableItem = ({
         accessibilityHint: navigateHint(item.label),
         accessibilityLabel: item.label,
         accessibilityRole: "button",
-        style: [expandableStyles.childItem, paddingStyle, isActive ? activeItemStyle : void 0],
+        accessibilityState: { selected: isActive },
+        style: [
+          expandableStyles.childItem,
+          paddingStyle,
+          isActive ? activeItemStyle : void 0,
+          focusRingStyle(focused, primaryColor)
+        ],
         testID: item.testID ?? item.key,
+        onBlur: () => setFocused(false),
+        onFocus: () => setFocused(true),
         onPress: () => onNavigate(item.route),
+        ...ariaCurrentProps(isActive),
         children: [
           typeof item.renderIcon === "function" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: expandableStyles.iconWrapper, children: item.renderIcon(colors.textSecondary, NAV_ICON_SIZE) }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -206,8 +249,10 @@ var NavExpandableItem = ({
         accessibilityLabel: item.label,
         accessibilityRole: "button",
         accessibilityState: { expanded },
-        style: [expandableStyles.header, headerPaddingStyle],
+        style: [expandableStyles.header, headerPaddingStyle, focusRingStyle(focused, primaryColor)],
         testID: item.testID ?? item.key,
+        onBlur: () => setFocused(false),
+        onFocus: () => setFocused(true),
         onPress: toggle,
         children: [
           typeof item.renderIcon === "function" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: expandableStyles.iconWrapper, children: item.renderIcon(colors.text, NAV_ICON_SIZE) }) : null,
@@ -307,6 +352,32 @@ var APP_SHELL_SUFFIX = {
   error: "-error",
   forbidden: "-forbidden"
 };
+var FocusableTouchable = ({
+  onPress,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole = "button",
+  ringColor,
+  style,
+  testID,
+  children
+}) => {
+  const [focused, setFocused] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      accessibilityHint,
+      accessibilityLabel,
+      accessibilityRole,
+      style: [style, focusRingStyle(focused, ringColor)],
+      testID,
+      onBlur: () => setFocused(false),
+      onFocus: () => setFocused(true),
+      onPress,
+      children
+    }
+  );
+};
 var TEXT_ON_PRIMARY = "#ffffff";
 function isAccountState(account) {
   return "displayName" in account;
@@ -344,11 +415,11 @@ var Topbar = ({
         /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navStyles.topbarLeft, children: left }),
         /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: navStyles.topbarRight, children: [
           language ? /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.TouchableOpacity,
+            FocusableTouchable,
             {
               accessibilityHint: language.hint,
               accessibilityLabel: language.label,
-              accessibilityRole: "button",
+              ringColor: primaryColor,
               style: navStyles.topbarRowItem,
               onPress: language.onPress,
               children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.topbarLabel, { color: colors.text }], children: language.label })
@@ -361,11 +432,11 @@ var Topbar = ({
           ] }) : null,
           richAccount ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: navStyles.userBlock, children: [
             richAccount.onAccount ? /* @__PURE__ */ jsxRuntime.jsx(
-              reactNative.TouchableOpacity,
+              FocusableTouchable,
               {
                 accessibilityHint: richAccount.displayName,
                 accessibilityLabel: richAccount.displayName,
-                accessibilityRole: "button",
+                ringColor: primaryColor,
                 testID: NAV_TEST_IDS.accountName,
                 onPress: richAccount.onAccount,
                 children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userName, { color: colors.text }], children: richAccount.displayName })
@@ -389,11 +460,11 @@ var Topbar = ({
             ) : null
           ] }) : null,
           legacyAccount ? /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.TouchableOpacity,
+            FocusableTouchable,
             {
               accessibilityHint: legacyAccount.hint,
               accessibilityLabel: legacyAccount.label,
-              accessibilityRole: "button",
+              ringColor: primaryColor,
               style: [navStyles.accountBtn, { backgroundColor: primaryColor }],
               testID: legacyAccount.testID,
               onPress: legacyAccount.onPress,
@@ -401,11 +472,11 @@ var Topbar = ({
             }
           ) : null,
           upgrade ? /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.TouchableOpacity,
+            FocusableTouchable,
             {
               accessibilityHint: upgrade.hint,
               accessibilityLabel: upgrade.label,
-              accessibilityRole: "button",
+              ringColor: primaryColor,
               style: [navStyles.accountBtn, { backgroundColor: primaryColor }],
               testID: upgrade.testID ?? NAV_TEST_IDS.accountUpgrade,
               onPress: upgrade.onPress,
@@ -413,12 +484,11 @@ var Topbar = ({
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.TouchableOpacity,
+            FocusableTouchable,
             {
-              accessible: true,
               accessibilityHint: logout.hint,
               accessibilityLabel: logout.label,
-              accessibilityRole: "button",
+              ringColor: primaryColor,
               style: [navStyles.accountBtn, { backgroundColor: primaryColor }],
               testID: logout.testID,
               onPress: richAccount ? richAccount.onLogout : logout.onPress,
@@ -431,10 +501,75 @@ var Topbar = ({
   );
 };
 var TEXT_ON_PRIMARY2 = "#ffffff";
+function ariaCurrentProps2(isActive) {
+  return isActive ? { "aria-current": "page" } : {};
+}
+var NavBarLink = ({
+  item,
+  isActive,
+  collapsed,
+  iconSize,
+  reducedMotion,
+  colors,
+  navigateHint,
+  onPress
+}) => {
+  const [hovered, setHovered] = react.useState(false);
+  const [focused, setFocused] = react.useState(false);
+  const isHovered = hovered && !isActive;
+  const textColor = isActive ? TEXT_ON_PRIMARY2 : isHovered ? colors.hoverText : colors.rest;
+  const pillStyle = isActive ? { backgroundColor: colors.activeBg } : isHovered ? { backgroundColor: colors.hoverBg } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Pressable,
+    {
+      accessibilityHint: navigateHint(item.label),
+      accessibilityLabel: item.label,
+      accessibilityRole: "link",
+      accessibilityState: { selected: isActive },
+      style: [
+        navBarStyles.link,
+        collapsed ? navBarStyles.linkStacked : void 0,
+        pillStyle,
+        hoverTransitionStyle(reducedMotion),
+        focusRingStyle(focused, colors.ring)
+      ],
+      testID: item.testID ?? item.key,
+      onBlur: () => setFocused(false),
+      onFocus: () => setFocused(true),
+      onHoverIn: () => setHovered(true),
+      onHoverOut: () => setHovered(false),
+      onPress: () => onPress(item.route),
+      ...ariaCurrentProps2(isActive),
+      children: [
+        typeof item.renderIcon === "function" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navBarStyles.linkIcon, children: item.renderIcon(textColor, iconSize) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navBarStyles.linkText, { color: textColor }], children: item.label })
+      ]
+    }
+  );
+};
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+function getReducedMotionQuery() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return void 0;
+  return window.matchMedia(REDUCED_MOTION_QUERY);
+}
+function useReducedMotion() {
+  const [reduced, setReduced] = react.useState(() => getReducedMotionQuery()?.matches ?? false);
+  react.useEffect(() => {
+    const mql = getReducedMotionQuery();
+    if (mql === void 0 || mql.addEventListener === void 0) return void 0;
+    const onChange = () => setReduced(mql.matches);
+    mql.addEventListener("change", onChange);
+    return () => {
+      mql.removeEventListener?.("change", onChange);
+    };
+  }, []);
+  return reduced;
+}
+var LINKS_REGION_ID = "navbar-links-region";
 var DEFAULT_COLLAPSE_BELOW = 760;
 var MENU_GLYPH = "\u2630";
-function activeAriaProps(isActive) {
-  return isActive ? { "aria-current": "page" } : {};
+function ariaControlsProps(id) {
+  return { "aria-controls": id };
 }
 var NavBar = ({
   items,
@@ -454,7 +589,9 @@ var NavBar = ({
   const colors = theme.colors;
   const primaryColor = theme.palette.primary["500"];
   const { width } = reactNative.useWindowDimensions();
+  const reducedMotion = useReducedMotion();
   const [open, setOpen] = react.useState(false);
+  const [toggleFocused, setToggleFocused] = react.useState(false);
   const collapsed = width < collapseBelow;
   const showLinks = !collapsed || open;
   const toggleMenu = react.useCallback(() => setOpen((v) => !v), []);
@@ -465,33 +602,16 @@ var NavBar = ({
     },
     [onNavigate]
   );
-  const activeLinkStyle = react.useMemo(
-    () => ({ backgroundColor: primaryColor, borderRadius: ACTIVE_BORDER_RADIUS }),
-    [primaryColor]
+  const linkColors = react.useMemo(
+    () => ({
+      rest: colors.textSecondary,
+      hoverText: colors.text,
+      hoverBg: colors.surfaceElevated,
+      activeBg: primaryColor,
+      ring: primaryColor
+    }),
+    [colors.textSecondary, colors.text, colors.surfaceElevated, primaryColor]
   );
-  const renderLink = (item) => {
-    const isActive = isRouteActive(pathname, item.route);
-    const textColor = isActive ? TEXT_ON_PRIMARY2 : colors.textSecondary;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      reactNative.TouchableOpacity,
-      {
-        accessible: true,
-        accessibilityHint: navigateHint(item.label),
-        accessibilityLabel: item.label,
-        accessibilityRole: "link",
-        accessibilityState: { selected: isActive },
-        style: [navBarStyles.link, collapsed ? navBarStyles.linkStacked : void 0, isActive ? activeLinkStyle : void 0],
-        testID: item.testID ?? item.key,
-        onPress: () => handlePress(item.route),
-        ...activeAriaProps(isActive),
-        children: [
-          typeof item.renderIcon === "function" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navBarStyles.linkIcon, children: item.renderIcon(textColor, NAV_ICON_SIZE) }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navBarStyles.linkText, { color: textColor }], children: item.label })
-        ]
-      },
-      item.key
-    );
-  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.View,
     {
@@ -506,21 +626,44 @@ var NavBar = ({
       children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: navBarStyles.inner, children: [
         brand !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navBarStyles.brand, children: brand }) : null,
         collapsed ? /* @__PURE__ */ jsxRuntime.jsx(
-          reactNative.TouchableOpacity,
+          reactNative.Pressable,
           {
-            accessible: true,
             accessibilityHint: menuHint,
             accessibilityLabel: menuLabel,
             accessibilityRole: "button",
             accessibilityState: { expanded: open },
             "aria-expanded": open,
-            style: navBarStyles.toggle,
+            style: [navBarStyles.toggle, focusRingStyle(toggleFocused, primaryColor)],
             testID: NAV_TEST_IDS.navBarToggle,
+            onBlur: () => setToggleFocused(false),
+            onFocus: () => setToggleFocused(true),
             onPress: toggleMenu,
+            ...ariaControlsProps(LINKS_REGION_ID),
             children: typeof renderMenuIcon === "function" ? renderMenuIcon(colors.text, open) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navBarStyles.toggleGlyph, { color: colors.text }], children: MENU_GLYPH })
           }
         ) : null,
-        showLinks ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: collapsed ? navBarStyles.linksStacked : navBarStyles.links, testID: NAV_TEST_IDS.navBarLinks, children: items.map(renderLink) }) : null,
+        showLinks ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.View,
+          {
+            nativeID: LINKS_REGION_ID,
+            style: collapsed ? navBarStyles.linksStacked : navBarStyles.links,
+            testID: NAV_TEST_IDS.navBarLinks,
+            children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+              NavBarLink,
+              {
+                collapsed,
+                colors: linkColors,
+                iconSize: NAV_ICON_SIZE,
+                isActive: isRouteActive(pathname, item.route),
+                item,
+                navigateHint,
+                reducedMotion,
+                onPress: handlePress
+              },
+              item.key
+            ))
+          }
+        ) : null,
         showLinks && right !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: collapsed ? navBarStyles.rightStacked : navBarStyles.right, children: right }) : null
       ] })
     }