Mobile Readiness
A reusable rubric for reviewing component behavior across viewport space, input capability, gestures, mobile viewport constraints, and WCAG 2.2 AA accessibility.Overview
Use this rubric whenever a new or changed component could behave differently across viewport sizes or input modes. It extends the component hardening checklist: record each applicable row as Pass, Fail, or N/A, and attach evidence in the issue, PR description, or lab-readiness manifest link that reviewers can open.
Keep size, pointer, hover, and gesture capability separate. A narrow viewport does not prove touch input, and a coarse pointer does not prove a narrow viewport. Layout should follow available space and content fit; input behavior should follow the input capability it actually depends on.
Required scenarios
| Scenario | What it proves | Minimum evidence |
|---|---|---|
| Desktop + fine pointer + hover | The default wide desktop contract remains intact. | Story or screenshot plus focused test when layout/order/interaction can regress. |
| Small screen + touch/coarse pointer/no hover | The mobile/touch contract works when width and touch constraints appear together. | Story or emulator/device capture plus activation evidence. |
| Small/narrow screen + fine pointer/hover | Width-driven reflow does not depend on touch or no-hover media queries. | Story or viewport test demonstrating the same narrow layout as mobile when applicable. |
| Large screen + touch/coarse pointer/no hover | Input capability does not accidentally force narrow/mobile geometry. | Story, browser/device capture, or media-query test when pointer branches exist. |
If a scenario is irrelevant, mark it N/A with the reason. Example: a purely static text component has no pointer-activation evidence to provide, but it still owes content-fit evidence at the supported widths where it renders.
Axes
| Axis | Review requirement | N/A guidance |
|---|---|---|
| Available space and content fit | Use shared breakpoint names and values: none 0, sm 640px, md 768px, lg 1024px. Reflow from viewport or container space and actual content fit; long labels and localized copy wrap instead of clipping or causing horizontal overflow. | Rarely N/A. Even non-interactive components need evidence that their content fits or intentionally scrolls within their supported containers. |
| Pointer precision | Review fine and coarse pointer behavior independently from width. Hit areas, drag handles, resize affordances, and hover targets must remain usable for the pointer precision they support. | N/A only when the component has no pointer interaction beyond native text selection or links/buttons inherited unchanged from existing primitives. |
| Hover availability | Essential information and required actions must not require hover. Hover may reveal convenience affordances only when the same action or information is available through focus, visible UI, or another non-hover path. | N/A for components with no hover-specific behavior; record that no required state depends on hover. |
| Active pointer/touch input | Custom gestures use Pointer Events where possible, handle mouse/touch/pen consistently, and do not block click, focus, text selection, or native scrolling. Touch activation must be intentional and reversible where destructive. | N/A when the component has no custom pointer handling or gesture semantics. |
| Mobile viewport constraints | Check software keyboard resize/occlusion, safe-area insets for edge-anchored UI, dynamic viewport units, body locking, and nested scroll behavior where the component owns viewport geometry. | N/A for inline components or overlays whose position/size never interacts with viewport edges, keyboard, or scroll locking. |
| WCAG 2.2 Level AA | Evaluate only Level AA requirements. Target size is 2.5.8: at least 24 by 24 CSS px or a permitted exception. Do not require 44 by 44 AAA targets or external 48 by 48 mobile guidance as Astryx requirements. | Never N/A for interactive components. Non-interactive components still owe applicable contrast, semantics, and reading-order checks. |
| Gestures | Gestures enhance rather than unlock functionality. Preserve native scroll/browser/OS gestures. Path-based, multipointer, or dragging interactions need non-gesture alternatives where WCAG AA requires them, and pointer cancellation semantics must avoid accidental activation. | N/A when there are no custom gestures, drag interactions, or pointer-capture flows. |
| Existing contracts | State whether semantic roles/names, focus order and return, keyboard operation, reduced-motion behavior, and dismissal contracts are preserved or intentionally changed. | N/A only for the sub-items the component genuinely does not own; the review still records that conclusion. |
Evidence template
Paste this checklist into the PR, RFC, or linked evidence. Every row must be Pass, Fail, or N/A. N/A needs a reason, not a blank cell. A lab-readiness manifest can link to that filled checklist as the evidence for the Mobile readiness hardening check.
md
Worked example
AlertDialog demonstrates the intended separation. The layout evidence covers a desktop fine-pointer story, a narrow fine-pointer story, and a mobile touch story. Width determines the geometry: above 640px the dialog keeps the 400px centered surface and horizontal Cancel/destructive row; at 640px and below it uses token gutters, stacks destructive above Cancel, and wraps labels. Pointer and hover capability are independently testable but do not choose the layout.
For that component, custom gestures, software-keyboard behavior, and safe-area behavior are N/A unless the implementation changes to own them. Existing focus, role, keyboard, reduced-motion, and dismissal contracts remain explicit review items and should be named in the evidence instead of inferred from the responsive layout work.
astryx docs layoutfor frame, region, spacing, and breakpoint contractsastryx docs browser-supportfor platform feature support and feature detectionastryx docs motionfor reduced-motion expectations and motion token use