38 lines
958 B
Markdown
38 lines
958 B
Markdown
# TabbableScope
|
|
|
|
`TabbableScope` is a custom scope implementation that can be used with
|
|
`FocusContain`, `FocusGroup`, `FocusTable` and `FocusManager` modules.
|
|
|
|
## Usage
|
|
|
|
```jsx
|
|
import TabbableScope from 'react-interactions/accessibility/tabbable-scope';
|
|
|
|
function FocusableNodeCollector(props) {
|
|
const scopeRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const scope = scopeRef.current;
|
|
|
|
if (scope) {
|
|
const tabFocusableNodes = scope.getScopedNodes();
|
|
if (tabFocusableNodes && props.onFocusableNodes) {
|
|
props.onFocusableNodes(tabFocusableNodes);
|
|
}
|
|
}
|
|
});
|
|
|
|
return (
|
|
<TabbableScope ref={scopeRef}>
|
|
{props.children}
|
|
</TabbableScope>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Implementation
|
|
|
|
`TabbableScope` uses the experimental `React.unstable_createScope` API. The query
|
|
function used for the scope is designed to collect DOM nodes that are tab focusable
|
|
to the browser. See the [implementation](../src/TabbableScope.js#L12-L33) here.
|