New FieldGroup Component

[scurker]

FieldGroup is a new grouping component that wraps a related set of input controls and includes a group label with an optional description and error state. This is an unstyled component.

Related Components

• https://github.com/dequelabs/cauldron/issues/1641
• https://github.com/dequelabs/cauldron/issues/1657
• https://github.com/dequelabs/cauldron/issues/1656

Implementation

type FieldGroupProps = {
  label: ContentNode;
  children: React.ReactNode;
  description?: React.ReactNode;
  error?: React.ReactNode;
} & React.HTMLAttributes<HTMLDivElement>

When the "label text" overflows with the "required" label, the label should wrap onto a new line without interfering with the placement or sizing of required.

The grouping element should be aria-labelledby and aria-describedby its respective label and/or description (when it's present). This should function and be displayed similarly to how other input controls (TextField, Combobox, Select, etc) handle labels, descriptions, and error display.

It should have an explicit role of group.

Any child content should be displayed inside of the wrapping element.

[scurker]

@ezirlingerDQ What does it mean when a "group" of fields is required? Do you have an example of where we'd mark a grouping of controls as required?