@lotics/ui 44.5.0 → 44.6.0

package/docs/reviewing.md

@@ -236,6 +236,13 @@ A resting register is the cheapest thing to screenshot and the least likely to h
   (a feed, a thread) above a bounded one buries it, and the burial deepens with use.
 - **Press every control** and look at the state you land in. Commonest miss: a value rendering as
   a coloured chip in a register and as bare grey text in its own EDITOR.
+- **TAB through it, then diff what a keyboard reaches against what LOOKS pressable.** A pointer
+  finds anything with an `onPress`; a keyboard finds only what carries a role and a tab stop, and
+  the two lists come apart silently — the screen looks identical either way, and the author
+  testing with a mouse never learns. The reliable producer is styled text: underline, a hover
+  wash, a "verb" colour applied to a plain container, which reads as a control to the eye while
+  announcing as prose. Anything the eye calls a control and the tab order omits is unreachable,
+  not merely awkward. Count both lists; a difference is the finding.
 - **Diff a promoted field against where it came from.** Promoting means MOVING; a copy left behind
   gives one field two editors.
 - **Read every string in its SETTLED state**, not the streaming one.
@@ -473,6 +480,36 @@ receives `mouseenter`, because the pointer is already stationary over it — so
 dies at the moment of the swap and reads as a flash. Keep one node across the swap rather than
 restoring the state by hand.
 
+### Reachability — what the eye calls a control against what the tab order holds
+
+Two lists off one render. The first is what a keyboard can operate; the second is everything that
+LOOKS operable — styled text is the producer, so underline is the cheapest thing to sweep for.
+
+```js
+() => {
+  const root = document.querySelector('[role="dialog"]') ?? document.body;
+  const operable = [...root.querySelectorAll(
+    'a[href], button, [role="button"], [role="link"], [tabindex]:not([tabindex="-1"]), input, select, textarea',
+  )];
+  const looksPressable = [...root.querySelectorAll("*")].filter((e) => {
+    if (e.children.length || !(e.textContent || "").trim()) return false;
+    const cs = getComputedStyle(e);
+    return cs.textDecorationLine.includes("underline") || cs.cursor === "pointer";
+  });
+  const unreachable = looksPressable.filter((e) => !e.closest(
+    'a[href], button, [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])',
+  ));
+  return {
+    operable: operable.length,
+    unreachable: unreachable.map((e) => (e.textContent || "").trim().slice(0, 40)),
+  };
+}
+```
+
+`unreachable` must come back empty. A name in it is a control only a pointer can reach — and the
+count beside it is the other half of the reading: a whole pane offering two or three tab stops is
+usually not a minimal screen, it is a screen whose verbs are all prose.
+
 Driving the kit's own anatomies — a `PressDoor` row, a portalled overlay, a custom pointer drag —
 has three gotchas of its own: [testing.md](./testing.md).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "44.5.0",
+  "version": "44.6.0",
   "type": "module",
   "exports": {
     "./vite": {

package/src/locale.tsx

@@ -83,6 +83,12 @@ export interface LoticsLocale {
    *  a phase's rows. The kit owns the wording so one app does not say "Show" while
    *  the next says "Expand" for the same gesture. */
   checklist: { expand: string; collapse: string };
+  /** `TextDisclosure` supplies the VERB so one app cannot say "Show" where the
+   *  next says "View" for the same gesture — the same reason `checklist` above
+   *  owns its pair. It takes the revealed thing as a noun and builds the phrase,
+   *  because word order is not shared: English puts the verb first, and a
+   *  language that does not would otherwise be stuck with a prefix. */
+  textDisclosure: { show: (label: string) => string; hide: (label: string) => string };
   sectionHeading: { info: string };
   /** `ErrorState`'s retry button. The kit owns the wording so "try again" is
    *  phrased identically everywhere instead of hand-written per app. */
@@ -288,6 +294,7 @@ export const en: LoticsLocale = {
   ledger: { rowDetails: (label) => `${label} details` },
   stepper: { complete: "Complete step", progress: "Progress" },
   checklist: { expand: "Show", collapse: "Hide" },
+  textDisclosure: { show: (label) => `Show ${label}`, hide: (label) => `Hide ${label}` },
   sectionHeading: { info: "About this data" },
   errorState: { retry: "Try again" },
   chip: { remove: "Remove" },
@@ -466,6 +473,7 @@ export const vi: LoticsLocale = {
   ledger: { rowDetails: (label) => `Chi tiết ${label}` },
   stepper: { complete: "Hoàn thành bước", progress: "Tiến trình" },
   checklist: { expand: "Mở", collapse: "Thu gọn" },
+  textDisclosure: { show: (label) => `Xem ${label}`, hide: (label) => `Ẩn ${label}` },
   sectionHeading: { info: "Giải thích dữ liệu" },
   errorState: { retry: "Thử lại" },
   chip: { remove: "Xóa" },

package/src/text_disclosure.tsx

@@ -1,5 +1,6 @@
 import { Pressable } from "react-native";
 import { TextLink } from "./text_link";
+import { useLoticsLocale } from "./locale";
 import type { TextSize } from "./text";
 
 export interface TextDisclosureProps {
@@ -52,6 +53,7 @@ export interface TextDisclosureProps {
  */
 export function TextDisclosure(props: TextDisclosureProps) {
   const { expanded, onToggle, label, size = "sm", accessibilityLabel, testID } = props;
+  const locale = useLoticsLocale();
   return (
     <Pressable
       onPress={() => onToggle(!expanded)}
@@ -63,7 +65,7 @@ export function TextDisclosure(props: TextDisclosureProps) {
       testID={testID}
     >
       <TextLink size={size} color="muted">
-        {expanded ? `Hide ${label}` : `Show ${label}`}
+        {expanded ? locale.textDisclosure.hide(label) : locale.textDisclosure.show(label)}
       </TextLink>
     </Pressable>
   );