@kennycorrea/ui 0.11.0 → 0.11.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.11.1 — 2026-10-19
+
+- **`ScrollStrip`** (axe `scrollable-region-focusable`) — now `role="region"` with an accessible name (`aria-label`, default `UiStrings.scrollableRegion` "Scrollable content"). It is a tab stop (`tabIndex=0`) only while its content overflows (ResizeObserver), with a `:focus-visible` ring; ArrowLeft/Right scroll about one item, Home/End jump. Layout, snap and `-mx-4` usage unchanged.
+- **`SegmentedControl`** (axe `target-size`, WCAG 2.5.8) — items no longer shrink below their content, so five items on a 375px screen scroll the track horizontally instead of dropping under 24px; each item has a 24px minimum width, and on `(pointer: coarse)` a 44px hit area via `::before` (visual size unchanged). Labels now sit in a `.ui-segmented__label` span. Arrow-key radio behaviour unchanged.
+- **`ChipGroup`** — 44px hit area on coarse pointers via `::before`. `TabBar` already met both points (pressed state via `aria-current`, 44px items).
+- New string: `UiStrings.scrollableRegion`. New dev dependency: `axe-core` (tests).
+
 ## 0.11.0 — 2026-10-19
 
 - **Touch feedback** — Button, list rows, `StatTile` and `TabBar` items share a pressed state (`:active` scale `--press-scale` 0.97 + tint, `--press-duration` 120 ms); hover styles are in `@media (hover: hover)`. TabBar no longer dims on press.

package/README.md

@@ -85,7 +85,7 @@ Do the same in your own code: set appearance on `<Theme>`, not with a `dark` cla
 ## Strings
 
 Components never contain literal text. The handful they need — a spinner's label, a select's
-placeholder, close/expand/collapse names — come from `UiStringsProvider`, which takes a partial
+placeholder, close/expand/collapse names, the `ScrollStrip` region name (`scrollableRegion`) — come from `UiStringsProvider`, which takes a partial
 `UiStrings` object. Defaults are English. Most components also accept the label as a prop.
 
 ## Mobile presentation layer
@@ -279,3 +279,9 @@ under Node's ESM resolution as well as bundlers.
 
 Publishing happens from the GitHub workflow on a release; `prepublishOnly` rebuilds `dist`.
 Changes are listed in [CHANGELOG.md](CHANGELOG.md).
+
+## Accessibility notes (mobile)
+
+- **ScrollStrip** is a named `region` (`aria-label`, default `UiStrings.scrollableRegion`) and a tab stop only while it overflows; arrow keys scroll it by about one item.
+- **SegmentedControl** scrolls horizontally when its items do not fit rather than shrinking them below 24px; on coarse pointers hit areas are 44px. With more than 4 options on a phone, prefer `ChipGroup`.
+- **ChipGroup** chips are `aria-pressed` buttons with a 44px coarse-pointer hit area.

