@dloizides/auth-web 1.13.0 → 1.14.0

package/CHANGELOG.md

@@ -1,6 +1,76 @@
 # Changelog
 
-## 1.13.0 (2026-07-19)
+## 1.14.0 (2026-07-19)
+
+Three defects found by measuring the DEPLOYED portals rather than reading the
+source. All three had passing tests over them.
+
+### Fixed
+
+- **The auth card no longer vertically centres, so expanding anything stops
+  moving the inputs.** Measured on `app.zygos.dloizides.com/login` at 1.13.0:
+  expanding the demo disclosure grew the card 445.6 → 589.6px and pulled the
+  username input from `y=275.2` to `y=203.2` and the password from `y=368.8` to
+  `y=296.8` — **72px UP each**, mid-interaction. `<DemoCredentialsHint>` was
+  deliberately mounted BELOW the form to avoid exactly this; centring defeated
+  the placement, because a centred card re-centres as it grows and drags
+  everything above the growth upward.
+
+  `useAuthScreenStyles.screen` and `useAuthStyles.screen` are now top-anchored
+  (`justifyContent: 'flex-start'` + a 64dp `paddingTop`) instead of centred.
+  ⚠️ **This is a visible change on every portal**: the login card now sits below
+  a fixed gap rather than floating in the middle of tall viewports.
+
+  Chosen over the alternatives because the defect is not specific to the
+  disclosure — ANY growth shifted the fields (a validation error under an input,
+  a passkey button arriving after the config fetch, an OTP tab swap), and only
+  top-anchoring fixes the whole class. Reserving the disclosure's height would
+  have left ~144px of permanent dead space on every login; absolutely
+  positioning the expanded panel would have removed it from the scrollable area,
+  making the credentials unreachable on a short viewport. Top-anchoring is also
+  strictly safer at small viewports than what it replaces: overflow now runs
+  downward only, where centring pushed the top of the card past the top edge
+  where no scroll could reach it.
+
+- **Selection and expansion states are now announced on the web.** Three
+  components declared `accessibilityState` and announced nothing:
+  `<DemoCredentialsHint>` (`expanded`), `<DevicePinLengthPicker>` (`selected`)
+  and `<PreferredMethodSettingsCard>` (`selected`). Each now passes the ARIA
+  attribute **explicitly** (`aria-expanded` / `aria-checked`) alongside the RN
+  prop, which is kept for native.
+
+  Root cause is systemic, not a typo. Measured against react-native-web 0.21.2:
+  a `<TouchableOpacity>` given `accessibilityLabel`, `accessibilityRole`,
+  `accessibilityHint` and `accessibilityState={{ expanded: true, selected: true }}`
+  renders `<button role="button" aria-label="…">` — **no `aria-expanded`, no
+  `aria-selected`, and no trace of the hint at all**. `accessibilityState` is not
+  read by react-native-web; `accessibilityHint` produces zero DOM output.
+
+  For `<DevicePinLengthPicker>` the practical effect was WCAG 1.4.1: the chosen
+  PIN length was distinguishable only by the pill's fill colour. Its options also
+  move from `accessibilityRole="button"` to `"radio"` inside a `radiogroup`,
+  since `aria-checked` is only meaningful on a checkable role.
+
+- **Field labels now speak the shared contract's `field` voice — 13/600, not
+  14/600.** The forms contract (mirrored in `@dloizides/ui-forms`'
+  `labelVariants.ts`) defines exactly two label voices: `field` (13/600, sentence
+  case) and `control` (11/700, uppercase). `defaultAuthTheme.typography.label`
+  was 14, which is neither — drift, inherited uniformly by every portal, since
+  they all reuse `defaultAuthTheme.typography` verbatim. It read against the 13px
+  `Field` labels those same apps use on every non-auth form.
+
+### Tests
+
+- **New DOM-level guards** (`*.dom.test.tsx`), rendered through the real
+  `react-native-web` in a `jsdom` environment, asserting the rendered
+  **attribute** rather than the React prop. This is the point: the pre-existing
+  suite mocked `react-native` down to host strings and asserted
+  `props.accessibilityState` — so it passed, unchanged, against a button that
+  announced nothing in every browser. A prop assertion cannot catch this class of
+  bug, and did not.
+- `authVisualContract.test.ts` guards the two visual contracts by naming the
+  defect they forbid (`justifyContent` must NOT be `'center'`; labels must be
+  13/600 written as a literal, not read back from the token under test).
 
 `<DemoCredentialsHint>` gets a **discreet** presentation, and it is now the
 default. The demo stops competing with the sign-in form on login pages that real

