@misoto22/design 0.7.0 → 0.8.0

package/skills/misoto22-design/rules/a11y.md

@@ -38,6 +38,52 @@ caption still reaches assistive tech.
 
 ## An icon-only control needs a name
 
+Development warns on both failures in this section rather than leaving them to
+review: `BUTTON_ICON_ONLY_UNNAMED` when an `iconOnly` Button has neither
+`aria-label` nor `aria-labelledby`, and `REQUIRED_NAME_BLANK` when a name that
+is required for accessibility is an empty string. Each names the field and the
+fix, so a failed render tells you what to change.
+
+They are two of nineteen. The whole set, so a code you meet in a console is
+findable:
+
+| Code | Fires when |
+| --- | --- |
+| `ARTICLE_HTML_AND_CHILDREN` | `Article` is given both `html` and `children`. |
+| `BREADCRUMB_CRUMB_NOT_LINKED` | A crumb before the last carries no `href`. |
+| `BUTTON_ICON_ONLY_UNNAMED` | An icon-only `Button` has no accessible name. |
+| `DIALOG_TITLE_MISSING` | `DialogContent` has no `title`. |
+| `FIELD_CONTROL_NOT_LABELLABLE` | A `Field`'s child is a host element that cannot take a label. |
+| `FIELD_CONTROL_NOT_WIRED` | A `Field`'s child is not a single element, so nothing was wired. |
+| `REQUIRED_NAME_BLANK` | A name required for accessibility is an empty string. |
+| `SEARCHABLE_MENU_LABEL_UNREADABLE` | A `SearchableMenu` action's label has no text and no `keywords`, so typing can never find it. |
+
+`Diagram` checks the spec it was handed, because a figure that ignores an edge
+still renders beautifully:
+
+| Code | Fires when |
+| --- | --- |
+| `DIAGRAM_ACCENT_ON_CONTAINER` | `accent` on a node with children, drawn as a band with no fill to take. |
+| `DIAGRAM_DIRECTION_ON_LEAF` | `direction` on a node with no children. |
+| `DIAGRAM_DUPLICATE_ID` | Two nodes carry the same `id`. |
+| `DIAGRAM_EDGE_NOT_ADJACENT` | An edge names two nodes that are never consecutive siblings. |
+| `DIAGRAM_EDGE_UNKNOWN_NODE` | An edge names an `id` no node carries. |
+
+And the figures in `@misoto22/design/diagrams` check theirs:
+
+| Code | Fires when |
+| --- | --- |
+| `DIAGRAM_CELL_COLLISION` | Two nodes land at the same coordinate, so one plate is drawn on top of the other. |
+| `DIAGRAM_EDGE_DANGLING` | A relationship names an id the specification does not declare, so it is left out of the picture and the summary. |
+| `DIAGRAM_LANE_UNKNOWN` | A node names a lane no lane in the specification declares; it falls back to the first. |
+| `DIAGRAM_REF_UNKNOWN` | A field references an id no node in the specification declares. |
+| `DIAGRAM_SPEC_MUTATED` | The same spec object arrives with different contents; the model is memoised on identity, so the figure still draws the first. |
+| `DIAGRAM_STAGE_OUT_OF_RANGE` | A node's `stage` falls past the last declared stage, so it is drawn in a column the axis does not label. |
+
+All of them are development-only — every call site is behind
+`process.env.NODE_ENV`, so nothing here reaches a production bundle — and each
+prints once per problem, the field that caused it, and an imperative fix.
+
 ```tsx
 // Incorrect — reads as "button"
 <Button iconOnly><TrashIcon /></Button>
@@ -93,9 +139,15 @@ where a hand-rolled component quietly becomes unusable with a keyboard. `Dialog`
 
 ## Motion is gated
 
-Anything animated is behind `motion-safe` and carries `data-m22-animated`, so
-the one reduced-motion rule in the package can reach it. If you animate
-something yourself, do both.
+Anything animated is behind `motion-safe` and carries `data-m22-animated`. Do
+both when you animate something yourself — but know what each one buys. The
+GUARANTEE is a universal rule in `keyframes.css`: under
+`prefers-reduced-motion: reduce`, `animation-duration` and `transition-duration`
+are clamped to 0.01ms on `*`, so your animation is covered whether or not you
+remember the attribute. `data-m22-animated` goes further, removing the
+animation outright rather than running an instant frame of it — read it as the
+component asserting its motion is decorative, not as the thing that does the
+cancelling.
 
 ```tsx
 // Correct — the package's keyframes are all prefixed `m22-`

package/skills/misoto22-design/rules/forms.md

@@ -55,6 +55,11 @@ field is wrong, the thing to read is what is wrong with it.
 
 ## One control per `Field`
 
+`Field` warns in development when it cannot wire a control, so you do not have
+to spot this by reading. `FIELD_CONTROL_NOT_LABELLABLE` means the child is a
+wrapper and the label went onto the box; `FIELD_CONTROL_NOT_WIRED` means there
+was no single element to wire at all. Both print the fix.
+
 The wiring clones a **single** element child. Two children, or a wrapper div,
 and nothing is wired — the label points at an id that is on nothing.