andreasbm / focus-trap

A lightweight web component that traps focus within a DOM node

@a11y/focus-trap

A lightweight web component that traps focus within a DOM node
_{A focus trap ensures that tab and shift + tab keys will cycle through the focus trap's tabbable elements but not leave the focus trap. This is great for making accessible modals. Go here to see a demo https://appnest-demo.firebaseapp.com/focus-trap/.}

• Does one things very very well - it traps the focus!
• Pierces through the shadow roots when looking for focusable elements.
• Works right out of the box (just add it to your markup)
• Created using only vanilla js - no dependencies and framework agnostic!

➤ Installation

npm i @a11y/focus-trap

➤ Usage

Import @a11y/focus-trap somewhere in your code and you're ready to go! Simply add the focus trap to your html and it'll be working without any more effort from your part.

<focus-trap>
  <button>Focus 1</button>
  <button>Focus 2</button>
  <button>Focus 3</button>
  <button>Focus 4</button>
  <button>Focus 5</button>
</focus-trap>

➤ API

The focus-trap element implements the following interface.

interface IFocusTrap {
  // Returns whether or not the focus trap is inactive.
  inactive: boolean;

  // Returns whether the focus trap currently has focus.
  readonly focused: boolean;

  // Focuses the first focusable element in the focus trap.
  focusFirstElement: (() => void);

  // Focuses the last focusable element in the focus trap.
  focusLastElement: (() => void);

  // Returns a list of the focusable children found within the element.
  getFocusableElements: (() => HTMLElement[]);
}

➤ License

Licensed under MIT.

focus-trap's Issues

Slot traversal issue

I think I've found an issue where for some cases, a focusable element does not properly get included in the set of trapped elements.

The component is written using Lit Element and the render method looks like this:

render() {
    if (!this.open) return html``;
    return html`
      ${this._fabricStylesheet}
      <focus-trap>
        <div @click="${this._dismiss}" class="${c.backdrop}">
          <div
            class="${c.modal}"
            tabindex="-1"
            role="dialog"
            aria-modal="true"
            aria-labelledby="fabric_modal_id"
            @click="${this._containerClick}"
            @keydown="${this._containerKeyDown}"
          >
            <div class="${c.title}">
              ${this.left ? html`
              <button type="button" aria-label="Tilbake" class="${this._leftButtonClasses}" @click="${this._dismiss}">
                ${leftButtonSvg}
              </button>` : ''}
              <div id="fabric_modal_id" class="${this._titleClasses}">
                <p class="${c.titleText}">
                  <slot name="title"></slot>
                </p>
              </div>
              ${this.right ? html`
              <button type="button" aria-label="Lukk" class="${this._rightButtonClasses}" @click="${this._dismiss}">
                ${rightButtonSvg}
              </button>` : ''}
            </div>
            <div class="${c.content}">
              <slot></slot>
            </div>
            <div class="${c.footer}">
              <slot name="footer"></slot>
            </div>
          </div>
        </div>
      </focus-trap>
    `;

Some examples

This works...

<f-modal right>
  This is the main content
  <button>one</button>
  <button>two</button>
  <button>three</button>
</f-modal>

clip1.mov

And this works...

<f-modal right>
  <h1 slot="title">
    <button>header button</button>
  </h1>
  This is the main content
  <button>one</button>
  <button>two</button>
  <button>three</button>
</f-modal>

clip2.mov

But this does not work...
The right hand x button is not included in the trap. Except.. that if you use shift + tab you can get to it. If you tab, it is skipped.

<f-modal right>
  <h1 slot="title">header</h1>
  This is the main content
  <button>one</button>
  <button>two</button>
  <button>three</button>
</f-modal>

clip3.mov

Is this a bug or am I doing something wrong here?

Thanks!

link in demo is broken

Hi Andreas,

in your demo, https://appnest-demo.firebaseapp.com/focus-trap/ the link
<a href="http://forums.devshed.com/html-programming-1/safari-submit-button-wont-focus-tab-key-effectively-488012.html" target="_blank">here</a>
seems broken.

Congratulations for your work!

aria-disabled should be focusable

Currently, focus-trap doesn't allow for focusing of elements with aria-disabled=true. For accessibility reasons, aria-disabled=true is often used instead of disabled to allow for the element to be tabbed to. Can we at least get an opt-in option to not consider elements with aria-disabled=true when determining whether it can be focused?

Thanks!

focus-trap/src/lib/focusable.ts

Line 29 in efe5491

|| ($elem.hasAttribute("aria-disabled") && $elem.getAttribute("aria-disabled") !== "false");

Would it be possible to add an attribute to automatically set first element

It would be useful if we could declaratively set the first node as focused automatically. Something like:

<focus-trap focus-first="true" ></focus-trap>

This would only be actioned when the element is initially created. Is this something that would be possible?