@apliteni/apliteni-ui 0.71.0 → 0.72.0

package/guidelines/accessibility-floor.md

@@ -14,6 +14,34 @@
 
 **Except:** WCAG 2.5.8 permits spacing, equivalent controls, inline text, user-agent sizes and essential presentation. Overlays must not reach neighbours.
 
+## Tap target on a phone
+
+<!-- rule: tap-zone -->
+
+**Rule:** Below the phone step, reach 44x44 with a transparent layer outside the control, never by growing the control.
+
+**Why:** A finger covers more than a cursor, and a control that grows on a phone moves the page a reader already knows.
+
+**Do:** Centre a transparent layer on the control and let it stop at half the gap to the nearest neighbour.
+
+**Don't:** Grow the drawn control to 44 and push out every row that holds one.
+
+**Except:** Only a coarse pointer gets the layer, or a cursor lights a control it is not over. Rows that share an edge — a menu, a dense table, a settings list — have nothing to grow into and stay as they are drawn. Fields generate no layer, so a field reaches the floor by its own height or not at all.
+
+## Space between small targets
+
+<!-- rule: tap-spacing -->
+
+**Rule:** Below the phone step, open a row of small controls to 44 minus their drawn size, so both tap zones fit between the drawn edges.
+
+**Why:** A zone reaches half the gap before it crosses its neighbour's edge, so the gap is what decides whether either control reaches the floor.
+
+**Do:** Open a row of 24px marks to 20px on a phone, where both zones fit and neither mark changes size.
+
+**Don't:** Keep the desktop 8px and let the control written later in the markup win the overlap.
+
+**Except:** A row that is already full opens downward only — widening it across makes the controls narrower, which is the one thing the floor must not do. Rows that share an edge — a menu, a dense table, a settings list — have nothing to open and keep their drawn targets. A row that opens nothing grows no zone at all.
+
 ## Focus ring contrast
 
 <!-- rule: ring-contrast -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.71.0",
+  "version": "0.72.0",
   "workspaces": [
     "react"
   ],

package/react/dist/index.css

@@ -26,6 +26,89 @@
   }
 }
 
