withConstrainedTabbing
is a React higher-order component adding the ability to constrain keyboard navigation with the Tab key within a component. For accessibility reasons, some UI components need to constrain Tab navigation, for example modal dialogs or similar UI. Use of this component is recommended only in cases where a way to navigate away from the wrapped component is implemented by other means, usually by pressing the Escape key or using a specific UI control, e.g. a “Close” button.
Usage
Wrap your original component with withConstrainedTabbing
.
import { useState } from 'react';
import {
withConstrainedTabbing,
TextControl,
Button,
} from '@wordpress/components';
const ConstrainedTabbing = withConstrainedTabbing(
( { children } ) => children
);
const MyComponentWithConstrainedTabbing = () => {
const [ isConstrainedTabbing, setIsConstrainedTabbing ] = useState( false );
let form = (
<form>
<TextControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label="Input 1"
onChange={ () => {} }
/>
<TextControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label="Input 2"
onChange={ () => {} }
/>
</form>
);
if ( isConstrainedTabbing ) {
form = <ConstrainedTabbing>{ form }</ConstrainedTabbing>;
}
const toggleConstrain = () => {
setIsConstrainedTabbing( ( state ) => ! state );
};
return (
<div>
{ form }
<Button variant="secondary" onClick={ toggleConstrain }>
{ isConstrainedTabbing ? 'Disable' : 'Enable' } constrain
tabbing
</Button>
</div>
);
};