mirror of
https://github.com/facebook/react.git
synced 2026-02-24 20:53:03 +00:00
32 lines
730 B
Markdown
32 lines
730 B
Markdown
# TabbableScopeQuery
|
|
|
|
`TabbableScopeQuery` is a custom scope implementation that can be used with
|
|
`FocusContain`, `FocusGroup`, `FocusTable` and `FocusManager` modules.
|
|
|
|
## Usage
|
|
|
|
```jsx
|
|
import tabbableScopeQuery from 'react-interactions/accessibility/tabbable-scope-query';
|
|
|
|
function FocusableNodeCollector(props) {
|
|
const scopeRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const scope = scopeRef.current;
|
|
|
|
if (scope) {
|
|
const tabFocusableNodes = scope.queryAllNodes(tabbableScopeQuery);
|
|
if (tabFocusableNodes && props.onFocusableNodes) {
|
|
props.onFocusableNodes(tabFocusableNodes);
|
|
}
|
|
}
|
|
});
|
|
|
|
return (
|
|
<TabbableScope ref={scopeRef}>
|
|
{props.children}
|
|
</TabbableScope>
|
|
);
|
|
}
|
|
```
|