+/* ../src/styles/tap-zone.css */
+:root {
+  --tap-min: 44px;
+  --tap-aa: 24px;
+  --tap-gap: var(--space-5, 20px);
+  --tap-clear-x: 0px;
+  --tap-clear-y: 0px;
+}
+@media (max-width: 560px) and (pointer: coarse) {
+  :where(.ui-seg button, .ui-tabs__tab, .ui-dropdown__trigger, .ui-toast__action, .ui-drawer__close, .ui-snippet__copy, .ui-footer__social) {
+    position: relative;
+  }
+  :where(.ui-btn, .ui-seg button, .ui-tabs__tab, .ui-dropdown__trigger, .ui-toast__action, .ui-drawer__close, .ui-snippet__copy, .ui-footer__social, .ui-switch)::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: min(max(100%, var(--tap-min)), calc(100% + var(--tap-clear-x)));
+    height: min(max(100%, var(--tap-min)), calc(100% + var(--tap-clear-y)));
+  }
+  .ui-check input::before,
+  .ui-toast__close::before {
+    width: max(var(--tap-aa), min(max(100%, var(--tap-min)), calc(100% + var(--tap-clear-x))));
+    height: max(var(--tap-aa), min(max(100%, var(--tap-min)), calc(100% + var(--tap-clear-y))));
+  }
+  .ui-seg {
+    row-gap: var(--tap-gap) !important;
+    --tap-clear-x: var(--space-1, 4px);
+    --tap-clear-y: var(--tap-gap);
+  }
+  .ui-tabs__list {
+    --tap-clear-x: 2px;
+    --tap-clear-y: var(--tap-gap);
+  }
+  .ui-pager__steps {
+    row-gap: var(--tap-gap) !important;
+    --tap-clear-x: var(--space-1, 4px);
+    --tap-clear-y: var(--tap-gap);
+  }
+  .ui-pager {
+    row-gap: var(--tap-gap) !important;
+    --tap-clear-y: var(--tap-gap);
+  }
+  .ui-filter-bar {
+    gap: var(--tap-gap) !important;
+    --tap-clear-x: var(--tap-gap);
+    --tap-clear-y: var(--tap-gap);
+  }
+  .ui-filter-bar__chip {
+    --tap-clear-x: 0px;
+    --tap-clear-y: 0px;
+  }
+  .ui-table__act .ui-btn + .ui-btn {
+    margin-inline-start: var(--tap-gap) !important;
+  }
+  .ui-table__act {
+    --tap-clear-x: var(--tap-gap);
+    --tap-clear-y: 0px;
+  }
+  .ui-toast {
+    row-gap: var(--tap-gap) !important;
+    --tap-clear-y: var(--tap-gap);
+  }
+  .ui-confirm__acts,
+  .ui-toolbar,
+  .ui-empty__actions,
+  .ui-sx__actions,
+  .ui-fbc__foot,
+  .ui-drawer__footer,
+  .ui-snippet__bar,
+  .ui-app__main .ui-card__row {
+    row-gap: var(--tap-gap) !important;
+    --tap-clear-y: var(--tap-gap);
+  }
+  .ui-footer__socials,
+  .ui-drawer__header {
+    gap: var(--tap-gap) !important;
+    --tap-clear-x: var(--tap-gap);
+    --tap-clear-y: var(--tap-gap);
+  }
+}
+
 /* ../src/styles/input.css */
 .ui-field {
   display: block;

package/src/index.css

@@ -44,3 +44,6 @@
 @import "./styles/feedback.css";
 @import "./styles/success.css";
 @import "./styles/loading.css";
+/* Last, and that is the point: the tap zone opens a gap a component sheet set,
+   so it has to be read after every one of them. why: specification, the tap floor */
+@import "./styles/tap-zone.css";

package/src/inline.js

@@ -30,6 +30,7 @@ export const styles = {
   base: baseCss,
   reducedMotion: read('styles/reduced-motion.css'),
   fieldZoom: read('styles/field-zoom.css'),
+  tapZone: read('styles/tap-zone.css'),
   motion: read('styles/motion.css'),
   button: read('styles/button.css'),
   card: read('styles/card.css'),
@@ -92,4 +93,7 @@ export const cssText = [
   styles.feedback,
   styles.success,
   styles.loading,
+  // Last in the list for the reason src/index.css imports it last: it opens a
+  // gap a component sheet set, so it is read after every one of them.
+  styles.tapZone,
 ].join('\n');

package/src/styles/tap-zone.css

@@ -0,0 +1,167 @@
+/* apliteni-ui — the tap zone. Below the phone step, to a coarse pointer, a
+ * control that draws smaller than --tap-min carries a transparent layer that
+ * reaches the floor, and no control is drawn any bigger. Zones alone do not
+ * finish it: a layer takes HALF the clear space its container declares, so
+ * where the kit packs small controls closer than that, the GAP opens to
+ * --tap-gap. The controls keep their size; the space between them grows.
+ *
+ * Read LAST, after every component sheet — see src/index.css — because each
+ * opening overrides a gap one of them already set.
+ *
+ * why: docs/specification.md#a-tap-reaches-the-floor-below-the-phone-step
+ * Held by stories/tap-zone.test.js, measured in a browser at 390.
+ */
+
+:root {
+  /* WCAG 2.5.5, and where iOS and Android land. Not on the spacing scale,
+     which runs 40 then 48, because a fingertip is not spacing. Declared here
+     rather than in tokens.css for the reason field-zoom.css carries its own 16:
+     react/src/index.ts imports this sheet without the token file, and a var()
+     resolving to nothing there would size the layer to `auto` in silence. */
+  --tap-min: 44px;
+
+  /* WCAG 2.5.8 (AA), the target the kit holds at every width: the floor this
+     sheet raises FROM and may never drop below. */
+  --tap-aa: 24px;
+
+  /* 44 − 24: two zones fit between two of the smallest marks the kit draws. */
+  --tap-gap: var(--space-5, 20px);
+
+  /* Clear space to the nearest neighbour, declared by the container that knows
+     its own gap; a zone takes half on each side.
+
+     ZERO by default, so a zone grows nowhere until a container has opened the
+     room — assuming --tap-gap everywhere was measured handing `Keep the
+     workspace` a pixel of its own box that answered for `Delete it
+     permanently`. */
+  --tap-clear-x: 0px;
+  --tap-clear-y: 0px;
+}
+
+@media (max-width: 560px) and (pointer: coarse) {
+  /* The containing block for every layer below. `.ui-btn` already has it; the
+     rest take it only inside this query, because `position: relative` lifts a
+     control over the in-flow one beside it and that changes who wins a shared
+     pixel. */
+  :where(
+    .ui-seg button,
+    .ui-tabs__tab,
+    .ui-dropdown__trigger,
+    .ui-toast__action,
+    .ui-drawer__close,
+    .ui-snippet__copy,
+    .ui-footer__social
+  ) { position: relative; }
+
+  /* The layer: centred, transparent, sized to the floor, clamped to half the
+     clearance. */
+  :where(
+    .ui-btn,
+    .ui-seg button,
+    .ui-tabs__tab,
+    .ui-dropdown__trigger,
+    .ui-toast__action,
+    .ui-drawer__close,
+    .ui-snippet__copy,
+    .ui-footer__social,
+    .ui-switch
+  )::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: min(max(100%, var(--tap-min)), calc(100% + var(--tap-clear-x)));
+    height: min(max(100%, var(--tap-min)), calc(100% + var(--tap-clear-y)));
+  }
+
+  /* ::after on these is spoken for — the tick and the dot, the toast close's
+     glyph plate — so the existing ::before grows, floored at --tap-aa. The
+     floor is load-bearing: `100%` is the PADDING box, 16 on a 19px checkbox
+     with a 1.5px border, so without it the clamp takes this layer DOWN to 22
+     and under the kit's own minimum. */
+  .ui-check input::before,
+  .ui-toast__close::before {
+    width: max(var(--tap-aa), min(max(100%, var(--tap-min)), calc(100% + var(--tap-clear-x))));
+    height: max(var(--tap-aa), min(max(100%, var(--tap-min)), calc(100% + var(--tap-clear-y))));
+  }
+
+  /* -- Where the kit opens a gap, and where it cannot --------------------
+   * `!important` for the reason field-zoom.css takes it: each opening
+   * overrides a `gap` shorthand a component sheet set, and the React bundle
+   * ships this sheet without those sheets, where order is the consumer's.   */
+
+  /* A strip keeps its pills packed across — that tight track IS the control —
+     and opens down, where the room is free until it wraps. */
+  .ui-seg {
+    row-gap: var(--tap-gap) !important;
+    --tap-clear-x: var(--space-1, 4px);
+    --tap-clear-y: var(--tap-gap);
+  }
+
+  /* Tabs are wide enough across; down, the panel under them has the room. */
+  .ui-tabs__list { --tap-clear-x: 2px; --tap-clear-y: var(--tap-gap); }
+
+  /* Equal cells read as one strip, so they stay packed across and open down,
+     which is where this strip wraps at this width. */
+  .ui-pager__steps {
+    row-gap: var(--tap-gap) !important;
+    --tap-clear-x: var(--space-1, 4px);
+    --tap-clear-y: var(--tap-gap);
+  }
+  .ui-pager { row-gap: var(--tap-gap) !important; --tap-clear-y: var(--tap-gap); }
+
+  /* Chips open both ways: the row wraps, and the button at the end of it is a
+     target like the chips are. */
+  .ui-filter-bar { gap: var(--tap-gap) !important; --tap-clear-x: var(--tap-gap); --tap-clear-y: var(--tap-gap); }
+
+  /* Inside a chip there is nothing to open: parting the value from its remove
+     mark would draw two controls where the reader sees one. Named on the
+     Accessibility minimums page. */
+  .ui-filter-bar__chip { --tap-clear-x: 0px; --tap-clear-y: 0px; }
+
+  /* Row actions open across — the pair #488 names — and cannot open down:
+     a dense table's rows share an edge, and parting them is the row height the
+     guideline protects. Down, they get the row's own padding, twice. */
+  /* Row actions — the pair #488 names — part ACROSS with a margin: the cell is
+     a `table-cell`, where `gap` does nothing, and declaring it anyway left the
+     mark's zone 9px inside `Revoke`. Nothing down, because a dense table's
+     rows share an edge and its padding is not clearance to spend. */
+  .ui-table__act .ui-btn + .ui-btn { margin-inline-start: var(--tap-gap) !important; }
+  .ui-table__act { --tap-clear-x: var(--tap-gap); --tap-clear-y: 0px; }
+
+  /* Down only, like the nine rows below: a toast is a full row at this width,
+     and opening it across took 24px out of the message for no reach at all —
+     its action already clears the floor on the vertical half. The box does not
+     open either: a toast clips to its own rounded corners for the timer bar,
+     and widening its padding grows the surface rather than the space between
+     controls, measured at four marks for 8px on every toast. */
+  .ui-toast { row-gap: var(--tap-gap) !important; --tap-clear-y: var(--tap-gap); }
+
+  /* The kit's remaining control rows open DOWN only. A row of labelled buttons
+     at 390 is often already full, so widening its column gap does not move the
+     buttons apart — it makes them narrower, and that is the half #488 rules
+     out. Measured on a toolbar of three buttons and a dropdown. These rows
+     wrap, which is also where the review measured them colliding. */
+  .ui-confirm__acts,
+  .ui-toolbar,
+  .ui-empty__actions,
+  .ui-sx__actions,
+  .ui-fbc__foot,
+  .ui-drawer__footer,
+  .ui-snippet__bar,
+  .ui-app__main .ui-card__row {
+    row-gap: var(--tap-gap) !important;
+    --tap-clear-y: var(--tap-gap);
+  }
+
+  /* Both ways: fixed squares cannot overflow the way labels can, and a drawer
+     header spends its column gap on the title. Not the accent picker — its
+     swatches are on no carrier list, so opening it bought no reach. */
+  .ui-footer__socials,
+  .ui-drawer__header {
+    gap: var(--tap-gap) !important;
+    --tap-clear-x: var(--tap-gap);
+    --tap-clear-y: var(--tap-gap);
+  }
+}