package/dist/index.d.mts

@@ -62,7 +62,21 @@ interface AuthThemeTypography {
     title: number;
     /** Form subtitle. */
     subtitle: number;
-    /** Field labels. */
+    /**
+     * Field labels.
+     *
+     * The shared forms contract ("The TWO legitimate label voices", mirrored in
+     * `@dloizides/ui-forms`' `labelVariants.ts`) defines exactly two: `field` —
+     * 13 / 600 / sentence case, a label that is READ — and `control` — 11 / 700 /
+     * uppercase, a label that is SCANNED. Auth field labels are prose addressed to
+     * the person signing in, so they are the `field` voice: **13**.
+     *
+     * Through 1.13.0 this default was 14, which is neither voice — drift. Every
+     * portal that renders `<LoginForm>` inherits this token (all of them reuse
+     * `defaultAuthTheme.typography` verbatim), so the drift was uniform across
+     * zygos, agora, erevna, katalogos and ichnos, and it read against the 13px
+     * `Field` labels those same apps use on every non-auth form.
+     */
     label: number;
     /** Input text and button text. */
     body: number;
@@ -1359,9 +1373,15 @@ declare const enum DemoCredentialsHintVariant {
  *    the same AA-held token as every other piece of helper copy. Discretion is
  *    carried by size, placement and the absence of chrome.
  *  - **It does not hide from assistive tech.** The trigger is a real focusable
- *    button carrying `accessibilityState.expanded`, so a screen reader
- *    announces both that it exists and whether it is open. Visually quiet must
- *    not mean absent — a demo nobody can find is a demo nobody uses.
+ *    button carrying an explicit `aria-expanded` (plus `accessibilityState` for
+ *    native), so a screen reader announces both that it exists and whether it is
+ *    open. Visually quiet must not mean absent — a demo nobody can find is a demo
+ *    nobody uses.
+ *
+ *    ⚠️ Through 1.13.0 this carried ONLY `accessibilityState={{ expanded }}` and
+ *    therefore announced nothing on web: react-native-web 0.21.2 does not read
+ *    `accessibilityState`, so the rendered button had no `aria-expanded` at all.
+ *    The old unit test asserted the React *prop*, so it passed against the bug.
  *
  * ## Layout stability
  *

package/dist/index.d.ts

@@ -62,7 +62,21 @@ interface AuthThemeTypography {
     title: number;
     /** Form subtitle. */
     subtitle: number;
-    /** Field labels. */
+    /**
+     * Field labels.
+     *
+     * The shared forms contract ("The TWO legitimate label voices", mirrored in
+     * `@dloizides/ui-forms`' `labelVariants.ts`) defines exactly two: `field` —
+     * 13 / 600 / sentence case, a label that is READ — and `control` — 11 / 700 /
+     * uppercase, a label that is SCANNED. Auth field labels are prose addressed to
+     * the person signing in, so they are the `field` voice: **13**.
+     *
+     * Through 1.13.0 this default was 14, which is neither voice — drift. Every
+     * portal that renders `<LoginForm>` inherits this token (all of them reuse
+     * `defaultAuthTheme.typography` verbatim), so the drift was uniform across
+     * zygos, agora, erevna, katalogos and ichnos, and it read against the 13px
+     * `Field` labels those same apps use on every non-auth form.
+     */
     label: number;
     /** Input text and button text. */
     body: number;
@@ -1359,9 +1373,15 @@ declare const enum DemoCredentialsHintVariant {
  *    the same AA-held token as every other piece of helper copy. Discretion is
  *    carried by size, placement and the absence of chrome.
  *  - **It does not hide from assistive tech.** The trigger is a real focusable
- *    button carrying `accessibilityState.expanded`, so a screen reader
- *    announces both that it exists and whether it is open. Visually quiet must
- *    not mean absent — a demo nobody can find is a demo nobody uses.
+ *    button carrying an explicit `aria-expanded` (plus `accessibilityState` for
+ *    native), so a screen reader announces both that it exists and whether it is
+ *    open. Visually quiet must not mean absent — a demo nobody can find is a demo
+ *    nobody uses.
+ *
+ *    ⚠️ Through 1.13.0 this carried ONLY `accessibilityState={{ expanded }}` and
+ *    therefore announced nothing on web: react-native-web 0.21.2 does not read
+ *    `accessibilityState`, so the rendered button had no `aria-expanded` at all.
+ *    The old unit test asserted the React *prop*, so it passed against the bug.
  *
  * ## Layout stability
  *

package/dist/index.js

@@ -9,15 +9,18 @@ var authClient = require('@dloizides/auth-client');
 // src/components/AuthScreen.tsx
 var FULL_WIDTH = "100%";
 var CARD_BORDER_WIDTH = 1;
+var CARD_TOP_OFFSET = 64;
 function useAuthScreenStyles(theme) {
   return react.useMemo(() => {
     const { colors, radii, spacing, typography } = theme;
     return reactNative.StyleSheet.create({
       screen: {
         flex: 1,
-        justifyContent: "center",
+        // Deliberately NOT `justifyContent: 'center'` — see CARD_TOP_OFFSET.
+        justifyContent: "flex-start",
         alignItems: "center",
         padding: spacing.md,
+        paddingTop: CARD_TOP_OFFSET,
         backgroundColor: colors.background
       },
       card: {
@@ -75,7 +78,8 @@ var defaultAuthTheme = {
   typography: {
     title: 28,
     subtitle: 16,
-    label: 14,
+    // 13, not 14 — the shared contract's `field` voice. See AuthThemeTypography.label.
+    label: 13,
     body: 16,
     caption: 12
   }
@@ -391,15 +395,21 @@ function withTestIdPrefix(baseId, prefix) {
 var FULL_WIDTH2 = "100%";
 var CARD_MAX_WIDTH = 420;
 var BUTTON_VERTICAL_PADDING = 14;
+var SCREEN_TOP_OFFSET = 64;
 function useAuthStyles(theme) {
   return react.useMemo(() => {
     const { colors, radii, spacing, typography } = theme;
     return reactNative.StyleSheet.create({
       screen: {
         flex: 1,
-        justifyContent: "center",
+        // Top-anchored, NOT centred — a centred card re-centres as it grows and
+        // drags the inputs up under the cursor. Same reasoning (and the same
+        // measurement) as `useAuthScreenStyles`' CARD_TOP_OFFSET; kept in step so
+        // a standalone `<LoginForm>` and an `<AuthScreen>`-composed one agree.
+        justifyContent: "flex-start",
         alignItems: "center",
         padding: spacing.md,
+        paddingTop: SCREEN_TOP_OFFSET,
         backgroundColor: colors.background
       },
       card: {
@@ -2013,14 +2023,15 @@ function DevicePinLengthPicker({
   const theme = useAuthTheme(themeProp);
   const dynamic = usePickerStyles(theme);
   const baseId = withTestIdPrefix(AuthTestIds.devicePinEnrollLength, testIdPrefix);
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.row, children: DEVICE_PIN_ALLOWED_DIGITS.map((option) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { accessibilityRole: "radiogroup", role: "radiogroup", style: styles2.row, children: DEVICE_PIN_ALLOWED_DIGITS.map((option) => {
     const active = option === selected;
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
+        "aria-checked": active,
         accessibilityHint: interpolate(optionHint, { count: option }),
         accessibilityLabel: String(option),
-        accessibilityRole: "button",
+        accessibilityRole: "radio",
         accessibilityState: { selected: active },
         disabled,
         style: [styles2.pill, dynamic.pill, active ? dynamic.active : null],
@@ -3164,6 +3175,7 @@ function PreferredMethodSettingsCard({
           return /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.TouchableOpacity,
             {
+              "aria-checked": isSelected,
               accessibilityHint: labels.description,
               accessibilityLabel: option.label,
               accessibilityRole: "radio",
@@ -3450,6 +3462,7 @@ function DemoCredentialsHint({
         /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.TouchableOpacity,
           {
+            "aria-expanded": expanded,
             accessibilityHint: labels.toggleHint,
             accessibilityLabel: labels.toggle,
             accessibilityRole: "button",