The ConditionViewer components render a read-only summary of a set of rules — one boxed sentence per rule, nested under the operator that combines them.
Structure
A ConditionViewerItem renders as a <div> containing a decorative marker, the sentence, and — when
provided — the details below it and the actions at its trailing edge. Everything that
carries meaning is visible text: emphasized runs render as <strong> (via ConditionViewerTerm),
and the connecting words render as plain text. A screen reader therefore reads a condition
as the sentence a sighted user sees, in the same order.
A ConditionViewerGroup renders as a <div> wrapping a header (the descriptor, the optional
collapse toggle, the optional actions) and a container holding its children. Groups nest
by containing other groups.
Conditions and groups are deliberately not marked up as lists. List semantics would
force the container and item elements to stay in lockstep (<ul> wrapping <li>), which
breaks the moment a single condition is rendered on its own or a consumer changes an
element with as — and a mis-paired list is worse for assistive technology than no list at
all. Group labelling (below) is what conveys the structure instead.
There is no opt-in for list semantics: as on a ConditionViewerGroup changes its root element
only, and the container its children render into is internal, so as="ul" would produce
<ul> → <div> → <li> — exactly the mis-paired list this avoids. If a consumer needs
real list markup, the group needs a prop for the child container's element rather than a
workaround.
ARIA
| Element | Attribute | Description |
|---|---|---|
| ConditionViewerItem marker | aria-hidden="true" | Always applied. The marker is decorative — the sentence already names what the condition is about, so announcing the icon would only repeat it. |
| Group | role="group" | Applied when the group has a label, so assistive technology can tell where one set of conditions ends and the next begins. Omitted without a label, since an unnamed group adds nothing. |
| Group | aria-labelledby | Points at the descriptor element, naming the group with its own visible text ("Matches all of 4 conditions"). |
| Collapse toggle | aria-expanded | "true" when the group's conditions are shown, "false" when collapsed. |
| Collapse toggle | aria-controls | Points at the container the toggle shows and hides. |
| Collapse toggle | aria-labelledby | Points at the same descriptor element as the group, so the toggle announces which group it collapses rather than a bare "expand". |
Keyboard interactions
The only interactive element the components own is the collapse toggle, which is a real
<button> and needs no custom key handling.
| Key | Function |
|---|---|
| Enter/Space | Toggles the group when the collapse toggle has focus. |
| Tab | Moves focus to the collapse toggle, and onward through any interactive content in the header actions, the sentence, or the details. |
| Shift+Tab | Moves focus to the previous focusable element. |
A collapsed group unmounts its children, so they are removed from the tab order along with the rest of the content — focus order always matches what is visible.
Accessibility for anything placed in actions, or for interactive values inside a sentence
or a detail chip (a tooltip trigger, a popover), is handled by those components.
Color and meaning
Nothing in a condition is conveyed by color alone. The marker's iconColorVariant and any
coin in actions are supporting signals — the reason a condition needs attention must also
be available as text, typically the tooltip on the action itself.
The group descriptor uses the subtle text color rather than placeholder: at 12px the
placeholder token only reaches 3.1:1 against white, short of the 4.5:1 WCAG AA threshold
for body text.