How to add accessible non-option child to Select?

[ghost]

Hey, I am currently trying to create a select element with a custom element (see UnitSystemRadioGroup in image) inside.

I currently have implemented it using the useSelect hook and the component looks fine and the select functionality works fine.

Question

How do I make the radio group accessible via keyboard?
I'd love to be able to let the user start (first focused element) at the first option and let him navigate using ArrowUp to the UnitSystemRadioGroup.
It seems to be already possible to use ArrowDown to go from the UnitSystemRadioGroup to the first option.

---

My current implementation

// Return value of my Listbox component
<List {...listBoxProps} ref={ref}>
  <ListItem>
    <UnitSystemRadioGroup
      unitSystem={unitSystem}
      setUnitSystem={setUnitSystem}
    />
  </ListItem>
    {Array.from(state.collection).map((item) => (
      <Option key={item.key} item={item} state={state} />
    ))}
</List>

Everything else is pretty similar to the example in the useSelect documentation.

[snowystinger]

Hey, sorry for the delay, this fell off my radar. I will refer to you a comment about a similar kind of composite widget #3020 (comment)