Create ActionListItem Component

ActionListItem is a primitive collection of components that renders elements as action item(s) within an ActionList or ActionListGroup. It is intended to be a replacement for the existing OptionsMenuItem component with some additional options.

1716
1717
1740

This is an implementation of an aria menu pattern implementing the various roles and states necessary for menu items with selection(s).

Props

type ActionListItemBaseProps = {

  /** 
   * A unique key to identify the action when triggered, when not provided 
   * will use the child text content as the key. 
   */
  key?: string

  /** Provides an additional description for the list item. */
  description?: ContentNode

  /** Indicates if the current action list item is selected. */
  selected?: ContentNode

  /** When an action list item is disabled, it cannot be selected or activated. */
  disabled?: boolean

  /** A callback function that is called when an action list item is selected. */
  onAction: (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void

}

type ActionListItemProps = ActionListItemBaseProps & React.HTMLAttributes<HTMLLIElement>

type ActionListLinkItemProps = {

  /** URL to link to for this action list item */
  href: string

} & Omit<ActionListItemBaseProps, 'selected'> & React.AnchorHTMLAttributes<HTMLAnchorElement>

type ActionListSeparatorProps = React.HTMLAttributes<HTMLLIElement>

Implementations

The below components are intended to be direct children of an ActionList or ActionListGroup component.

ActionListItem

The role of the action list item is dependent on how it it rendered within an ActionList or ActionListGroup component:

If the selection type of the closest ActionList or ActionListGroup is not set, use role="menuitem"
If the selection type of the closest ActionList or ActionListGroup is set to single, use role="menuitemradio"
If the selection type of the closest ActionList of ActionListGroup is set to multiple, use role="menuitemcheckbox"

Each action list item should always have an id set for aria associations, either via props or using react-id-generator:

const [id] = propId ? [propId] : useId(1, 'action-list-item')

When disabled is set to true, aria-disabled should be set to true and any click or keypress events for the disabled item should be prevented.

When selected is set to true, aria-checked should be set if the role of the item is menuitemradio or menuitemcheckbox.

The description property should be displayed immediately below any children content of the ActionListItem. This can utilize a flex layout.

ActionListLinkItem

This component is an extension of the ActionListItem component but with an anchor child. The onAction event should be captured as an event on the child and not the li element.

ActionListSeparator

This is a display component with a role of separator. This component should only accept HTMLLiElement properties and a ref with no children.

dequelabs / cauldron