Our quarterly review highlighted three priorities for the next cycle: improving the onboarding experience, reducing the time it takes to close payroll, and giving managers better visibility over team workloads.
Each priority now has a clear owner and a measurable target, so we can track progress week by week instead of waiting for the end of the quarter to find out where we stand.
`, diff --git a/packages/react/src/patterns/Cocreation/__stories__/accessibility.mdx b/packages/react/src/patterns/Cocreation/__stories__/accessibility.mdx new file mode 100644 index 0000000000..b846642855 --- /dev/null +++ b/packages/react/src/patterns/Cocreation/__stories__/accessibility.mdx @@ -0,0 +1,157 @@ +import { Meta, Unstyled } from "@storybook/addon-docs/blocks" +import { DoDonts } from "@/lib/storybook-utils/do-donts" + + + +# Accessibility + +Co-creation puts a conversation, a set of accept/reject decisions, and a live resource canvas +on screen at once, and changes them as the AI works. That makes a few things load-bearing: +the user must be able to **drive every decision from the keyboard**, **hear what the AI just +did** without watching the canvas, and **keep their place** when panels open, close, and +swap. The building blocks already implement most of this; this page states the contract the +pattern relies on so a new co-creation flow inherits it instead of re-deriving it. + +## Keyboard + +Everything the user can do with a pointer must be reachable from the keyboard, in a sensible +order, with a visible focus ring. + +| Surface | +Keyboard behavior | +
|---|---|
+ Clarifying questions (F0ClarifyingPanel)
+ |
+ + Arrow keys move between options, Enter selects and + advances, and Esc cancels the whole flow. The panel + surfaces these hints inline ("navigate · Enter select · Esc cancel"). + | +
| + Proposal cards (accept / reject) + | ++ The accept (✓) and reject (✗) actions are real buttons with text + labels, focusable in reading order. Resolving a proposal must not + strand focus (see below). + | +
| + Resource cards (Open / Close) + | ++ Opening and closing the canvas is a focusable control on the card — + never a pointer-only target. Superseded cards drop their action and + leave the tab order. + | +
+ Header trigger (F0OneSwitch)
+ |
+ + The One switch is reachable in every phase, so the keyboard user can + always open, collapse, or return to the conversation. + | +
| Responsibility | +Block | +
|---|---|
| Open the AI from any phase | +
+ F0OneSwitch in the frame header
+ |
+
| The conversation surface, composer, and welcome screen | +
+ F0AiChat (plus its welcomeScreenCards /{" "}
+ welcomeScreenSuggestions)
+ |
+
| Narrow a vague intent before drafting | +
+ F0ClarifyingPanel
+ |
+
| The in-chat resource card and the accept/reject proposal card | +
+ F0CardHorizontal
+ |
+
| "Applying changes" over the canvas | +
+ F0AiProcessingOverlay
+ |
+
| Block | +Role in co-creation | +Phase | +Docs | +
|---|---|---|---|
+ F0OneSwitch
+ |
+ + The One switch in the application header. Entry point that opens the + AI from any phase. + | +Collection → Chat | ++ + AI / F0OneSwitch + + | +
+ F0AiChat
+ |
+ + The conversation surface and runtime. Hosts the messages, input, + welcome cards and suggestions, and in-chat cards. + | +Chat, Split | ++ + AI / F0AiChat + + | +
+ F0ClarifyingPanel
+ |
+ + Structured clarifying questions that narrow the intent before drafting + (e.g. resource type, audience, length). + | +Chat | ++ + AI / F0ClarifyingPanel + + | +
+ F0CardHorizontal
+ |
+ + The single card primitive used for both the in-chat resource card + (opening it moves the flow into Split and shows the resource in the + canvas) and the human-in-the-loop proposal card (a proposed change + surfaced as an explicit accept / reject before it is applied). Its + active, inactive, and confirm/reject variants drive the card + lifecycle. + | +Chat, Split | ++ + Experimental / CardHorizontal + + | +
+ F0AiProcessingOverlay
+ |
+ + The "applying changes" overlay shown over the resource while a + proposed change is being written. + | +Split | ++ + AI / F0AiProcessingOverlay + + | +
| Starting point | +What it does | +
|---|---|
| + Empty survey + | ++ Creates a blank survey and walks the user through it with clarifying + questions. + | +
| + Templates + | ++ Opens the templates canvas to browse and preview pre-made surveys. + | +
| + Employee NPS + | ++ Seeds a ready-made eNPS survey; the eNPS question is locked so scores + stay comparable, the rest is editable. + | +
| + Employee Engagement + | +Seeds a ready-made employee-engagement survey to edit. | +
| Mode | +What the user sees | +
|---|---|
| + Preview + | ++ The survey rendered as it will be answered (the answering form), for + reviewing a template or draft. + | +
| + Edit + | ++ The survey builder, with a Questions tab for the survey content and a + Settings tab for metadata (title, description, participants, schedule, + visibility, editors). + | +
blocks, spaced by the bubble's gap. + return [{ role: "user" as const, content: blocks.join("\n\n") }] +} + +// Survey name derived from the chosen type once the guided flow completes — the +// canvas header switches from "Untitled survey" to this. +const surveyNameForType = (typeLabel: string): string => `${typeLabel} survey` + +// Confirmation dialogs use the imperative Alert/Confirm API from Library/Dialogs +// (`dialogs.confirmation`, rendered by the `DialogsAlikeLayoutProvider` that `F0Provider` +// mounts). No open-state context needed — any trigger just calls these and awaits +// the result (the picked action's value: `true` for confirm, `false` for cancel). + +// Shared "leave creation" confirmation — opened by the preview header's "Edit +// Template" action and the in-canvas alert's "Templates" link. +const confirmLeaveCreation = () => + dialogs.confirmation({ + title: "Leave creation?", + msg: "Editing this template opens it in Surveys / Templates. Are you sure you want to leave the current creation flow?", + confirm: { label: "Go to Edit Template" }, + cancel: { label: "Cancel" }, + }) + +// "Unsaved changes" confirmation shown when "Publish" is pressed — offers to save +// before publishing. Resolves `true` when the user confirms. +const confirmPublish = () => + dialogs.confirmation({ + title: "Unsaved Changes", + msg: "You have unsaved changes, would you like to Save the changes before publishing?", + confirm: { label: "Save Changes and Publish" }, + cancel: { label: "Cancel" }, + }) + +// "Unsaved changes" confirmation shown when the canvas Close (X) is pressed. +// Closing leaves the in-progress draft, so the user gets the three ways out: +// save the changes then close, close without saving, or cancel and stay. +// Resolves the picked action's value ("save" | "discard" | "cancel"); dismissing +// the dialog (backdrop / Esc) resolves `undefined`, also treated as "stay". +const confirmCloseUnsaved = () => + dialogs.notification({ + type: "warning", + title: "Unsaved changes", + msg: "You have unsaved changes. Save them to Surveys before closing the canvas?", + actions: { + primary: { label: "Save and close", value: "save" }, + secondary: [ + { label: "Close without saving", value: "discard" }, + { label: "Cancel", value: "cancel" }, + ], + }, + }) + +/** + * The non-dismissable info banner shown atop a template preview. The "Templates" + * link doesn't navigate (this is a mock); it opens the same leave-creation + * confirmation as the header's "Edit Template" action. F0Alert's link is + * href-only, so the click is intercepted on capture. + */ +function TemplatePreviewAlert() { + return ( +
| Situation | +Use co-creation when | +
|---|---|
| Creating a structured resource from a vague intent | ++ The user can describe the goal in words but a blank form would be slow + or intimidating (a survey, a job description, a policy draft). + | +
| The first draft benefits from a conversation | ++ Clarifying questions meaningfully improve the output before generation + (audience, tone, length, scope). + | +
| The resource is refined iteratively | ++ The user wants to keep adjusting the draft while staying in dialogue, + rather than committing once and editing later. + | +
| Context from the originating surface matters | ++ Creation should happen over the collection or page the user came from, + not in a separate tool. + | +
| Situation | +Use instead | +
|---|---|
| Open-ended questions with no resource as output | +
+
+ F0AiChat
+ {" "}
+ on its own
+ |
+
| A short, well-defined record with a few known fields | ++ A{" "} + + CRUD dialog + {" "} + from Data collection + | +
| A long, deterministic flow with required steps in a fixed order | ++ A{" "} + + wizard form + + | +
| Applying a change the user should not be able to undo casually | ++ A{" "} + + confirmation dialog + {" "} + with an explicit destructive action + | +
| Phase | +What happens | +Entry / exit | +
|---|---|---|
| + Collection + | ++ The starting surface — a data collection, page, or list. The user + works as usual; co-creation is one trigger away. + | ++ Enters from the surface itself. Exits to Chat when the user opens the + AI via the header One switch (side panel) or the{" "} + Create primary button (full width). + | +
| + Chat + | ++ The chat animates in so the user can describe what they want. + Clarifying questions narrow the intent before anything is drafted. + | ++ Enters from Collection. Opens full width via the Create button, or as + a side panel via the One switch. Exits to Split once there is a + resource to show. + | +
| + Split + | ++ The chat docks as the right side panel and the resource canvas fills + the center. The user reviews, edits, and refines the draft while the + conversation continues alongside it. + | ++ Enters from Chat when a resource is created or opened. The + conversation and the canvas stay visible together until the resource + is done. + | +
| Card | +State | +Appearance | +Interactive | +
|---|---|---|---|
| Resource card | ++ Active + | ++ Its resource is open in the canvas — offers Close, highlighted border. + | +Yes — one card active at a time | +
| Resource card | ++ Live (not open) + | ++ Latest card for the resource, not currently shown — offers Open. + | +Yes | +
| Resource card | ++ Superseded + | ++ Replaced by a newer card — Open/Close removed, dimmed, kept in + history. + | +No | +
| Proposal card | ++ Pending + | +Accept (✓) / reject (✗) actions on the trailing edge. | +Yes | +
| Proposal card | ++ Resolved + | +Outcome icon (Accepted / Rejected) in place of the actions. | +No | +