WithConstrainedTabbing

使用法

元のコンポーネントを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 label="Input 1" onChange={ () => {} } />
   <TextControl 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>
   );
}