feat: Add option grouping support to FASTListbox.

brianchristopherbrady commented 1 year ago

🙋 Feature Request

Add option grouping support to FASTListbox.

🤔 Expected Behavior

FASTListbox should support a new FASTOptgroup component, which will be used to define groups of related options. The component should visually distinguish the option group label from the individual options, and the option group label should not be selectable or focusable. Keyboard navigation should be updated to accommodate option groups.

😯 Current Behavior

Currently, the FASTListbox component supports adding individual FASTOption elements, but there is no built-in support for option grouping.

💁 Possible Solution

Implement a new FASTOptgroup component.
Extend the FASTListbox component to accept FASTOptgroup components as children.
Update the keyboard navigation to support option groups.
Ensure the implementation adheres to WAI-ARIA best practices for option groups.
Update documentation to include examples and guidance for using the new FASTOptgroup component.

🔦 Context

Option grouping can help users navigate through long lists of options more easily by visually grouping related options. It can also improve the accessibility and user experience of the FASTListbox component. Implementing this feature will enhance the functionality and flexibility of the FASTListbox component.

💻 Examples

<fast-listbox>
  <fast-optgroup label="Fruits">
    <fast-option>Apple</fast-option>
    <fast-option>Orange</fast-option>
    <fast-option>Banana</fast-option>
  </fast-optgroup>
  <fast-optgroup label="Vegetables">
    <fast-option>Carrot</fast-option>
    <fast-option>Broccoli</fast-option>
    <fast-option>Spinach</fast-option>
  </fast-optgroup>
</fast-listbox>

atmgrifter00 commented 1 year ago

Is there any reason you wouldn't want this same capability supported in FASTSelect and FASTCombobox?

janechu commented 6 months ago

Unfortunately @microsoft/fast-foundation is being deprecated, refer to #6955.

microsoft / fast