package/dist/atoms/ScrollStrip/ScrollStrip.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 export type ScrollStripBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface ScrollStripProps extends HTMLAttributes<HTMLDivElement> {
     /** From this breakpoint the strip stops scrolling and lays its children out as a grid. */
@@ -13,5 +13,9 @@ export interface ScrollStripProps extends HTMLAttributes<HTMLDivElement> {
  * the scroll padding equals the page gutter (`--page-gutter`, 16px unless the app sets it) so a
  * snapped item lines up with the content above it, and the scrollbar is hidden. Items default to
  * 78% of the strip so the next one shows. Use it for KPI rows and card carousels.
+ *
+ * Accessibility: it is a `region` named by `aria-label` (default `UiStrings.scrollableRegion`).
+ * While its content overflows it is a tab stop, so keyboard users can scroll it: ArrowLeft/Right
+ * move by about one item, Home/End jump to the ends. When everything fits it is not tabbable.
  */
-export declare function ScrollStrip({ gridFrom, columns, itemWidth, className, style, ...props }: ScrollStripProps): import("react").JSX.Element;
+export declare function ScrollStrip({ gridFrom, columns, itemWidth, className, style, onKeyDown, ...props }: ScrollStripProps): import("react").JSX.Element;

package/dist/atoms/ScrollStrip/ScrollStrip.js

@@ -1,15 +1,62 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState, } from 'react';
+import { useUiStrings } from '../../strings.js';
 import { cn } from '../../utils/cn.js';
 /**
  * A horizontal scroll-snap row that becomes a grid at a breakpoint. Items snap to the start edge,
  * the scroll padding equals the page gutter (`--page-gutter`, 16px unless the app sets it) so a
  * snapped item lines up with the content above it, and the scrollbar is hidden. Items default to
  * 78% of the strip so the next one shows. Use it for KPI rows and card carousels.
+ *
+ * Accessibility: it is a `region` named by `aria-label` (default `UiStrings.scrollableRegion`).
+ * While its content overflows it is a tab stop, so keyboard users can scroll it: ArrowLeft/Right
+ * move by about one item, Home/End jump to the ends. When everything fits it is not tabbable.
  */
-export function ScrollStrip({ gridFrom = 'md', columns = 3, itemWidth, className, style, ...props }) {
-    return (_jsx("div", { className: cn('ui-strip', className), "data-grid-from": gridFrom, style: {
+export function ScrollStrip({ gridFrom = 'md', columns = 3, itemWidth, className, style, onKeyDown, ...props }) {
+    const label = useUiStrings().scrollableRegion;
+    const ref = useRef(null);
+    const [overflowing, setOverflowing] = useState(false);
+    const measure = useCallback(() => {
+        const el = ref.current;
+        if (el)
+            setOverflowing(el.scrollWidth > el.clientWidth + 1);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        measure();
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        for (const child of Array.from(el.children))
+            ro.observe(child);
+        return () => ro.disconnect();
+    }, [measure]);
+    const handleKeyDown = (e) => {
+        onKeyDown?.(e);
+        const el = ref.current;
+        // Only when the strip itself has focus; arrows inside a focused child belong to the child.
+        if (e.defaultPrevented || !el || e.target !== el)
+            return;
+        const first = el.firstElementChild;
+        const step = (first?.offsetWidth ?? el.clientWidth * 0.78) + 12;
+        if (e.key === 'ArrowRight')
+            el.scrollBy({ left: step });
+        else if (e.key === 'ArrowLeft')
+            el.scrollBy({ left: -step });
+        else if (e.key === 'Home')
+            el.scrollTo({ left: 0 });
+        else if (e.key === 'End')
+            el.scrollTo({ left: el.scrollWidth });
+        else
+            return;
+        e.preventDefault();
+    };
+    return (_jsx("div", { ref: ref, role: "region", "aria-label": label, tabIndex: overflowing ? 0 : undefined, className: cn('ui-strip', className), "data-grid-from": gridFrom, style: {
             '--strip-cols': columns,
             ...(itemWidth ? { '--strip-item': itemWidth } : null),
             ...style,
-        }, ...props }));
+        }, onKeyDown: handleKeyDown, ...props }));
 }

package/dist/atoms/SegmentedControl/SegmentedControl.d.ts

@@ -19,5 +19,8 @@ export interface SegmentedControlProps {
 /**
  * A pill track with a sliding thumb: one choice from 2–5. Radio semantics with a roving tabindex —
  * arrow keys move and select (wrapping, skipping disabled), Home/End jump to the ends.
+ * Items never shrink below their content, so a narrow container scrolls the track horizontally
+ * instead of squeezing segments under 24px (WCAG 2.5.8); on coarse pointers each hit area is 44px.
+ * Above 4 options on a phone, ChipGroup is usually the better fit.
  */
 export declare function SegmentedControl({ options, value, onValueChange, size, fullWidth, className, ...aria }: SegmentedControlProps): import("react").JSX.Element;

package/dist/atoms/SegmentedControl/SegmentedControl.js

@@ -3,6 +3,9 @@ import { useRef } from 'react';
 /**
  * A pill track with a sliding thumb: one choice from 2–5. Radio semantics with a roving tabindex —
  * arrow keys move and select (wrapping, skipping disabled), Home/End jump to the ends.
+ * Items never shrink below their content, so a narrow container scrolls the track horizontally
+ * instead of squeezing segments under 24px (WCAG 2.5.8); on coarse pointers each hit area is 44px.
+ * Above 4 options on a phone, ChipGroup is usually the better fit.
  */
 export function SegmentedControl({ options, value, onValueChange, size = 'md', fullWidth = false, className, ...aria }) {
     const refs = useRef([]);
@@ -35,7 +38,7 @@ export function SegmentedControl({ options, value, onValueChange, size = 'md', f
             return;
         e.preventDefault();
     };
-    return (_jsxs("div", { role: "radiogroup", className: ['ui-segmented', className].filter(Boolean).join(' '), "data-size": size, "data-full": fullWidth ? 'true' : undefined, style: { '--seg-count': count, '--seg-index': Math.max(active, 0) }, ...aria, children: [active >= 0 && _jsx("span", { className: "ui-segmented__thumb", "aria-hidden": "true" }), options.map((o, i) => (_jsx("button", { ref: (el) => {
-                    refs.current[i] = el;
-                }, type: "button", role: "radio", "aria-checked": i === active, disabled: o.disabled, tabIndex: i === tabbable ? 0 : -1, className: "ui-segmented__item", onClick: () => onValueChange?.(o.value), onKeyDown: (e) => onKeyDown(e, i), children: o.label }, o.value)))] }));
+    return (_jsx("div", { role: "radiogroup", className: ['ui-segmented', className].filter(Boolean).join(' '), "data-size": size, "data-full": fullWidth ? 'true' : undefined, ...aria, children: _jsxs("div", { className: "ui-segmented__track", style: { '--seg-count': count, '--seg-index': Math.max(active, 0) }, children: [active >= 0 && _jsx("span", { className: "ui-segmented__thumb", "aria-hidden": "true" }), options.map((o, i) => (_jsx("button", { ref: (el) => {
+                        refs.current[i] = el;
+                    }, type: "button", role: "radio", "aria-checked": i === active, disabled: o.disabled, tabIndex: i === tabbable ? 0 : -1, className: "ui-segmented__item", onClick: () => onValueChange?.(o.value), onKeyDown: (e) => onKeyDown(e, i), children: _jsx("span", { className: "ui-segmented__label", children: o.label }) }, o.value)))] }) }));
 }

package/dist/strings.d.ts

@@ -44,6 +44,8 @@ export interface UiStrings {
     back: string;
     /** PullToRefresh: announced while a refresh is in progress. */
     refreshing: string;
+    /** ScrollStrip: the accessible name of the scrollable region, when none is passed. */
+    scrollableRegion: string;
 }
 /**
  * Feeds the atoms their strings, once, near the root.

package/dist/strings.js

@@ -19,6 +19,7 @@ const DEFAULTS = {
     confirm: 'Confirm',
     back: 'Back',
     refreshing: 'Refreshing',
+    scrollableRegion: 'Scrollable content',
 };
 const StringsContext = createContext(DEFAULTS);
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kennycorrea/ui",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "A React + TypeScript component library built on Radix Themes: atoms, a Tailwind token bridge and theming.",
   "private": false,
   "type": "module",
@@ -55,6 +55,7 @@
     "@types/node": "^24.19.2",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.7",
+    "axe-core": "^4.10.2",
     "jsdom": "^30.1.2",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",

package/tokens.css

@@ -826,21 +826,28 @@
 @media (prefers-reduced-motion: reduce) { .ui-navbar, .ui-navbar__title, .ui-backbutton { transition: none; } }
 
 /* SegmentedControl */
-.ui-segmented { --seg-pad: 2px; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
+.ui-segmented { --seg-pad: 2px; position: relative; display: inline-flex; max-width: 100%; vertical-align: top; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
   padding: var(--seg-pad); box-sizing: border-box; border-radius: 999px; background: var(--gray-a4); }
-.ui-segmented[data-full="true"] { display: grid; width: 100%; }
-.ui-segmented__thumb { position: absolute; top: var(--seg-pad); bottom: var(--seg-pad); left: var(--seg-pad);
-  width: calc((100% - 2 * var(--seg-pad)) / var(--seg-count)); border-radius: 999px; background: var(--color-panel-solid, #fff);
+.ui-segmented::-webkit-scrollbar { display: none; }
+.ui-segmented[data-full="true"] { display: flex; width: 100%; }
+.ui-segmented__track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); flex: 1 0 auto; min-width: 0; }
+.ui-segmented__thumb { position: absolute; top: 0; bottom: 0; left: 0;
+  width: calc(100% / var(--seg-count)); border-radius: 999px; background: var(--color-panel-solid, #fff);
   box-shadow: 0 1px 3px var(--black-a4), 0 0 0 0.5px var(--black-a3);
   transform: translateX(calc(var(--seg-index) * 100%)); transition: transform 220ms cubic-bezier(0.3, 0.7, 0.2, 1); }
-.ui-segmented__item { position: relative; z-index: 1; min-width: 0; border: 0; background: none; font: inherit; font-weight: 500;
-  color: var(--gray-11); border-radius: 999px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+.ui-segmented__item { position: relative; z-index: 1; min-width: 24px; border: 0; background: none; font: inherit; font-weight: 500;
+  color: var(--gray-11); border-radius: 999px; cursor: pointer; white-space: nowrap;
   -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color 150ms; }
+.ui-segmented__label { display: block; overflow: hidden; text-overflow: ellipsis; }
 .ui-segmented[data-size="md"] .ui-segmented__item { min-height: 32px; padding: 0 16px; font-size: 14px; }
 .ui-segmented[data-size="sm"] .ui-segmented__item { min-height: 24px; padding: 0 12px; font-size: 12px; }
 .ui-segmented__item[aria-checked="true"] { color: var(--gray-12); }
 .ui-segmented__item:disabled { opacity: 0.4; cursor: not-allowed; }
 .ui-segmented__item:focus-visible { outline: 2px solid var(--focus-8); outline-offset: 1px; }
+/* Coarse pointers: grow the hit area to 44px without growing the visual. */
+@media (pointer: coarse) {
+  .ui-segmented__item::before, .ui-chips__chip::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: max(100%, var(--tap-min, 44px)); transform: translateY(-50%); }
+}
 @media (prefers-reduced-motion: reduce) { .ui-segmented__thumb, .ui-segmented__item { transition: none; } }
 
 /* ChipGroup */
@@ -851,7 +858,7 @@
 .ui-chips[data-fade-start="true"] .ui-chips__scroller { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--chips-fade)); mask-image: linear-gradient(to right, transparent, #000 var(--chips-fade)); }
 .ui-chips[data-fade-end="true"] .ui-chips__scroller { -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--chips-fade)); mask-image: linear-gradient(to left, transparent, #000 var(--chips-fade)); }
 .ui-chips[data-fade-start="true"][data-fade-end="true"] .ui-chips__scroller { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--chips-fade), #000 calc(100% - var(--chips-fade)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--chips-fade), #000 calc(100% - var(--chips-fade)), transparent); }
-.ui-chips__chip { flex: none; scroll-snap-align: start; scroll-margin-inline: var(--chips-fade); min-height: 32px; padding: 0 14px;
+.ui-chips__chip { position: relative; flex: none; scroll-snap-align: start; scroll-margin-inline: var(--chips-fade); min-height: 32px; padding: 0 14px;
   border: 0; border-radius: 999px; background: var(--gray-a4); color: var(--gray-12); font: inherit; font-size: 14px; font-weight: 500;
   white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color 120ms, color 120ms; }
 .ui-chips__chip[data-selected="true"] { background: var(--accent-9); color: var(--accent-contrast); }
@@ -881,6 +888,7 @@
 /* ---- ScrollStrip ---- */
 .ui-strip { --strip-item: 78%; display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-inline: var(--page-gutter, 16px); scroll-padding-inline: var(--page-gutter, 16px); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
 .ui-strip::-webkit-scrollbar { display: none; }
+.ui-strip:focus-visible { outline: 2px solid var(--focus-8); outline-offset: -2px; border-radius: 8px; }
 .ui-strip > * { flex: 0 0 var(--strip-item); min-width: 0; scroll-snap-align: start; }
 @media (prefers-reduced-motion: no-preference) { .ui-strip { scroll-behavior: smooth; } }
 @media (min-width: 520px) { .ui-strip[data-grid-from="xs"] { display: grid; grid-template-columns: repeat(var(--strip-cols), minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; padding-inline: 0; } .ui-strip[data-grid-from="xs"] > * { scroll-snap-align: none; } }