How to use the @wordpress/dom.focus.tabbable function in @wordpress/dom

focusTabbable () {
    const { initialPosition } = this.props;

    // Focus is captured by the wrapper node, so while focus transition
    // should only consider tabbables within editable display, since it
    // may be the wrapper itself or a side control which triggered the
    // focus event, don't unnecessary transition to an inner tabbable.
    if (this.wrapperNode.contains(document.activeElement)) {
      return;
    }

    // Find all tabbables within node.
    const textInputs = focus.tabbable.find(this.node).filter(isTextField);

    // If reversed (e.g. merge via backspace), use the last in the set of
    // tabbables.
    const isReverse = -1 === initialPosition;
    const target = (isReverse ? last : first)(textInputs);

    if (! target) {
      this.wrapperNode.focus();
      return;
    }

    target.focus();

    // In reverse case, need to explicitly place caret position.
    if (isReverse) {
      placeCaretAtHorizontalEdge(target, true);

const focusTimeout = setTimeout( () => {
			if ( ! focusOnMount || ! contentRef.current ) {
				return;
			}

			if ( focusOnMount === 'firstElement' ) {
			// Find first tabbable node within content and shift focus, falling
			// back to the popover panel itself.
				const firstTabbable = focus.tabbable.find( contentRef.current )[ 0 ];
				if ( firstTabbable ) {
					firstTabbable.focus();
				} else {
					contentRef.current.focus();
				}

				return;
			}

			if ( focusOnMount === 'container' ) {
			// Focus the popover panel itself so items in the popover are easily
			// accessed via keyboard navigation.
				contentRef.current.focus();
			}
		}, 0 );

// Focus is captured by the wrapper node, so while focus transition
		// should only consider tabbables within editable display, since it
		// may be the wrapper itself or a side control which triggered the
		// focus event, don't unnecessary transition to an inner tabbable.
		if ( wrapper.current.contains( document.activeElement ) ) {
			return;
		}

		if ( isNavigationMode ) {
			breadcrumb.current.focus();
			return;
		}

		// Find all tabbables within node.
		const textInputs = focus.tabbable
			.find( blockNodeRef.current )
			.filter( isTextField )
			// Exclude inner blocks
			.filter( ( node ) => ! ignoreInnerBlocks || isInsideRootBlock( blockNodeRef.current, node ) );

		// If reversed (e.g. merge via backspace), use the last in the set of
		// tabbables.
		const isReverse = -1 === initialPosition;
		const target = ( isReverse ? last : first )( textInputs );

		if ( ! target ) {
			wrapper.current.focus();
			return;
		}

		placeCaretAtHorizontalEdge( target, isReverse );

const focusTabbable = ( ignoreInnerBlocks ) => {
		// Focus is captured by the wrapper node, so while focus transition
		// should only consider tabbables within editable display, since it
		// may be the wrapper itself or a side control which triggered the
		// focus event, don't unnecessary transition to an inner tabbable.
		if ( wrapper.current.contains( document.activeElement ) ) {
			return;
		}

		if ( isNavigationMode ) {
			breadcrumb.current.focus();
			return;
		}

		// Find all tabbables within node.
		const textInputs = focus.tabbable
			.find( blockNodeRef.current )
			.filter( isTextField )
			// Exclude inner blocks
			.filter( ( node ) => ! ignoreInnerBlocks || isInsideRootBlock( blockNodeRef.current, node ) );

		// If reversed (e.g. merge via backspace), use the last in the set of
		// tabbables.
		const isReverse = -1 === initialPosition;
		const target = ( isReverse ? last : first )( textInputs );

		if ( ! target ) {
			wrapper.current.focus();
			return;
		}

		placeCaretAtHorizontalEdge( target, isReverse );

handleTabBehavior( e ) {
		const { keyCode, shiftKey, target } = e;

		// 9 = TAB
		if ( 9 !== keyCode ) {
			return;
		}

		const tabbables = focus.tabbable.find( this.el );

		if ( ! tabbables.length ) {
			return;
		}

		const firstTabbable = tabbables[ 0 ];
		const lastTabbable = tabbables[ tabbables.length - 1 ];
		let toFocus;

		if ( shiftKey && target === firstTabbable ) {
			toFocus = lastTabbable;
		} else if ( ! shiftKey && target === lastTabbable ) {
			toFocus = firstTabbable;
		} else if ( shiftKey ) {
			toFocus = focus.tabbable.findPrevious( target );
		} else {

* Browser constants
 */

const { getSelection, getComputedStyle } = window;

/**
 * Given an element, returns true if the element is a tabbable text field, or
 * false otherwise.
 *
 * @param {Element} element Element to test.
 *
 * @return {boolean} Whether element is a tabbable text field.
 */
const isTabbableTextField = overEvery( [
	isTextField,
	focus.tabbable.isTabbableIndex,
] );

/**
 * Returns true if the element should consider edge navigation upon a keyboard
 * event of the given directional key code, or false otherwise.
 *
 * @param {Element} element     HTML element to test.
 * @param {number}  keyCode     KeyboardEvent keyCode to test.
 * @param {boolean} hasModifier Whether a modifier is pressed.
 *
 * @return {boolean} Whether element should consider edge navigation.
 */
export function isNavigationCandidate( element, keyCode, hasModifier ) {
	const isVertical = ( keyCode === UP || keyCode === DOWN );

	// Currently, all elements support unmodified vertical navigation.

focusToolbar() {
		const tabbables = focus.tabbable.find( this.toolbar.current );
		if ( tabbables.length ) {
			tabbables[ 0 ].focus();
		}
	}

if ( ! tabbables.length ) {
			return;
		}

		const firstTabbable = tabbables[ 0 ];
		const lastTabbable = tabbables[ tabbables.length - 1 ];
		let toFocus;

		if ( shiftKey && target === firstTabbable ) {
			toFocus = lastTabbable;
		} else if ( ! shiftKey && target === lastTabbable ) {
			toFocus = firstTabbable;
		} else if ( shiftKey ) {
			toFocus = focus.tabbable.findPrevious( target );
		} else {
			toFocus = focus.tabbable.findNext( target );
		}

		if ( 'undefined' !== typeof toFocus ) {
			this.focusedEl = toFocus;
			this.focusedElCartetPos = toFocus.value.length;
		} else {
			this.focusedEl = null;
			this.focusedElCartetPos = 0;
		}
	},

focusContainer() {
		const tabbables = focus.tabbable.find( this.container.current );
		if ( tabbables.length ) {
			tabbables[ 0 ].focus();
		}
	}

focusFirstTabbable() {
		const tabbables = focus.tabbable.find( this.containerRef.current );
		if ( tabbables.length ) {
			tabbables[ 0 ].focus();
		}
	}