Focusgroup

[gfellerph]

There are components that need arrow key interactions like the navigation, side navigations, list of links, menu options in popovers etc.

There is a focusgroup exaplainer that goes into a lot more details at Open UI.

The explainer is much too detailed and the focusgroup prototype polyfill does not support groups nested in shadow DOM.

We need something along the lines of the explainer for our components as well. I would argue in favor of using an attribute instead of a component for this one, since it might become a standard at some point where our "polyfill" could be dropped in replacement of the standard. A reference/starting point could be https://github.com/gfellerph/focusgroup/settings (WIP).

<div focusgroup>
  <button>Shadow button 1</button>
  <button>Shadow button 2</button>
  <button>Shadow button 3</button>
  <button>Shadow button 4</button>
  <button>Shadow button 5</button>
</div>