Create ActionListGroup component

[scurker]

ActionListGroup is a primitive component that presents a list of ActionListItems as a semantic group with a label and optional description.

Related:

• Create ActionMenu Component #1716
• Create ActionList Component #1717
• Create ActionListItem Component #1718

Props

type ActionListGroupProps = {

  /** Label for the group of action list items. */
  label: ContentNode;
  
  /** Description for the group */
  description?: ContentNode;

  /** Limits the amount of selections that can be made within an action list */
  selectionType?: 'single' | 'multiple'

  children: Array<ActionListItem | ActionListLinkItem | ActionListSeparatorProps>

} & React.HTMLAttributes<HTMLLIElement>

Implementation

The action list is a container element with no to primarily contain ActionListItem, ActionListLinkItem, ActionListSeparator or ActionListGroup components within a group.

This component should render as an as li element with a role of none with a ul element immediately nested with a role of group with the label rendered as role="presentation". If a description is provided, a similar pattern should be used with aria-describedby:

<li role="none">
  <div role="presentation" id={groupLabel}>{label}</div>
  <div role="presentation" id={groupDescription}>{description}</div>
  <ul role="group" aria-labelledby={groupLabel} aria-describedby={groupDescription}>
    ...
  </ul>
</li>

Context

This should utilize the same context provider from ActionList to allow for content authors to override any selection contexts.