Description

A listbox presents a list of options and allows a user to select one of them.

<post-listbox>
  <post-listbox-item>
    <post-icon name="3000"></post-icon>
    Option 1
  </post-listbox-item>
  <post-listbox-item>Option 2</post-listbox-item> 
</post-listbox>

Design

This component does not have a design, it must be configurable via CSS custom properties.

Requirements

Shadow DOM

This component does not make use of shadow DOM.

Styling options

• --post-listbox-item-gap: Gap between listbox options
• --post-listbox-heading-gap: Gap between heading (if shown) and the listbox

These options have not default definition but the can be set on the host by a user.
To achieve this, the following styling can be used:

:host {
  display: flex;
  gap: var(--post-listbox-gap); /* If this variable is defined (by the user) a gap will be set */
}

Props

• title-hidden: the internal title container gets the class visually-hidden

Variants

• No title: Title is visually hidden <post-list title-hidden>
• Custom gap: <post-list style="--post-listbox-item-gap: 1rem; --post-listbox-heading-gap: 0.5rem">

Accessibility

https://www.w3.org/WAI/ARIA/apg/patterns/listbox/

• The components need to have the correct aria-attributes, roles and keyboard navigation.
• The list and the title have to be connected via aria-labelledby

Tasks development