How to use tabbable - 10 common examples

// @flow

import tabbable from 'tabbable';

const div = document.createElement('div');
const tabbables: Array = tabbable(div, {
  includeContainer: true,
});

tabbable(div);

tabbables.map(node => node.nodeName);

const isTabbable: boolean = tabbable.isTabbable(document.createElement('a'));
const isFocusable: boolean = tabbable.isFocusable(
  document.createElement('button')
);

const untouchabilityChecker = new (class {
  hasDisplayNone() {
    return true;
  }
  isUntouchable() {
    return false;
  }
})();

const isTabbableWithUntouchabilityChecker: boolean = tabbable.isTabbable(
  document.createElement('a'),
  untouchabilityChecker
);

document.createElement('a'),
  untouchabilityChecker
);

const isFocusableWithUntouchabilityChecker: boolean = tabbable.isFocusable(
  document.createElement('button'),
  untouchabilityChecker
);

const isFocusable2: boolean = tabbable.isFocusable(
  document.createElement('button'),
  // $ExpectError
  3
);

const isTabbable2: boolean = tabbable.isFocusable(
  document.createElement('button'),
  // $ExpectError
  3
);

const untouchabilityChecker = new (class {
  hasDisplayNone() {
    return true;
  }
  isUntouchable() {
    return false;
  }
})();

const isTabbableWithUntouchabilityChecker: boolean = tabbable.isTabbable(
  document.createElement('a'),
  untouchabilityChecker
);

const isFocusableWithUntouchabilityChecker: boolean = tabbable.isFocusable(
  document.createElement('button'),
  untouchabilityChecker
);

const isFocusable2: boolean = tabbable.isFocusable(
  document.createElement('button'),
  // $ExpectError
  3
);

const isTabbable2: boolean = tabbable.isFocusable(
  document.createElement('button'),
  // $ExpectError
  3
);

// @flow

import tabbable from 'tabbable';

const div = document.createElement('div');
const tabbables: Array = tabbable(div, {
  includeContainer: true,
});

tabbable(div);

tabbables.map(node => node.nodeName);

const isTabbable: boolean = tabbable.isTabbable(document.createElement('a'));
const isFocusable: boolean = tabbable.isFocusable(
  document.createElement('button')
);

const untouchabilityChecker = new (class {
  hasDisplayNone() {
    return true;
  }
  isUntouchable() {
    return false;
  }
})();

const isTabbableWithUntouchabilityChecker: boolean = tabbable.isTabbable(
  document.createElement('a'),
  untouchabilityChecker

const isTabbable: boolean = tabbable.isTabbable(document.createElement('a'));
const isFocusable: boolean = tabbable.isFocusable(
  document.createElement('button')
);

const untouchabilityChecker = new (class {
  hasDisplayNone() {
    return true;
  }
  isUntouchable() {
    return false;
  }
})();

const isTabbableWithUntouchabilityChecker: boolean = tabbable.isTabbable(
  document.createElement('a'),
  untouchabilityChecker
);

const isFocusableWithUntouchabilityChecker: boolean = tabbable.isFocusable(
  document.createElement('button'),
  untouchabilityChecker
);

const isFocusable2: boolean = tabbable.isFocusable(
  document.createElement('button'),
  // $ExpectError
  3
);

const isTabbable2: boolean = tabbable.isFocusable(

fromElement: document.activeElement,
        allowLooping: true,
    };

    // Merge the passed options and the defaults.
    const finalOptions = {
        ...defaultTabbableOptions,
        ...options,
    } as ITabbableOptions;

    if (!(finalOptions.fromElement instanceof HTMLElement)) {
        logError("Unable to tab to next element, `fromElement` given is not valid: ", finalOptions.fromElement);
        return null;
    }

    const tabbables = tabbable(finalOptions.root).filter((tabbableElement: Element) => {
        // We want to excempt items that are the active item or a parent of the active item
        // because otherwise we would not be able to tab away from them.
        const elementIsActiveOrChildOfActive =
            finalOptions.fromElement === tabbableElement || tabbableElement.contains(finalOptions.fromElement);

        if (!elementIsActiveOrChildOfActive) {
            if (finalOptions.excludedElements.includes(tabbableElement)) {
                return false;
            }
            for (const excludedRoot of finalOptions.excludedRoots) {
                if (excludedRoot !== tabbableElement && excludedRoot.contains(tabbableElement)) {
                    return false;
                }
            }
        }

// Setting focus while transitioning causes the animation to glitch, so we have to wait
      // until it's finished before we focus anything.
      if (this.state.isTransitioning) {
        return;
      }

      // If there aren't any items then this is probably a form or something.
      if (!this.state.menuItems.length) {
        // If we've already focused on something inside the panel, everything's fine.
        if (this.panel && this.panel.contains(document.activeElement)) {
          return;
        }

        // Otherwise let's focus the first tabbable item and expedite input from the user.
        if (this.content) {
          const tabbableItems = tabbable(this.content);
          if (tabbableItems.length) {
            tabbableItems[0].focus();
          }
        }
        return;
      }

      // If an item is focused, focus it.
      if (this.state.focusedItemIndex !== undefined) {
        this.state.menuItems[this.state.focusedItemIndex].focus();
        return;
      }

      // Focus on the panel as a last resort.
      if (this.panel && !this.panel.contains(document.activeElement)) {
        this.panel.focus();

function checkPointerDown(e) {
    if (container.contains(e.target)) return;
    if (config.clickOutsideDeactivates) {
      deactivate({
        returnFocus: !tabbable.isFocusable(e.target)
      });
      return;
    }
    // This is needed for mobile devices.
    // (If we'll only let `click` events through,
    // then on mobile they will be blocked anyways if `touchstart` is blocked.)
    if (config.allowOutsideClick && config.allowOutsideClick(e)) {
      return;
    }
    e.preventDefault();
  }

private checkPointerDown(e): void {
        if (this.container.contains(e.target)) return;

        if (this.config.clickOutsideDeactivates) {
            this.deactivate({
                returnFocus: !tabbable.isFocusable(e.target)
            });

            return;
        }

        // This is needed for mobile devices.
        // (If we'll only let `click` events through,
        // then on mobile they will be blocked anyways if `touchstart` is blocked.)
        if (this.config.allowOutsideClick && this.config.allowOutsideClick(e)) {
            return;
        }

        e.preventDefault();
    }

console.warn(
            `EuiDataGridHeaderCell expects at most 1 tabbable element, ${
              tababbles.length
            } found instead`
          );
        }
        for (let i = 0; i < tababbles.length; i++) {
          const element = tababbles[i];
          element.setAttribute('data-euigrid-tab-managed', 'true');
          element.setAttribute('tabIndex', '-1');
        }
      }

      if (isCellEntered) {
        enableInteractives();
        const tabbables = tabbable(headerRef.current!);
        if (tabbables.length > 0) {
          tabbables[0].focus();
        }
      } else {
        disableInteractives();
      }
    }
  }, [isCellEntered]);