Package Exports

focus-trap-js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (focus-trap-js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

focus-trap-js

Trap focus inside specified HTML element. Vanilla JS with size <0.5kb. No dependencies.

Browser Support: IE 10, Firefox, Chrome.

Note

No event listeners, it is just handling the current event, and traps the focus if it is neccessary.

Instalation

npm i focus-trap-js

Usage

import focusTrap from "focus-trap-js";

const popupContainer = document.getElementById("popupId");

document.addEventListener("keydown", event => {
  focusTrap(event, popupContainer);
});

The method focusTrap accepts two parameters, the event and HTML element in which you want to trap your focus.

Usage in React

import React from "react";
import focusTrap from "focus-trap-js";

const Container = () => {
  const contRef = React.useRef();

  React.useEffect(() => {
    const handleKeyEvent = event => {
      focusTrap(event, contRef.current);
    };
    document.addEventListener("keydown", handleKeyEvent);
    return () => {
      document.removeEventListener("keydown", handleKeyEvent);
    };
  }, [contRef]);

  return <div ref={contRef}></div>;
};

List of Tabbable Elements

const tabbableQuery = [
  "input",
  "select",
  "textarea",
  "a[href]",
  "button",
  "[tabindex]", //tabIndex > 0
  "audio[controls]",
  "video[controls]",
  '[contenteditable]:not([contenteditable="false"])'
];