How to use the @instructure/ui-dom-utils.findTabbable function in @instructure/ui-dom-utils

componentWillReceiveProps (nextProps) {
    if (!nextProps.shouldHandleFocus) {
      return
    }

    if (!propsHaveCompactView(this.props) && !propsHaveCompactView(nextProps)) {
      return
    }

    const focusable = findTabbable(this._root)
    if (
      focusable[0] === document.activeElement &&
      !shouldShowPrevButton(nextProps)
    ) {
      // Previous Page button has focus, but will no longer be rendered
      this._moveFocusTo = 'first'
      return
    }

    if (
      focusable[focusable.length - 1] === document.activeElement &&
      !shouldShowNextButton(nextProps)
    ) {
      // Next Page button has focus, but will no longer be rendered
      this._moveFocusTo = 'last'
      return

this._timeouts.push(setTimeout(() => {
      const activePage = this._activePage

      // Attempt to focus active page
      if (activePage && activePage.focusable) {
        activePage.focus()
      } else {
        // Use first tabbable as last ditch effort
        const tabbable = findTabbable(this._contentElement)
        const element = tabbable && tabbable[0]

        element && element.focus()
      }
    }))
  }

get defaultFocusElement () {
    let { defaultFocusElement } = this.props

    if (typeof defaultFocusElement === 'function') {
      defaultFocusElement = defaultFocusElement()
    }

    if (defaultFocusElement) {
      defaultFocusElement = findDOMNode(defaultFocusElement)
    }

    if (!defaultFocusElement) {
      const tabbable = findTabbable(this._content)
      defaultFocusElement = tabbable && tabbable[0]
    }

    error(
      defaultFocusElement && defaultFocusElement.focus,
      '[Page] A default focusable element is required or focus will be lost.'
    )

    return defaultFocusElement
  }

componentDidUpdate () {
    if (this.props.shouldHandleFocus === false || this.compactView === false) {
      return
    }

    if (this._moveFocusTo != null) {
      const focusable = findTabbable(this._root)
      const focusIndex =
        this._moveFocusTo === 'first' ? 0 : focusable.length - 1
      focusable[focusIndex].focus()
      delete this._moveFocusTo
    }
  }