The ConditionEditor components lay out editable condition rows — a card per condition holding the controls that edit it, joined to the rows around it by their operator.
Structure
Each row is read in order: the operator, the reorder handle, the heading, the first line of
controls, the details, the footer, then the actions. A row with a heading is a group named by it, so moving
into its controls announces the kind of condition ("Object attribute"). Rows and nested sets are not marked up as lists or groups. The connector
lines are decorative and aren't announced.
ConditionEditor is in alpha, so this may change as the API settles.
Labels
Rows have no visible labels. Give every form control an accessible name with ariaLabel (or
label) naming what it edits ("Attribute", "Operator", "Value"), and give every icon-only button
an aria-label naming its action ("Remove condition"). A switchable operator is a SegmentedControl
that Pluma names "Operator": a group of radios, one per option, read and changed with the arrow
keys.
Groups
A ConditionEditor with a header is a group named by it, so moving into its rows announces how
they combine ("Any of the following conditions match"). Without a header, a set isn't announced as a
group. Give the header's controls their own accessible names ("Group operator"); the header names
the set, not the controls in it.
Drag and drop
withHandle renders a button named "Reorder condition". When isHandleDisabled is set, it stays
focusable and is announced as disabled.
The handle doesn't reorder anything on its own. The drag-and-drop library you connect through
handleRef must provide keyboard reordering and announce each move.
Keyboard
| Key | Function |
|---|---|
| Tab | Moves focus through each row in order: the handle, the controls, the details, then the actions. |
| Shift+Tab | Moves focus to the previous focusable element. |
| Enter/Space | Activates the handle. What that does is defined by your drag-and-drop library. |