` that wraps the keys (it is the grid), so a key stands on it in the DOM as on the page. A `disabled` fieldset disables every key natively. - A key is moved by `--strata-push-t`, a registered number the recipe sets from the native state (held, disabled); `data-strata-down` is kept by `attachStrataKeypads` and overrides a `:active` a touch can leave behind. - No overlay. ## 8. Keyboard and screen reader | Input | Key | | --- | --- | | Click, tap | Presses and clicks once | | Space | Held from key down to key up; clicks on key up | | Enter | Held from key down to key up; clicks on key down (native) | | Tab, Shift+Tab | Into and out of the keypad: **one tab stop** for the keys | | Arrow keys | Move focus one key along the row or one row along the column (the Grid navigation pattern); nothing wraps; disabled keys are skipped; a short last row stops Down where it is | | Home, End | The first and last key of the row | | Control+Home, Control+End | The first and last key | - The group is a `fieldset` (role `group`) named by its `legend`; each key is a `button` named by its printed legends. An `aria-label` that replaces them must still contain the printed legend (WCAG 2.5.3 Label in Name, which axe 4.11 checks as `label-content-name-mismatch`): `aria-label="5, five"` on a key printing `5`, never `"Five"`. The navigation is the Pad's (see [its keyboard section](https://underglass.dev/docs/strata/components/pad#8-keyboard-and-screen-reader)): a roving tabindex applied the first time focus enters, the columns read from the laid-out grid, right-to-left swapping left and right. Without script every key is a native tab stop. - A key that types into a field is the application's: a click handler inserts the key's `value`. The keypad does not intercept keys; a physical keyboard types into the field itself. - **Target size** (2.5.8): the key's box is at least 48 px square at the small size (the cap 36), 56 at medium, over the 44 px recommended for touch; the least a key shrinks to in a narrow container is `target.min` (24). - **Screen readers:** the manual script for a keypad's roving arrows and its legends' names is VAL-002's, in [open issues](https://github.com/RaananW/underglass/blob/main/docs/open-issues.md), until performed; the automated checks are the accessibility snapshot, axe and real keys. - **Feedback** (design language section 20): where on, a key plays `click` as it goes down, once per press; a pulse (8 ms) answers only the visitor's own input and stops under reduced motion. Both are off by default. ## 9. CSS presentation A polished frame (a gradient in the knob's metal) round a grid of square caps (`secondary`, raised by the shared recipe), each cap printing its legend centred and an optional second legend under it in the caption size. The plinth is `grid-template-columns: repeat(var(--strata-keypad-columns, 3), minmax(0, max-content))`: keys keep their width and shrink together (never below `target.min`) when the container is narrower; a key is never lower than its box, and a legend that wraps grows it taller. A 4-column keypad of medium keys is 260 px wide and fits a 320 px viewport. - **`forced-colors: active`:** the plinth is `Canvas` with a `ButtonText` edge, the caps `ButtonFace` with a `ButtonText` edge, a `Highlight` focus ring, `GrayText` when disabled. - **`prefers-contrast: more`:** the plinth and caps edged in the text colour. - **`prefers-reduced-motion: reduce`:** travel is at once. - Face mode (`data-strata-mode="face"`, GPU on): at Instrument the plinth's paint is hidden and the caps' translation is held (the objects travel). ## 10. Tests - **Plain DOM** (`ui-keypad.test.mjs`, real buttons): held from down to up (pointer, Space, Enter), one click; a disabled key is never held and the arrows skip it; a submit key submits its name and value; roving tabindex and every grid key (arrows, Home, End, Control+Home/End, a short last row); the legends and the shifted layout. - **Mobile:** at 390 and 320 px no horizontal overflow, boxes at least 24 px; at 200% text the legends wrap without loss; touch taps and holds. - **Preferences:** axe in light, dark, face mode, forced colours, more contrast and reduced motion. - **GPU** (DPR 1 and 2, Relief, Objects and Instrument): the scene has no emitter of its own; at Instrument an object for the plinth and one per key with the documented parts; what the keypad draws lies inside the keys' boxes and the fieldset's box (0 px outside, at three depths at Instrument), native hits on those pixels find a key or the fieldset and a grid over every box has 0 mismatches; a press changes pixels in the key's box only; 40 held frames give 0 captures and 0 hit-geometry updates; the accessibility snapshot is the same in DOM and GPU modes. - **Feedback:** off by default; one click per real press. - **Bindings and Astro** (`ui-keypad-bindings.test.mjs`, `ui-keypad-astro.test.mjs`): the two examples above rendered exactly; attributes, refs, `disabled`, `shifted`, a short last row. - **Unit** (`strata-pad-keypad.unit.test.mjs`): sizes, boxes, the grid keys, the Relief and Objects entries and the Instrument parts validated by core's `validateInstrumentScene` and contained over the reference stage at every depth and size.