Does the component say what it is?
Use native elements, truthful names, ordered-process semantics only for real ordered processes, and one durable state model.
- semantic role inspection
- accessible-name query
- copy/ontology review
yawn.bot/react-quality-components
React quality components
Open the quality contract to inspect the rules, evidence, and reversible preference component.
awakeReact performance is one quality lens—not the whole interface.
The repository checklist is strong on waterfalls, bundles, server/client work, rerenders, rendering, and JavaScript. YAWN components also need semantics, accessible interaction, non-manipulative choice, preference provenance, responsive geometry, brand cohesion, and proof.
- Quality lenses
- 8
- Components in this pass
- 2
- Preference writes
- 0 canonical
Eight questions every component must answer
Do every input path and state transition agree?
Scroll, pointer, keyboard, and explicit controls must converge on the same state without auto-advancing or stealing focus.
- state-machine unit test
- keyboard pass
- focus-retention pass
Can different bodies and tools operate it?
Protect keyboard access, visible and unobscured focus, reduced motion, announcements, reflow, and at least 24×24 CSS-pixel targets.
- WCAG 2.2 review
- screen-reader names
- 320 CSS-pixel reflow
Is the interface helping a decision without steering it covertly?
Compare one named dimension at a time, give valid options equal prominence, permit depends/no-preference, and never nag after a skip.
- option-symmetry review
- default disclosure
- no-forced-choice test
Who chose this, where does it apply, and can it be reversed?
Keep explicit choices separate from inference; attach principal, scope, source, revision, provenance, reset, undo, and effect boundaries.
- scope-resolution test
- provenance receipt
- undo/reset test
Does the component avoid unnecessary work?
Apply the repository's React performance rules for waterfalls, bundles, server/client work, rerenders, rendering, JavaScript, and advanced patterns.
- React checklist review
- bundle boundary review
- rerender inspection
Does it remain coherent across size, motion, and input modes?
Reflow without horizontal page overflow, preserve readable order, avoid clipped focus, and use proximity rather than trapping snap behavior.
- desktop screenshot
- 390px screenshot
- short-viewport pass
What evidence says the component actually works?
Pair claims with focused tests, lint and type checks, runtime/console inspection, screenshots, and explicit unresolved lacunae.
- automated receipt
- browser receipt
- known-gap record
The two landing components under review
YawnOrganismStory
The seven-phase public ontology story and its scroll/button navigation.
- One state machine serves scrolling, phase selectors, Previous, and Next.
- Controls do not auto-advance and activation keeps focus on the control.
- Reduced-motion users receive immediate scrolling and non-animated transitions.
- The final ontology nodes become optional inspection controls, not tutorial completion steps.
YawnBotPublicHome
The public creation gate around the story, account state, and /new navigation.
- Authenticated creation bypass and signed-out story gate remain separate and explicit.
- The parent receives only the completion boolean; diagram focus stays local.
- No preference click, model call, persistence, or external effect is implied by viewing the story.
- Gate copy names the story boundary without restoring removed tutorial semantics.
Preference boundary
Some things are not matters of taste.
- Keyboard operation, readable names, visible focus, reflow, and reduced-motion protection.
- Privacy, authority, provenance, semantic truth, proof, and authenticated safety constraints.
- Equal option prominence, a real exit, no repeated prompting, and no silent global inference.
Within those invariants, a person can choose density, disclosure, navigation emphasis, feedback, motion, and spatial form. Resolution is protective constraint → explicit local scope → explicit ancestor scope → operating-system signal → visible product default.
Compare valid projections without creating hidden authority.
This public instance is a page-visit preview. The same accessible component appears in authenticated Settings with browser-local, scoped drafts and visible undo/reset controls.
Explicit comparison · presentation only
I prefer this over this.
Compare one dimension at a time. A click creates a reversible draft; it does not teach a hidden model, change semantic truth, or become an accepted .yawn preference.
- Principal
- anonymous-page-visitor
- Effective drafts
- 0
- State
- local · non-canonical
Primary standards and evidence behind the additions
React EffectsSynchronize React state with external systems and clean up every subscription.WCAG 2.2Keyboard, focus, reflow, motion, pointer alternatives, and target-size requirements.WAI carousel patternPrevious/next controls retain focus; passive rotation must not take control from the user.Constructive choicePreferences can be constructed by task and context rather than retrieved as fixed traits.Defaults researchDefaults can materially steer decisions, so product defaults must stay visible and reversible.Digital Services ActUnequal prominence, repeated requests, and asymmetric cancellation are manipulation risks.W3C PROV-OAttribution, derivation, revision, agent, activity, and time remain attached to applied preferences.NIST AI RMFDocument applied behavior, end-user decisions, explanation, and routes to redress.