react/packages/react-interactions/accessibility/docs/TabbableScope.md

TabbableScope

TabbableScope is a custom scope implementation that can be used with FocusContain, FocusGroup, FocusTable and FocusManager modules.

Usage

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 here.