diff --git a/packages/react-interactions/accessibility/docs/FocusControl.md b/packages/react-interactions/accessibility/docs/FocusControl.md new file mode 100644 index 000000000000..1088e64ecb48 --- /dev/null +++ b/packages/react-interactions/accessibility/docs/FocusControl.md @@ -0,0 +1,60 @@ +# FocusControl + +`FocusControl` is a module that exports a selection of helpful utility functions to be used +in conjunction with the `ref` from a React Scope, such as `TabbableScope`. +A ref from `FocusManager` can also be used instead. + +## Example + +```jsx +const { + focusFirst, + focusNext, + focusPrevious, + getNextScope, + getPreviousScope, +} = FocusControl; + +function KeyboardFocusMover(props) { + const scopeRef = useRef(null); + + useEffect(() => { + const scope = scopeRef.current; + + if (scope) { + // Focus the first tabbable DOM node in my children + focusFirst(scope); + // Then focus the next chilkd + focusNext(scope); + } + }); + + return ( + + {props.children} + + ); +} +``` + +## FocusControl API + +### `focusFirst` + +Focus the first node that matches the given scope. + +### `focusNext` + +Focus the next sequential node that matchs the given scope. + +### `focusPrevious` + +Focus the previous sequential node that matchs the given scope. + +### `getNextScope` + +Focus the first node that matches the next sibling scope from the given scope. + +### `getPreviousScope` + +Focus the first node that matches the previous sibling scope from the given scope. \ No newline at end of file diff --git a/packages/react-interactions/accessibility/docs/FocusManager.md b/packages/react-interactions/accessibility/docs/FocusManager.md new file mode 100644 index 000000000000..9a1b48099567 --- /dev/null +++ b/packages/react-interactions/accessibility/docs/FocusManager.md @@ -0,0 +1,39 @@ +# FocusManager + +`FocusManager` is a component that is designed to provide basic focus management +control. These are the various props that `FocusManager` accepts: + +## Usage + +```jsx +function MyDialog(props) { + return ( + +
+

{props.title}

+

{props.text}

+ + +

+
+ ) +} +``` + +### `scope` +`FocusManager` accepts a custom `ReactScope`. If a custom one is not supplied, `FocusManager` +will default to using `TabbableScope`. + +### `autoFocus` +When enabled, the first host node that matches the `FocusManager` scope will be focused +upon the `FocusManager` mounting. + +### `restoreFocus` +When enabled, the previous host node that was focused as `FocusManager` is mounted, +has its focus restored upon `FocusManager` unmounting. + +### `containFocus` +This contains the user focus to only that of `FocusManager`s sub-tree. Tabbing or +interacting with nodes outside the sub-tree will restore focus back into the `FocusManager`. +This is useful for modals, dialogs, dropdowns and other UI elements that require +a form of user-focus control that is similar to the `inert` property on the web. \ No newline at end of file diff --git a/packages/react-interactions/accessibility/docs/TabbableScope.md b/packages/react-interactions/accessibility/docs/TabbableScope.md new file mode 100644 index 000000000000..a975fdb2e7ac --- /dev/null +++ b/packages/react-interactions/accessibility/docs/TabbableScope.md @@ -0,0 +1,35 @@ +# TabbableScope + +`TabbableScope` is a custom scope implementation that can be used with +`FocusManager`, `FocusList`, `FocusTable` and `FocusControl` modules. + +## Usage + +```jsx +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 ( + + {props.children} + + ); +} +``` + +## 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. diff --git a/packages/react-interactions/accessibility/src/FocusControl.js b/packages/react-interactions/accessibility/src/FocusControl.js index f3fcabf7d027..be0be363a112 100644 --- a/packages/react-interactions/accessibility/src/FocusControl.js +++ b/packages/react-interactions/accessibility/src/FocusControl.js @@ -110,7 +110,7 @@ export function focusPrevious( } } -export function getNextController( +export function getNextScope( scope: ReactScopeMethods, ): null | ReactScopeMethods { const allScopes = scope.getChildrenFromRoot(); @@ -124,7 +124,7 @@ export function getNextController( return allScopes[currentScopeIndex + 1]; } -export function getPreviousController( +export function getPreviousScope( scope: ReactScopeMethods, ): null | ReactScopeMethods { const allScopes = scope.getChildrenFromRoot(); diff --git a/packages/react-interactions/accessibility/src/__tests__/FocusManager-test.internal.js b/packages/react-interactions/accessibility/src/__tests__/FocusManager-test.internal.js index 1cf07104c0f3..0d33ec035fd4 100644 --- a/packages/react-interactions/accessibility/src/__tests__/FocusManager-test.internal.js +++ b/packages/react-interactions/accessibility/src/__tests__/FocusManager-test.internal.js @@ -301,16 +301,12 @@ describe('FocusManager', () => { FocusControl.focusPrevious(firstFocusController); expect(document.activeElement).toBe(buttonRef.current); - const nextController = FocusControl.getNextController( - firstFocusController, - ); + const nextController = FocusControl.getNextScope(firstFocusController); expect(nextController).toBe(secondFocusController); FocusControl.focusFirst(nextController); expect(document.activeElement).toBe(divRef.current); - const previousController = FocusControl.getPreviousController( - nextController, - ); + const previousController = FocusControl.getPreviousScope(nextController); expect(previousController).toBe(firstFocusController); FocusControl.focusFirst(previousController); expect(document.activeElement).toBe(buttonRef.current);