Form Layout Sectioned

Accessibility

Import FormLayoutSectioned, FormLayoutSectionedLevel, FormLayoutSectionedSection, FormLayoutSectionedStatus from @prepared911/ui/blocks/form-layout-sectioned.

The root is FormLayoutStandard's native form; name it with aria-label or aria-labelledby.
Each section is a heading at the section level and a fieldset whose legend has the same text, visually hidden. The group is announced on entry, and heading navigation reaches every section. Choose a level that nests under the page's or dialog's own heading.
A section's description and error are linked to its group with aria-describedby, so entering the group reads its name, then what it is for, then what needs attention.
The status marker is a decorative dot beside text; the text names the status. The dot is hidden from assistive technology and color is never the only cue.
Keyboard order is source order: sections top to bottom, fields in each section, then the actions. Sections add no tab stop and no roving focus.
After a failed submit attempt Form moves focus once to the first invalid control, which is in the first section with an error, or to the summary.
A SegmentedControl in a section is a radiogroup named by its label, with one tab stop; the arrow keys move the choice and select it. The section's group name and the control's name are both announced on entry.
The rule between sections is decorative (aria-hidden).
A disabled section disables its fields natively. Headings and status text are static text and keep full contrast.
At 320 CSS px or 200% text long titles wrap and the actions row wraps.

Form Layout Sectioned / API and Development

Form Layout Standard / Usage

Form Layout Sectioned

Accessibility

Import FormLayoutSectioned, FormLayoutSectionedLevel, FormLayoutSectionedSection, FormLayoutSectionedStatus from @prepared911/ui/blocks/form-layout-sectioned.

The root is FormLayoutStandard's native form; name it with aria-label or aria-labelledby.
Each section is a heading at the section level and a fieldset whose legend has the same text, visually hidden. The group is announced on entry, and heading navigation reaches every section. Choose a level that nests under the page's or dialog's own heading.
A section's description and error are linked to its group with aria-describedby, so entering the group reads its name, then what it is for, then what needs attention.
The status marker is a decorative dot beside text; the text names the status. The dot is hidden from assistive technology and color is never the only cue.
Keyboard order is source order: sections top to bottom, fields in each section, then the actions. Sections add no tab stop and no roving focus.
After a failed submit attempt Form moves focus once to the first invalid control, which is in the first section with an error, or to the summary.
A SegmentedControl in a section is a radiogroup named by its label, with one tab stop; the arrow keys move the choice and select it. The section's group name and the control's name are both announced on entry.
The rule between sections is decorative (aria-hidden).
A disabled section disables its fields natively. Headings and status text are static text and keep full contrast.
At 320 CSS px or 200% text long titles wrap and the actions row wraps.

Form Layout Sectioned / API and Development

Form Layout Standard / Usage