CommunityRule/community-rule
2
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Give MultiSelect chips accessible names and start creation fields empty.

Browse Source 
Catalog chips now announce Select or Deselect so they are named for assistive tech. Method and value modals open blank; Generate draft inserts the catalog copy that used to be prefilled, and Customize still keeps the section headings.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilalloandCursor committed 2026-09-29 15:59:00 -06:00
1 parent fd9f82ea19
commit 20ea4a2f30
35 files changed
+498 -156
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/(app)/create/components/FinalReviewChipEditModal.tsx
+50 -30
View File
@@ -35,6 +35,10 @@ import {
conflictManagementPresetFor,
coreValuePresetFor,
decisionApproachPresetFor,
emptyCommunicationDetails,
emptyConflictManagementDetails,
emptyDecisionApproachTextFields,
emptyMembershipDetails,
membershipPresetFor,
} from "../../../../lib/create/finalReviewChipPresets";
import { isCustomMethodCardId } from "../../../../lib/create/isCustomMethodCardId";
@@ -1129,6 +1133,7 @@ export function FinalReviewChipEditModal({
<CoreValueEditFields
value={draft.value}
onChange={(value) => setDraft({ groupKey: "coreValues", value })}
generateDraft={coreValuePresetFor(target.overrideKey)}
/>
))}
{draft?.groupKey === "communication" &&
@@ -1156,6 +1161,7 @@ export function FinalReviewChipEditModal({
onChange={(value) =>
setDraft({ groupKey: "communication", value })
}
generateDraft={communicationPresetFor(target.overrideKey)}
/>
))}
{draft?.groupKey === "membership" &&
@@ -1183,6 +1189,7 @@ export function FinalReviewChipEditModal({
onChange={(value) =>
setDraft({ groupKey: "membership", value })
}
generateDraft={membershipPresetFor(target.overrideKey)}
/>
))}
{draft?.groupKey === "decisionApproaches" &&
@@ -1210,6 +1217,7 @@ export function FinalReviewChipEditModal({
onChange={(value) =>
setDraft({ groupKey: "decisionApproaches", value })
}
generateDraft={decisionApproachPresetFor(target.overrideKey)}
/>
))}
{draft?.groupKey === "conflictManagement" &&
@@ -1237,6 +1245,7 @@ export function FinalReviewChipEditModal({
onChange={(value) =>
setDraft({ groupKey: "conflictManagement", value })
}
generateDraft={conflictManagementPresetFor(target.overrideKey)}
/>
))}
</div>
@@ -1324,52 +1333,63 @@ function seedDraftForTarget(
switch (target.groupKey) {
case "coreValues": {
const saved = state.coreValueDetailsByChipId?.[target.overrideKey];
const preset = coreValuePresetFor(target.overrideKey);
if (saved) {
return {
groupKey: "coreValues",
value: {
meaning: saved.meaning,
signals: saved.signals,
...(saved.supportText ? { supportText: saved.supportText } : {}),
},
};
}
return {
groupKey: "coreValues",
value: {
meaning: saved?.meaning ?? preset.meaning,
signals: saved?.signals ?? preset.signals,
...(saved?.supportText ? { supportText: saved.supportText } : {}),
},
value: { meaning: "", signals: "" },
};
}
case "communication": {
const saved =
state.communicationMethodDetailsById?.[target.overrideKey] ??
communicationPresetFor(target.overrideKey);
return { groupKey: "communication", value: { ...saved } };
const saved = state.communicationMethodDetailsById?.[target.overrideKey];
return {
groupKey: "communication",
value: { ...(saved ?? emptyCommunicationDetails()) },
};
}
case "membership": {
const saved =
state.membershipMethodDetailsById?.[target.overrideKey] ??
membershipPresetFor(target.overrideKey);
return { groupKey: "membership", value: { ...saved } };
const saved = state.membershipMethodDetailsById?.[target.overrideKey];
return {
groupKey: "membership",
value: { ...(saved ?? emptyMembershipDetails()) },
};
}
case "decisionApproaches": {
const saved =
state.decisionApproachDetailsById?.[target.overrideKey] ??
decisionApproachPresetFor(target.overrideKey);
const saved = state.decisionApproachDetailsById?.[target.overrideKey];
const value = saved
? {
...saved,
applicableScope: [...saved.applicableScope],
selectedApplicableScope: [...saved.selectedApplicableScope],
}
: emptyDecisionApproachTextFields(
decisionApproachPresetFor(target.overrideKey),
);
return {
groupKey: "decisionApproaches",
value: {
...saved,
applicableScope: [...saved.applicableScope],
selectedApplicableScope: [...saved.selectedApplicableScope],
},
value,
};
}
case "conflictManagement": {
const saved =
state.conflictManagementDetailsById?.[target.overrideKey] ??
conflictManagementPresetFor(target.overrideKey);
const saved = state.conflictManagementDetailsById?.[target.overrideKey];
const value = saved
? {
...saved,
applicableScope: [...saved.applicableScope],
selectedApplicableScope: [...saved.selectedApplicableScope],
}
: emptyConflictManagementDetails();
return {
groupKey: "conflictManagement",
value: {
...saved,
applicableScope: [...saved.applicableScope],
selectedApplicableScope: [...saved.selectedApplicableScope],
},
value,
};
}
}
app/(app)/create/components/ModalTextAreaField.tsx
+64 -7
View File
@@ -1,10 +1,10 @@
"use client";
/**
* Shared "labelled text area" field used by every create flow modal section.
* Pairs an `InputLabel` with a `TextArea` set to the embedded appearance —
* matching the Figma "Control / Text Area" pattern. Section help marks stay
* off until tooltip behavior ships.
* Shared labelled text area for create-flow modal sections.
* Figma: "Step Modal" Text Area Section (23746:49780) when `generateDraftText`
* is set — tall compose field + Generate draft control. Otherwise the
* embedded Control / Text Area pattern.
*/
import { memo, useId } from "react";
@@ -26,9 +26,40 @@ export interface ModalTextAreaFieldProps {
placeholder?: string;
/** Disable the field. */
disabled?: boolean;
/**
* Catalog/preset copy inserted by Generate draft. When a non-empty string
* is passed, the Figma compose field + ghost control are shown.
*/
generateDraftText?: string;
/** Visible label for the Generate draft control. */
generateDraftLabel?: string;
/** Hint beside Generate draft. */
generateDraftHint?: string;
className?: string;
}
function PlusGlyph() {
return (
<svg
aria-hidden
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="shrink-0 text-[var(--color-content-default-brand-primary,#fefcc9)]"
>
<path
d="M7 3V11M3 7H11"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}
function ModalTextAreaFieldComponent({
label,
helpIcon = false,
@@ -37,12 +68,21 @@ function ModalTextAreaFieldComponent({
rows = 4,
placeholder,
disabled = false,
generateDraftText,
generateDraftLabel,
generateDraftHint,
className = "",
}: ModalTextAreaFieldProps) {
const labelId = useId();
const draftSource = generateDraftText?.trim() ?? "";
const showGenerateDraft =
draftSource.length > 0 && Boolean(generateDraftLabel);
const compose = showGenerateDraft;
return (
<div className={`flex flex-col gap-2 ${className}`.trim()}>
<div
className={`flex flex-col ${compose ? "gap-[12px]" : "gap-2"} ${className}`.trim()}
>
<div id={labelId}>
<InputLabel
label={label}
@@ -56,12 +96,29 @@ function ModalTextAreaFieldComponent({
value={value}
onChange={(e) => onChange(e.target.value)}
size="large"
rows={rows}
appearance="embedded"
rows={compose ? 12 : rows}
appearance={compose ? "compose" : "embedded"}
placeholder={placeholder}
disabled={disabled}
aria-labelledby={labelId}
/>
{showGenerateDraft && !disabled ? (
<div className="flex items-center">
<button
type="button"
onClick={() => onChange(draftSource)}
className="flex shrink-0 items-center justify-center gap-[var(--measures-spacing-050,2px)] overflow-clip rounded-[var(--measures-radius-full,9999px)] px-[var(--space-250,10px)] py-[var(--measures-spacing-200,8px)] text-x-small-label text-[color:var(--color-content-default-primary,white)] hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-default-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
>
<PlusGlyph />
{generateDraftLabel}
</button>
{generateDraftHint ? (
<p className="text-[length:var(--sizing-300,12px)] leading-normal text-[color:var(--color-content-default-tertiary,#b4b4b4)]">
{generateDraftHint}
</p>
) : null}
</div>
) : null}
</div>
);
}
app/(app)/create/components/methodEditFields/CommunicationMethodEditFields.tsx
+8
View File
@@ -17,6 +17,8 @@ export interface CommunicationMethodEditFieldsProps {
onChange: (_next: CommunicationMethodDetailEntry) => void;
/** When true, fields are not editable (view mode). */
readOnly?: boolean;
/** Catalog copy inserted by Generate draft. */
generateDraft?: CommunicationMethodDetailEntry;
}
const FIELDS: ReadonlyArray<keyof CommunicationMethodDetailEntry> = [
@@ -29,9 +31,11 @@ function CommunicationMethodEditFieldsComponent({
value,
onChange,
readOnly = false,
generateDraft,
}: CommunicationMethodEditFieldsProps) {
const m = useMessages();
const t = m.create.customRule.communication;
const draftField = m.create.draftField;
const patch = useCallback(
<K extends keyof CommunicationMethodDetailEntry>(
@@ -53,6 +57,10 @@ function CommunicationMethodEditFieldsComponent({
value={value[field]}
onChange={(v) => patch(field, v)}
disabled={readOnly}
placeholder={draftField.placeholder}
generateDraftText={generateDraft?.[field]}
generateDraftLabel={draftField.generateDraft}
generateDraftHint={draftField.generateDraftHint}
/>
))}
</div>
app/(app)/create/components/methodEditFields/ConflictManagementEditFields.tsx
+25
View File
@@ -38,15 +38,19 @@ export interface ConflictManagementEditFieldsProps {
value: ConflictManagementDetailEntry;
onChange: (_next: ConflictManagementDetailEntry) => void;
readOnly?: boolean;
/** Catalog copy inserted by Generate draft. */
generateDraft?: ConflictManagementDetailEntry;
}
function ConflictManagementEditFieldsComponent({
value,
onChange,
readOnly = false,
generateDraft,
}: ConflictManagementEditFieldsProps) {
const m = useMessages();
const t = m.create.customRule.conflictManagement;
const draftField = m.create.draftField;
const patch = useCallback(
<K extends keyof ConflictManagementDetailEntry>(
@@ -65,6 +69,10 @@ function ConflictManagementEditFieldsComponent({
value={value.corePrinciple}
onChange={(v) => patch("corePrinciple", v)}
disabled={readOnly}
placeholder={draftField.placeholder}
generateDraftText={generateDraft?.corePrinciple}
generateDraftLabel={draftField.generateDraft}
generateDraftHint={draftField.generateDraftHint}
/>
<ModalTextAreaField
label={t.sectionHeadings.applicableScope}
@@ -73,18 +81,35 @@ function ConflictManagementEditFieldsComponent({
onChange={(v) => onChange(conflictDetailWithScopeTextarea(value, v))}
rows={4}
disabled={readOnly}
generateDraftText={
generateDraft && generateDraft.applicableScope.length > 0
? generateDraft.applicableScope.join("\n")
: generateDraft
? conflictScopeTextareaValue(generateDraft)
: undefined
}
generateDraftLabel={draftField.generateDraft}
generateDraftHint={draftField.generateDraftHint}
/>
<ModalTextAreaField
label={t.sectionHeadings.processProtocol}
value={value.processProtocol}
onChange={(v) => patch("processProtocol", v)}
disabled={readOnly}
placeholder={draftField.placeholder}
generateDraftText={generateDraft?.processProtocol}
generateDraftLabel={draftField.generateDraft}
generateDraftHint={draftField.generateDraftHint}
/>
<ModalTextAreaField
label={t.sectionHeadings.restorationFallbacks}
value={value.restorationFallbacks}
onChange={(v) => patch("restorationFallbacks", v)}
disabled={readOnly}
placeholder={draftField.placeholder}
generateDraftText={generateDraft?.restorationFallbacks}
generateDraftLabel={draftField.generateDraft}
generateDraftHint={draftField.generateDraftHint}
/>
</div>
);
app/(app)/create/components/methodEditFields/CoreValueEditFields.tsx
+12
View File
@@ -17,15 +17,19 @@ export interface CoreValueEditFieldsProps {
onChange: (_next: CoreValueDetailEntry) => void;
/** Disable meaning/signals. Facet and final-review callers omit this so fields stay editable on open. */
readOnly?: boolean;
/** Catalog copy inserted by Generate draft. */
generateDraft?: CoreValueDetailEntry;
}
function CoreValueEditFieldsComponent({
value,
onChange,
readOnly = false,
generateDraft,
}: CoreValueEditFieldsProps) {
const m = useMessages();
const t = m.create.customRule.coreValues.detailModal;
const draftField = m.create.draftField;
const patch = useCallback(
<K extends keyof CoreValueDetailEntry>(
@@ -45,6 +49,10 @@ function CoreValueEditFieldsComponent({
onChange={(v) => patch("meaning", v)}
rows={4}
disabled={readOnly}
placeholder={draftField.placeholder}
generateDraftText={generateDraft?.meaning}
generateDraftLabel={draftField.generateDraft}
generateDraftHint={draftField.generateDraftHint}
/>
<ModalTextAreaField
label={t.signalsLabel}
@@ -52,6 +60,10 @@ function CoreValueEditFieldsComponent({
onChange={(v) => patch("signals", v)}
rows={4}
disabled={readOnly}
placeholder={draftField.placeholder}
generateDraftText={generateDraft?.signals}
generateDraftLabel={draftField.generateDraft}
generateDraftHint={draftField.generateDraftHint}
/>
</div>
);
app/(app)/create/components/methodEditFields/DecisionApproachEditFields.tsx
+16
View File
@@ -19,6 +19,8 @@ export interface DecisionApproachEditFieldsProps {
value: DecisionApproachDetailEntry;
onChange: (_next: DecisionApproachDetailEntry) => void;
readOnly?: boolean;
/** Catalog copy inserted by Generate draft on text fields. */
generateDraft?: DecisionApproachDetailEntry;
}
const CONSENSUS_LEVEL_MIN = 0;
@@ -29,9 +31,11 @@ function DecisionApproachEditFieldsComponent({
value,
onChange,
readOnly = false,
generateDraft,
}: DecisionApproachEditFieldsProps) {
const m = useMessages();
const t = m.create.customRule.decisionApproaches;
const draftField = m.create.draftField;
const scopes = useMemo(
() => withDecisionApproachKeyResourceScopes(value.applicableScope),
@@ -55,6 +59,10 @@ function DecisionApproachEditFieldsComponent({
value={value.corePrinciple}
onChange={(v) => patch("corePrinciple", v)}
disabled={readOnly}
placeholder={draftField.placeholder}
generateDraftText={generateDraft?.corePrinciple}
generateDraftLabel={draftField.generateDraft}
generateDraftHint={draftField.generateDraftHint}
/>
<ApplicableScopeField
label={t.sectionHeadings.applicableScope}
@@ -79,6 +87,10 @@ function DecisionApproachEditFieldsComponent({
value={value.stepByStepInstructions}
onChange={(v) => patch("stepByStepInstructions", v)}
disabled={readOnly}
placeholder={draftField.placeholder}
generateDraftText={generateDraft?.stepByStepInstructions}
generateDraftLabel={draftField.generateDraft}
generateDraftHint={draftField.generateDraftHint}
/>
{value.consensusLevel !== undefined ? (
<IncrementerBlock
@@ -100,6 +112,10 @@ function DecisionApproachEditFieldsComponent({
value={value.objectionsDeadlocks}
onChange={(v) => patch("objectionsDeadlocks", v)}
disabled={readOnly}
placeholder={draftField.placeholder}
generateDraftText={generateDraft?.objectionsDeadlocks}
generateDraftLabel={draftField.generateDraft}
generateDraftHint={draftField.generateDraftHint}
/>
</div>
);
app/(app)/create/components/methodEditFields/MembershipMethodEditFields.tsx
+8
View File
@@ -16,6 +16,8 @@ export interface MembershipMethodEditFieldsProps {
value: MembershipMethodDetailEntry;
onChange: (_next: MembershipMethodDetailEntry) => void;
readOnly?: boolean;
/** Catalog copy inserted by Generate draft. */
generateDraft?: MembershipMethodDetailEntry;
}
const FIELDS: ReadonlyArray<keyof MembershipMethodDetailEntry> = [
@@ -28,9 +30,11 @@ function MembershipMethodEditFieldsComponent({
value,
onChange,
readOnly = false,
generateDraft,
}: MembershipMethodEditFieldsProps) {
const m = useMessages();
const t = m.create.customRule.membership;
const draftField = m.create.draftField;
const patch = useCallback(
<K extends keyof MembershipMethodDetailEntry>(
@@ -52,6 +56,10 @@ function MembershipMethodEditFieldsComponent({
value={value[field]}
onChange={(v) => patch(field, v)}
disabled={readOnly}
placeholder={draftField.placeholder}
generateDraftText={generateDraft?.[field]}
generateDraftLabel={draftField.generateDraft}
generateDraftHint={draftField.generateDraftHint}
/>
))}
</div>
app/(app)/create/screens/card/CommunicationMethodsScreen.tsx
+3 -2
View File
@@ -29,7 +29,7 @@ import InlineTextButton from "../../../../components/buttons/InlineTextButton";
import { CommunicationMethodEditFields } from "../../components/methodEditFields";
import CustomMethodCardWizard from "../../components/CustomMethodCardWizard";
import { uploadCreateFlowFile } from "../../../../../lib/create/uploadToServer";
import { communicationPresetFor } from "../../../../../lib/create/finalReviewChipPresets";
import { communicationPresetFor, emptyCommunicationDetails } from "../../../../../lib/create/finalReviewChipPresets";
import type { CustomMethodCardFieldBlock } from "../../../../../lib/create/customMethodCardFieldBlocks";
import { mergePresetMethodsWithCustom } from "../../../../../lib/create/mergePresetMethodsWithCustom";
import { moveFacetSelectionIdToFront } from "../../../../../lib/create/methodCardSelectionOrder";
@@ -146,7 +146,7 @@ export function CommunicationMethodsScreen() {
if (saved) {
return { ...saved };
}
return communicationPresetFor(id);
return emptyCommunicationDetails();
},
[state.communicationMethodDetailsById],
);
@@ -756,6 +756,7 @@ export function CommunicationMethodsScreen() {
<CommunicationMethodEditFields
value={pendingDraft}
onChange={handleDraftChange}
generateDraft={communicationPresetFor(pendingCardId)}
/>
)
) : null}
app/(app)/create/screens/card/ConflictManagementScreen.tsx
+3 -2
View File
@@ -26,7 +26,7 @@ import InlineTextButton from "../../../../components/buttons/InlineTextButton";
import { ConflictManagementEditFields } from "../../components/methodEditFields";
import CustomMethodCardWizard from "../../components/CustomMethodCardWizard";
import { uploadCreateFlowFile } from "../../../../../lib/create/uploadToServer";
import { conflictManagementPresetFor } from "../../../../../lib/create/finalReviewChipPresets";
import { conflictManagementPresetFor, emptyConflictManagementDetails } from "../../../../../lib/create/finalReviewChipPresets";
import type { CustomMethodCardFieldBlock } from "../../../../../lib/create/customMethodCardFieldBlocks";
import { mergePresetMethodsWithCustom } from "../../../../../lib/create/mergePresetMethodsWithCustom";
import { moveFacetSelectionIdToFront } from "../../../../../lib/create/methodCardSelectionOrder";
@@ -147,7 +147,7 @@ export function ConflictManagementScreen() {
selectedApplicableScope: [...saved.selectedApplicableScope],
};
}
return conflictManagementPresetFor(id);
return emptyConflictManagementDetails();
},
[state.conflictManagementDetailsById],
);
@@ -757,6 +757,7 @@ export function ConflictManagementScreen() {
<ConflictManagementEditFields
value={pendingDraft}
onChange={handleDraftChange}
generateDraft={conflictManagementPresetFor(pendingCardId)}
/>
)
) : null}
app/(app)/create/screens/card/MembershipMethodsScreen.tsx
+3 -2
View File
@@ -27,7 +27,7 @@ import InlineTextButton from "../../../../components/buttons/InlineTextButton";
import { MembershipMethodEditFields } from "../../components/methodEditFields";
import CustomMethodCardWizard from "../../components/CustomMethodCardWizard";
import { uploadCreateFlowFile } from "../../../../../lib/create/uploadToServer";
import { membershipPresetFor } from "../../../../../lib/create/finalReviewChipPresets";
import { membershipPresetFor, emptyMembershipDetails } from "../../../../../lib/create/finalReviewChipPresets";
import type { CustomMethodCardFieldBlock } from "../../../../../lib/create/customMethodCardFieldBlocks";
import { mergePresetMethodsWithCustom } from "../../../../../lib/create/mergePresetMethodsWithCustom";
import { moveFacetSelectionIdToFront } from "../../../../../lib/create/methodCardSelectionOrder";
@@ -144,7 +144,7 @@ export function MembershipMethodsScreen() {
if (saved) {
return { ...saved };
}
return membershipPresetFor(id);
return emptyMembershipDetails();
},
[state.membershipMethodDetailsById],
);
@@ -750,6 +750,7 @@ export function MembershipMethodsScreen() {
<MembershipMethodEditFields
value={pendingDraft}
onChange={handleDraftChange}
generateDraft={membershipPresetFor(pendingCardId)}
/>
)
) : null}
app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx
+3 -2
View File
@@ -33,7 +33,7 @@ import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoCo
import { DecisionApproachEditFields } from "../../components/methodEditFields";
import CustomMethodCardWizard from "../../components/CustomMethodCardWizard";
import { uploadCreateFlowFile } from "../../../../../lib/create/uploadToServer";
import { decisionApproachPresetFor } from "../../../../../lib/create/finalReviewChipPresets";
import { decisionApproachPresetFor, emptyDecisionApproachTextFields } from "../../../../../lib/create/finalReviewChipPresets";
import {
applyDecisionApproachKeyResources,
decisionApproachKeyResourceCheckboxIds,
@@ -186,7 +186,7 @@ export function DecisionApproachesScreen() {
if (saved) {
return structuredClone(saved);
}
return decisionApproachPresetFor(id);
return emptyDecisionApproachTextFields(decisionApproachPresetFor(id));
},
[state.decisionApproachDetailsById],
);
@@ -840,6 +840,7 @@ export function DecisionApproachesScreen() {
<DecisionApproachEditFields
value={pendingDraft}
onChange={handleDraftChange}
generateDraft={decisionApproachPresetFor(pendingCardId)}
/>
)
) : null}
app/(app)/create/screens/select/CoreValuesSelectScreen.tsx
+7 -6
View File
@@ -183,16 +183,16 @@ export function CoreValuesSelectScreen() {
);
const getInitialTexts = useCallback(
(chipId: string, valueLabel: string): CoreValueDetailEntry => {
(chipId: string, _valueLabel: string): CoreValueDetailEntry => {
const saved = state.coreValueDetailsByChipId?.[chipId];
const preset = getPresetTexts(valueLabel);
if (!saved) return EMPTY_DETAIL;
return {
meaning: saved?.meaning ?? preset.meaning,
signals: saved?.signals ?? preset.signals,
...(saved?.supportText ? { supportText: saved.supportText } : {}),
meaning: saved.meaning,
signals: saved.signals,
...(saved.supportText ? { supportText: saved.supportText } : {}),
};
},
[state.coreValueDetailsByChipId, getPresetTexts],
[state.coreValueDetailsByChipId],
);
const openModal = useCallback(
@@ -799,6 +799,7 @@ export function CoreValuesSelectScreen() {
<CoreValueEditFields
value={draft}
onChange={handleDraftChange}
generateDraft={getPresetTexts(modalChipLabel)}
/>
)}
</Create>
app/components/controls/Chip/Chip.container.tsx
+1 -1
View File
@@ -93,7 +93,7 @@ const ChipContainer = memo<ChipProps>(
onInputChange={isCustom ? setInputValue : undefined}
onInputKeyDown={isCustom ? handleKeyDown : undefined}
inputRef={isCustom ? inputRef : undefined}
ariaLabel={ariaLabel}
ariaLabel={ariaLabel ?? (isCustom ? undefined : label)}
confirmAriaLabel={t("chipConfirm")}
typeToAddPlaceholder={t("chipTypeToAdd")}
closeAriaLabel={t("chipClose")}
app/components/controls/Chip/Chip.view.tsx
+1 -1
View File
@@ -156,7 +156,7 @@ function ChipView({
};
const sharedA11y = {
"aria-label": ariaLabel,
...(ariaLabel ? { "aria-label": ariaLabel } : {}),
...(isToggle ? { "aria-pressed": isSelected } : {}),
};
app/components/controls/MultiSelect/MultiSelect.container.tsx
+2
View File
@@ -46,6 +46,8 @@ const MultiSelectContainer = memo<MultiSelectProps>(
addButtonAriaLabel={
addButtonText || t("multiSelectAddFallback")
}
chipSelectAriaLabel={t("chipSelect")}
chipDeselectAriaLabel={t("chipDeselect")}
formHeader={formHeader}
onCustomChipConfirm={onCustomChipConfirm}
onCustomChipClose={onCustomChipClose}
app/components/controls/MultiSelect/MultiSelect.types.ts
+2
View File
@@ -85,6 +85,8 @@ export interface MultiSelectViewProps {
addButton: boolean;
addButtonText?: string;
addButtonAriaLabel: string;
chipSelectAriaLabel: string;
chipDeselectAriaLabel: string;
formHeader: boolean;
onCustomChipConfirm?: (chipId: string, value: string) => void;
onCustomChipClose?: (chipId: string) => void;
app/components/controls/MultiSelect/MultiSelect.view.tsx
+10
View File
@@ -16,6 +16,8 @@ function MultiSelectView({
addButton,
addButtonText,
addButtonAriaLabel,
chipSelectAriaLabel,
chipDeselectAriaLabel,
formHeader = true,
onCustomChipConfirm,
onCustomChipClose,
@@ -88,6 +90,14 @@ function MultiSelectView({
palette={palette}
size={chipSize}
disabled={chipDisabled}
ariaLabel={
isCustom || !option.label
? undefined
: (isSelected
? chipDeselectAriaLabel
: chipSelectAriaLabel
).replace("{label}", option.label)
}
onClick={() => {
if (!isCustom && !chipDisabled && onChipClick) {
onChipClick(option.id);
app/components/controls/TextArea/TextArea.container.tsx
+17 -2
View File
@@ -86,6 +86,21 @@ const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
textarea: string;
label: string;
} => {
if (appearance === "compose") {
if (disabled) {
return {
textarea:
"border-0 bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-tertiary,#b4b4b4)] cursor-not-allowed opacity-60 min-h-[356px] h-[356px] px-[var(--measures-spacing-300,12px)] py-[var(--space-250,10px)]",
label: "text-[var(--color-content-default-secondary)]",
};
}
return {
textarea:
"border-0 bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] placeholder:text-[var(--color-content-default-tertiary,#b4b4b4)] min-h-[356px] h-[356px] px-[var(--measures-spacing-300,12px)] py-[var(--space-250,10px)] focus:outline-none focus:ring-0",
label: "text-[var(--color-content-default-secondary)]",
};
}
if (appearance === "embedded") {
if (disabled) {
return {
@@ -161,8 +176,8 @@ const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
const textareaClasses = `
scrollbar-design w-full transition-all duration-200 ease-in-out resize-none
${appearance === "embedded" ? "rounded-[var(--radius-300,12px)]" : "border"}
${currentSize.textarea}
${appearance === "embedded" || appearance === "compose" ? "rounded-[var(--radius-300,12px)]" : "border"}
${appearance === "compose" ? "text-medium-paragraph" : currentSize.textarea}
${stateStyles.textarea}
${className}
`.trim();
app/components/controls/TextArea/TextArea.types.ts
+8 -4
View File
@@ -1,9 +1,12 @@
import type { InputStateValue } from "../../../../lib/propNormalization";
import type {
InputStateValue,
TextAreaAppearanceValue,
} from "../../../../lib/propNormalization";
export type TextAreaSizeValue = "small" | "medium" | "large";
export type TextAreaLabelVariantValue = "default" | "horizontal";
export type TextAreaAppearanceValue = "default" | "embedded";
export type { TextAreaAppearanceValue };
export interface TextAreaProps extends Omit<
React.TextareaHTMLAttributes<HTMLTextAreaElement>,
@@ -49,7 +52,8 @@ export interface TextAreaProps extends Omit<
/**
* Visual appearance. "embedded" matches Create modal sections (Figma 20736-12668):
* borderless, darker grey background, tertiary text in default (primary on
* focus). "default" is the standard bordered input.
* focus). "compose" is the tall empty creation field (Figma 23746:49780).
* "default" is the standard bordered input.
* @default "default"
*/
appearance?: TextAreaAppearanceValue;
@@ -79,7 +83,7 @@ export interface TextAreaViewProps {
textHint?: boolean | string;
formHeader?: boolean;
showHelpIcon?: boolean;
appearance?: "default" | "embedded";
appearance?: TextAreaAppearanceValue;
helpIconAlt: string;
hintDefault: string;
}
lib/create/finalReviewChipPresets.ts
+38 -9
View File
@@ -14,11 +14,10 @@ import type {
} from "../../app/(app)/create/types";
/**
* Per-method preset defaults shipped in `messages/en/create/customRule/*.json`.
* Used to seed the final-review edit modal when the user has no saved
* override yet, and to merge onto overrides when emitting the published rule
* document so every method carries a complete section payload even if the
* author only edited a subset of fields.
* Catalog copy for method/value sections. Generate draft inserts these into
* empty creation-modal fields. Publish still merges them onto saved overrides
* so every method carries a complete section payload when the author only
* edited a subset of fields.
*/
type CustomRuleMethodRow = {
id: string;
@@ -96,6 +95,10 @@ export function communicationPresetFor(
};
}
export function emptyCommunicationDetails(): CommunicationMethodDetailEntry {
return { corePrinciple: "", logisticsAdmin: "", codeOfConduct: "" };
}
export function membershipPresetFor(id: string): MembershipMethodDetailEntry {
const method = findMethod(membershipMessages, id);
const s = method?.sections ?? {};
@@ -106,6 +109,10 @@ export function membershipPresetFor(id: string): MembershipMethodDetailEntry {
};
}
export function emptyMembershipDetails(): MembershipMethodDetailEntry {
return { eligibility: "", joiningProcess: "", expectations: "" };
}
/** Default consensus level used when a **catalog** preset omits a value. */
export const DECISION_CONSENSUS_LEVEL_DEFAULT = 75;
@@ -132,6 +139,20 @@ export function decisionApproachPresetFor(
return entry;
}
/** Catalog scopes/consensus kept; text fields start empty for Generate draft. */
export function emptyDecisionApproachTextFields(
preset: DecisionApproachDetailEntry,
): DecisionApproachDetailEntry {
return {
...preset,
corePrinciple: "",
stepByStepInstructions: "",
objectionsDeadlocks: "",
applicableScope: [...preset.applicableScope],
selectedApplicableScope: [...preset.selectedApplicableScope],
};
}
export function conflictManagementPresetFor(
id: string,
): ConflictManagementDetailEntry {
@@ -146,11 +167,19 @@ export function conflictManagementPresetFor(
};
}
export function emptyConflictManagementDetails(): ConflictManagementDetailEntry {
return {
corePrinciple: "",
applicableScope: [],
selectedApplicableScope: [],
processProtocol: "",
restorationFallbacks: "",
};
}
/**
* Preset meaning/signals for a core value chip. Mirrors `CoreValuesSelectScreen`'s
* `getInitialTexts` so the final-review edit modal opens with the same
* preset copy the select screen would have shown — without requiring the
* user to have opened the select-screen modal first.
* Preset meaning/signals for a core value chip. Used by Generate draft and
* by publish/display merge when the author has not saved an override.
*
* Lookup order:
* 1. Numeric chip id → 1-based index into `coreValues.json` `values[]`
lib/create/methodCardWizardPrefill.ts
+7 -45
View File
@@ -89,46 +89,6 @@ function clampPercent(n: number): number {
return Math.min(100, Math.max(1, Math.round(n)));
}
function facetPrefillHasContent(prefill: MethodCardWizardFacetPrefill): boolean {
switch (prefill.group) {
case "communication":
return (
hasTrimmedText(prefill.draft.corePrinciple) ||
hasTrimmedText(prefill.draft.logisticsAdmin) ||
hasTrimmedText(prefill.draft.codeOfConduct)
);
case "membership":
return (
hasTrimmedText(prefill.draft.eligibility) ||
hasTrimmedText(prefill.draft.joiningProcess) ||
hasTrimmedText(prefill.draft.expectations)
);
case "decisionApproaches":
return (
hasTrimmedText(prefill.draft.corePrinciple) ||
hasTrimmedText(prefill.draft.stepByStepInstructions) ||
hasTrimmedText(prefill.draft.objectionsDeadlocks) ||
prefill.draft.applicableScope.length > 0 ||
prefill.draft.selectedApplicableScope.length > 0
);
case "conflictManagement":
return (
hasTrimmedText(prefill.draft.corePrinciple) ||
hasTrimmedText(prefill.draft.processProtocol) ||
hasTrimmedText(prefill.draft.restorationFallbacks) ||
formatConflictApplicableScopeForTextarea(
prefill.draft.selectedApplicableScope,
prefill.draft.applicableScope,
).trim().length > 0
);
case "coreValues":
return (
hasTrimmedText(prefill.draft.meaning) ||
hasTrimmedText(prefill.draft.signals)
);
}
}
function mapFacetPrefillToWizardFieldBlocks(
prefill: MethodCardWizardFacetPrefill,
): CustomMethodCardFieldBlock[] {
@@ -198,7 +158,11 @@ function mapFacetPrefillToWizardFieldBlocks(
);
if (
typeof prefill.draft.consensusLevel === "number" &&
facetPrefillHasContent(prefill)
(hasTrimmedText(prefill.draft.corePrinciple) ||
hasTrimmedText(prefill.draft.stepByStepInstructions) ||
hasTrimmedText(prefill.draft.objectionsDeadlocks) ||
prefill.draft.applicableScope.length > 0 ||
prefill.draft.selectedApplicableScope.length > 0)
) {
blocks.push({
kind: "proportion",
@@ -260,14 +224,12 @@ function mapFacetPrefillToWizardFieldBlocks(
/**
* Map a method card's facet editors onto wizard field blocks so Customize
* can show and edit the same sections on step 3.
* can show and edit the same sections on step 3. Empty copy still yields
* the catalog headings so authors can fill them in the wizard.
*/
export function facetDetailsToWizardFieldBlocks(
prefill: MethodCardWizardFacetPrefill,
): CustomMethodCardFieldBlock[] {
if (!facetPrefillHasContent(prefill)) {
return [];
}
return mapFacetPrefillToWizardFieldBlocks(prefill);
}
lib/propNormalization.ts
+5 -1
View File
@@ -178,7 +178,11 @@ export type ToggleGroupPositionValue =
export const LABEL_VARIANT_OPTIONS = ["default", "horizontal"] as const;
export type LabelVariantValue = (typeof LABEL_VARIANT_OPTIONS)[number];
export const TEXT_AREA_APPEARANCE_OPTIONS = ["default", "embedded"] as const;
export const TEXT_AREA_APPEARANCE_OPTIONS = [
"default",
"embedded",
"compose",
] as const;
export type TextAreaAppearanceValue =
(typeof TEXT_AREA_APPEARANCE_OPTIONS)[number];
messages/en/components/controlsChrome.json
+2
View File
@@ -5,6 +5,8 @@
"chipConfirm": "Confirm",
"chipTypeToAdd": "Type to add",
"chipClose": "Close",
"chipSelect": "Select {label}",
"chipDeselect": "Deselect {label}",
"selectPlaceholder": "Choose an option",
"selectAriaLabel": "Select an option",
"multiSelectAddDefault": "Add organization type",
messages/en/create/draftField.json
+6
View File
@@ -0,0 +1,6 @@
{
"_comment": "Generate-draft control on creation-modal text fields (Figma Step Modal 23746:49780).",
"generateDraft": "Generate draft",
"generateDraftHint": "Get a first draft for this section",
"placeholder": "Describe how this method should work"
}
messages/en/index.ts
+2
View File
@@ -69,6 +69,7 @@ import createTopNav from "./create/topNav.json";
import createDraftHydration from "./create/draftHydration.json";
import createTemplateReview from "./create/templateReview.json";
import createUpload from "./create/upload.json";
import createDraftField from "./create/draftField.json";
export default {
common,
@@ -138,6 +139,7 @@ export default {
draftHydration: createDraftHydration,
templateReview: createTemplateReview,
upload: createUpload,
draftField: createDraftField,
},
navigation,
metadata,
stories/create-flow/ModalTextAreaField.stories.js
+20 -1
View File
@@ -9,7 +9,7 @@ export default {
docs: {
description: {
component:
"Shared 'labelled text area' field used by every create-flow modal section. Pairs `InputLabel` with a `TextArea` set to the `embedded` appearance. Section help marks stay off until tooltip behavior ships.",
"Shared labelled text area for create-flow modal sections. With `generateDraftText`, matches Figma Step Modal (23746:49780): tall compose field plus Generate draft.",
},
},
},
@@ -58,6 +58,25 @@ export const WithValue = {
},
};
export const GenerateDraft = {
render: () => {
const [value, setValue] = React.useState("");
return (
<div className="w-[520px]">
<ModalTextAreaField
label="What does this value mean to your group?"
value={value}
onChange={setValue}
placeholder="Describe how this method should work"
generateDraftText="We design spaces and tools that everyone can use regardless of ability or background."
generateDraftLabel="Generate draft"
generateDraftHint="Get a first draft for this section"
/>
</div>
);
},
};
export const Disabled = {
render: () => (
<div className="w-[520px]">
tests/components/Chip.test.tsx
+7
View File
@@ -34,6 +34,13 @@ const config: ComponentTestSuiteConfig<Props> = {
describe("Chip", () => {
componentTestSuite<Props>(config);
it("uses the visible label as the accessible name when ariaLabel is omitted", () => {
render(<Chip label="Worker cooperative" state="unselected" />);
expect(
screen.getByRole("button", { name: "Worker cooperative" }),
).toHaveAttribute("aria-label", "Worker cooperative");
});
it("exposes aria-pressed false when unselected", () => {
render(<Chip label="Worker cooperative" state="unselected" />);
const chip = screen.getByRole("button", { name: "Worker cooperative" });
tests/components/CommunicationMethodsScreenPersistence.test.tsx
+16 -4
View File
@@ -63,7 +63,7 @@ function ScreenWithStateProbe({
* and `buildPublishPayload` for the read side.
*/
describe("CommunicationMethodsScreen — Add Platform persistence", () => {
it("seeds the modal from preset and persists edits + selection on Confirm", async () => {
it("starts empty and Generate draft inserts the catalog preset", async () => {
let latest: CreateFlowState = {};
render(
<ScreenWithStateProbe
@@ -82,9 +82,16 @@ describe("CommunicationMethodsScreen — Add Platform persistence", () => {
const textboxes = within(dialog).getAllByRole("textbox");
expect(textboxes.length).toBe(3);
const corePrincipleField = textboxes[0] as HTMLTextAreaElement;
// Preset corePrinciple must seed into the first body textarea so the user
// edits a real starting point rather than an empty field.
expect(corePrincipleField.value.length).toBeGreaterThan(0);
expect(corePrincipleField.value).toBe("");
const generateButtons = within(dialog).getAllByRole("button", {
name: "Generate draft",
});
expect(generateButtons.length).toBe(3);
fireEvent.click(generateButtons[0]);
expect(corePrincipleField.value).toBe(
communicationPresetFor("signal").corePrinciple,
);
fireEvent.change(corePrincipleField, { target: { value: "Custom principle" } });
fireEvent.click(
@@ -466,6 +473,11 @@ describe("CommunicationMethodsScreen — Add Platform persistence", () => {
screen.getAllByRole("button", { name: /Signal: Encrypted messaging/ })[0],
);
const dialog = await screen.findByRole("dialog");
for (const button of within(dialog).getAllByRole("button", {
name: "Generate draft",
})) {
fireEvent.click(button);
}
fireEvent.click(within(dialog).getByRole("button", { name: "More options" }));
fireEvent.click(screen.getByRole("menuitem", { name: "Customize" }));
tests/components/CommunityStructureSelectScreen.test.tsx
+14
View File
@@ -16,4 +16,18 @@ describe("CommunityStructureSelectScreen", () => {
).toBeInTheDocument();
expect(screen.queryByAltText("Help")).not.toBeInTheDocument();
});
it("gives structure chips Select/Deselect accessible names", () => {
renderWithProviders(<CommunityStructureSelectScreen />);
expect(
screen.getByRole("button", { name: "Select Worker cooperative" }),
).toBeInTheDocument();
expect(
screen.getByRole("button", { name: "Select Local" }),
).toBeInTheDocument();
expect(
screen.getByRole("button", { name: "Select Early stage" }),
).toBeInTheDocument();
});
});
tests/components/CoreValuesSelectScreen.test.tsx
+25 -7
View File
@@ -41,6 +41,26 @@ describe("CoreValuesSelectScreen", () => {
).not.toBeInTheDocument();
});
it("gives value chips Select/Deselect accessible names", () => {
renderWithProviders(<CoreValuesSelectScreen />);
expect(
screen.getByRole("button", { name: "Select Accessibility" }),
).toBeInTheDocument();
});
it("starts the value modal empty and Generate draft inserts catalog copy", async () => {
renderWithProviders(<CoreValuesSelectScreen />);
fireEvent.click(screen.getByRole("button", { name: "Select Accessibility" }));
const dialog = await screen.findByRole("dialog");
const fields = within(dialog).getAllByRole("textbox") as HTMLTextAreaElement[];
expect(fields[0].value).toBe("");
expect(fields[1].value).toBe("");
fireEvent.click(
within(dialog).getAllByRole("button", { name: "Generate draft" })[0],
);
expect(fields[0].value).toMatch(/everyone can use/i);
});
it("closes a pending value without confirm when fields are unchanged", async () => {
renderWithProviders(<CoreValuesSelectScreen />);
fireEvent.click(screen.getByText("Accessibility"));
@@ -289,12 +309,10 @@ describe("CoreValuesSelectScreen", () => {
*/
function countCustomChips(label: string) {
return screen
.queryAllByRole("button", { name: label })
.filter(
(el) =>
!el.closest('[role="dialog"]') &&
(el.getAttribute("aria-label") ?? "") !== `Remove ${label}`,
).length;
.queryAllByRole("button", {
name: new RegExp(`^(Select|Deselect) ${label}$`),
})
.filter((el) => !el.closest('[role="dialog"]')).length;
}
async function completeAddValueWizard(label: string) {
@@ -417,7 +435,7 @@ describe("CoreValuesSelectScreen", () => {
),
).toBeInTheDocument();
expect(
screen.getByRole("button", { name: "Anti-oppression" }),
screen.getByRole("button", { name: "Select Anti-oppression" }),
).toBeDisabled();
expect(screen.getByRole("button", { name: "Add value" })).toBeDisabled();
expect(screen.getByRole("button", { name: /^add$/i })).toBeDisabled();
tests/components/FinalReviewPage.test.tsx
+29 -25
View File
@@ -12,6 +12,10 @@ import { FinalReviewScreen } from "../../app/(app)/create/screens/review/FinalRe
import { useCreateFlow } from "../../app/(app)/create/context/CreateFlowContext";
import type { CreateFlowState } from "../../app/(app)/create/types";
function catalogChipName(label: string) {
return new RegExp(`^(Select|Deselect) ${label}$`);
}
async function confirmDiscardCustomizeEdits() {
fireEvent.click(
await screen.findByRole("button", { name: "Discard" }),
@@ -232,7 +236,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
it("opens the chip modal when a chip is clicked, matching the preset copy", async () => {
render(<FinalReviewWithCustomizeSelections />);
const signalChip = await screen.findByRole("button", { name: "Signal" });
const signalChip = await screen.findByRole("button", { name: catalogChipName("Signal") });
fireEvent.click(signalChip);
// Modal subtitle is the `supportText` from communication.json for the
@@ -273,7 +277,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
);
fireEvent.click(
await screen.findByRole("button", { name: "Video Meetings" }),
await screen.findByRole("button", { name: catalogChipName("Video Meetings") }),
);
const dialog = await screen.findByRole("dialog");
expect(within(dialog).getAllByRole("textbox")).toHaveLength(3);
@@ -287,7 +291,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
it("method chip modal kebab offers Customize but not Duplicate", async () => {
render(<FinalReviewWithCustomizeSelections />);
fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
const dialog = await screen.findByRole("dialog");
fireEvent.click(
within(dialog).getByRole("button", { name: /more options/i }),
@@ -317,7 +321,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
}
render(<CoreValuesHarness />);
fireEvent.click(
await screen.findByRole("button", { name: "Accessibility" }),
await screen.findByRole("button", { name: catalogChipName("Accessibility") }),
);
const dialog = await screen.findByRole("dialog");
fireEvent.click(
@@ -348,7 +352,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
}
render(<CoreValuesHarness />);
fireEvent.click(
await screen.findByRole("button", { name: "Accessibility" }),
await screen.findByRole("button", { name: catalogChipName("Accessibility") }),
);
const dialog = await screen.findByRole("dialog");
fireEvent.click(
@@ -366,7 +370,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
it("opens method chip modal editable, with Save disabled until a field changes", async () => {
render(<FinalReviewWithCustomizeSelections />);
fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
const dialog = await screen.findByRole("dialog");
const saveButton = within(dialog).getByRole("button", { name: "Save" });
@@ -400,7 +404,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
}
render(<CoreValuesHarness />);
const chip = await screen.findByRole("button", { name: "Accessibility" });
const chip = await screen.findByRole("button", { name: catalogChipName("Accessibility") });
fireEvent.click(chip);
await waitFor(() => {
@@ -430,7 +434,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
render(<CoreValuesHarness />);
fireEvent.click(
await screen.findByRole("button", { name: "Accessibility" }),
await screen.findByRole("button", { name: catalogChipName("Accessibility") }),
);
const dialog = await screen.findByRole("dialog");
expect(
@@ -468,7 +472,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
render(<UseWithoutChangesHarness />);
fireEvent.click(
await screen.findByRole("button", { name: "Accessibility" }),
await screen.findByRole("button", { name: catalogChipName("Accessibility") }),
);
const dialog = await screen.findByRole("dialog");
expect(
@@ -514,7 +518,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
);
fireEvent.click(
await screen.findByRole("button", { name: "Accessibility" }),
await screen.findByRole("button", { name: catalogChipName("Accessibility") }),
);
const valuesDialog = await screen.findByRole("dialog");
expect(within(valuesDialog).getAllByRole("textbox").length).toBeGreaterThan(
@@ -542,7 +546,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
/>,
);
fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
const methodDialog = await screen.findByRole("dialog");
expect(within(methodDialog).getAllByRole("textbox").length).toBeGreaterThan(
0,
@@ -567,7 +571,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
/>,
);
fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
const dialog = await screen.findByRole("dialog");
expect(
within(dialog).getByRole("button", { name: "Remove" }),
@@ -595,7 +599,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
/>,
);
fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
const dialog = await screen.findByRole("dialog");
fireEvent.click(within(dialog).getByRole("button", { name: "Remove" }));
await waitFor(() => {
@@ -633,7 +637,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
);
void latest;
fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
const dialog = await screen.findByRole("dialog");
const saveButton = within(dialog).getByRole("button", { name: "Save" });
expect(saveButton).toBeDisabled();
@@ -663,7 +667,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
/>,
);
fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
const dialog = await screen.findByRole("dialog");
const principleField = within(dialog).getByRole("textbox", {
name: /core principle/i,
@@ -691,7 +695,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
/>,
);
fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
const dialog = await screen.findByRole("dialog");
const principleField = within(dialog).getByRole("textbox", {
name: /core principle/i,
@@ -719,7 +723,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
/>,
);
fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
const dialog = await screen.findByRole("dialog");
expect(dispatchBeforeUnload()).toBe(false);
const principleField = within(dialog).getByRole("textbox", {
@@ -750,7 +754,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
);
fireEvent.click(
await screen.findByRole("button", { name: "Custom Comm" }),
await screen.findByRole("button", { name: catalogChipName("Custom Comm") }),
);
const dialog = await screen.findByRole("dialog");
expect(
@@ -784,9 +788,9 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
);
expect(
await screen.findByRole("button", { name: "Garden IRC" }),
await screen.findByRole("button", { name: catalogChipName("Garden IRC") }),
).toBeInTheDocument();
expect(screen.getByRole("button", { name: "Signal" })).toBeInTheDocument();
expect(screen.getByRole("button", { name: catalogChipName("Signal") })).toBeInTheDocument();
});
it("shows editable field blocks for user-authored communication chips when configured", async () => {
@@ -818,7 +822,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
);
fireEvent.click(
await screen.findByRole("button", { name: "Custom Comm" }),
await screen.findByRole("button", { name: catalogChipName("Custom Comm") }),
);
const dialog = await screen.findByRole("dialog");
expect(
@@ -861,7 +865,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
);
fireEvent.click(
await screen.findByRole("button", { name: "Custom Comm" }),
await screen.findByRole("button", { name: catalogChipName("Custom Comm") }),
);
const dialog = await screen.findByRole("dialog");
const notesField = within(dialog).getByRole("textbox", { name: /notes/i });
@@ -887,7 +891,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
/>,
);
fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
const dialog = await screen.findByRole("dialog");
fireEvent.click(
within(dialog).getByRole("button", { name: /more options/i }),
@@ -921,7 +925,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
/>,
);
fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
const dialog = await screen.findByRole("dialog");
fireEvent.click(
within(dialog).getByRole("button", { name: /more options/i }),
@@ -957,7 +961,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
/>,
);
fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
const dialog = await screen.findByRole("dialog");
fireEvent.click(
within(dialog).getByRole("button", { name: /more options/i }),
tests/components/ModalTextAreaField.test.tsx
+40
View File
@@ -110,4 +110,44 @@ describe("ModalTextAreaField behavior", () => {
expect(screen.getByAltText("Help")).toBeInTheDocument();
});
it("starts empty and Generate draft inserts the provided catalog copy", async () => {
const user = userEvent.setup();
const onChange = vi.fn();
renderWithProviders(
<ModalTextAreaField
label="Core principle"
value=""
onChange={onChange}
generateDraftText="Catalog first draft"
generateDraftLabel="Generate draft"
generateDraftHint="Get a first draft for this section"
/>,
);
expect(screen.getByRole("textbox", { name: /Core principle/i })).toHaveValue(
"",
);
expect(
screen.getByText("Get a first draft for this section"),
).toBeInTheDocument();
await user.click(screen.getByRole("button", { name: "Generate draft" }));
expect(onChange).toHaveBeenCalledWith("Catalog first draft");
});
it("hides Generate draft when there is no catalog copy", () => {
renderWithProviders(
<ModalTextAreaField
label="Core principle"
value=""
onChange={() => {}}
generateDraftText=""
generateDraftLabel="Generate draft"
/>,
);
expect(
screen.queryByRole("button", { name: "Generate draft" }),
).not.toBeInTheDocument();
});
});
tests/components/MultiSelect.test.tsx
+13 -3
View File
@@ -62,6 +62,16 @@ describe("MultiSelect – behaviour specifics", () => {
expect(screen.getByText("Option 2")).toBeInTheDocument();
});
it("names toggle chips Select/Deselect so they are not unnamed buttons", () => {
render(<MultiSelect options={defaultChipOptions} />);
expect(
screen.getByRole("button", { name: "Select Option 1" }),
).toHaveAttribute("aria-pressed", "false");
expect(
screen.getByRole("button", { name: "Deselect Option 2" }),
).toHaveAttribute("aria-pressed", "true");
});
it("calls onChipClick when a chip is clicked", async () => {
const handleChipClick = vi.fn();
render(
@@ -151,11 +161,11 @@ describe("MultiSelect – behaviour specifics", () => {
expect(screen.getByText("2 of 2")).toBeInTheDocument();
expect(screen.getByText("Limit reached")).toBeInTheDocument();
expect(screen.getByRole("button", { name: "One" })).toBeEnabled();
expect(screen.getByRole("button", { name: "Three" })).toBeDisabled();
expect(screen.getByRole("button", { name: "Deselect One" })).toBeEnabled();
expect(screen.getByRole("button", { name: "Select Three" })).toBeDisabled();
expect(screen.getByRole("button", { name: "Add option" })).toBeDisabled();
await userEvent.click(screen.getByRole("button", { name: "Three" }));
await userEvent.click(screen.getByRole("button", { name: "Select Three" }));
await userEvent.click(screen.getByRole("button", { name: "Add option" }));
expect(handleChipClick).not.toHaveBeenCalled();
expect(handleAddClick).not.toHaveBeenCalled();
tests/components/SelectPage.test.tsx
+10
View File
@@ -18,4 +18,14 @@ describe("CommunitySizeSelectScreen", () => {
expect(screen.getByText("1 member")).toBeInTheDocument();
expect(screen.getByText("2-5 members")).toBeInTheDocument();
});
it("gives size chips Select/Deselect accessible names", () => {
render(<CommunitySizeSelectScreen />);
expect(
screen.getByRole("button", { name: "Select 1 member" }),
).toBeInTheDocument();
expect(
screen.getByRole("button", { name: "Select 2-5 members" }),
).toBeInTheDocument();
});
});
tests/unit/methodCardWizardPrefill.test.ts
+21 -2
View File
@@ -177,7 +177,7 @@ describe("buildMethodCardWizardInitialValues", () => {
});
describe("facetDetailsToWizardFieldBlocks", () => {
it("returns no blocks when facet copy is empty", () => {
it("keeps catalog field headings when facet copy is empty", () => {
expect(
facetDetailsToWizardFieldBlocks({
group: "communication",
@@ -188,7 +188,26 @@ describe("facetDetailsToWizardFieldBlocks", () => {
},
headings: commHeadings,
}),
).toEqual([]);
).toEqual([
{
kind: "text",
id: "facet-corePrinciple",
blockTitle: "Core Principle & Scope",
placeholderText: " ",
},
{
kind: "text",
id: "facet-logisticsAdmin",
blockTitle: "Logistics, Admin & Norms",
placeholderText: "",
},
{
kind: "text",
id: "facet-codeOfConduct",
blockTitle: "Code of Conduct",
placeholderText: "",
},
]);
});
it("maps decision scope chips to a badge block", () => {