How to use tabster with Fluent UI v9?

[AkiraVoid]

Fluent UI v9's doc said it uses tabster to implement keyboard navigation, but it haven't said how it uses tabster. We have some custom components which we want them to be keyboard-navigable, but we don't know how. Tabster's doc said how to use its APIs, but we think Fluent UI has created a wrapper for it. We found some hooks like: useArrowNavigationGroup, useFocusableGroup, but none of them worked.

[layershifter]

There is a set of hooks exported by @fluentui/react-components/@fluentui/react-tabster:

fluentui/packages/react-components/react-tabster/src/index.ts

Lines 2 to 9 in ab53a4c

	useArrowNavigationGroup,
	useFocusableGroup,
	useFocusFinders,
	useFocusVisible,
	useFocusWithin,
	useKeyboardNavAttribute,
	useModalAttributes,
	useTabsterAttributes,

Here is a simple example for useArrowNavigationGroup:

export default function App() {
  const attrs = useArrowNavigationGroup({ axis: "horizontal", circular: true });

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <div style={{ display: "flex", gap: 10 }}>
        <button>before</button>
        <div {...attrs} style={{ border: "4px dotted grey", padding: 4 }}>
          <button>button 1</button>
          <button>button 2</button>
          <button>button 3</button>
          <button>button 4</button>
        </div>
        <button>after</button>
      </div>
    </div>
  );
}

https://codesandbox.io/s/wonderful-farrell-r94kbe?file=/src/App.js:92-709

---

However, I agree. As we recommend to use our wrapper, we should have docs for it. @AkiraVoid would you mind to create an issue for that?

[AkiraVoid]

I created #27961 for this discussion.