TabbableScope
is a custom scope implementation that can be used with
FocusContain
, FocusGroup
, FocusTable
and FocusManager
modules.
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.getAllNodes();
if (tabFocusableNodes && props.onFocusableNodes) {
props.onFocusableNodes(tabFocusableNodes);
}
}
});
return (
<TabbableScope ref={scopeRef}>
{props.children}
</TabbableScope>
);
}
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 here.