A Primer on Focus Trapping

Focus trapping is a time period that refers to managing focus inside a component, such that focus all the time stays inside it:

If a person tries to tab out from the final ingredient, we return focus to the primary one.
If the person tries to Shift + Tab out of the primary ingredient, we return focus again to the final one.

This entire focus entice factor is used to create accessible modal dialogs because it’s an entire ‘nother bother to inert every thing else — however you don’t want it anymore if you happen to’re constructing modals with the dialog API (assuming you do it proper).

Anyway, again to focus trapping.

The entire course of sounds easy in principle, however it may well fairly tough to construct in follow, largely due to the quite a few elements to you bought to handle.

Easy and straightforward focus trapping with Splendid Labz

In case you are not averse to utilizing code constructed by others, you would possibly need to contemplate this snippet with the code I’ve created in Splendid Labz.

The fundamental concept is:

We detect all focusable components inside a component.
We handle focus with a keydown occasion listener.

import { getFocusableElements, trapFocus } from '@splendidlabz/utils/dom'

const dialog = doc.querySelector('dialog')

// Get all focusable content material
const focusables = getFocusableElements(node)

// Traps focus throughout the dialog
dialog.addEventListener('keydown', occasion => {
  trapFocus({ occasion, focusables })
})

The above code snippet makes focus trapping extraordinarily straightforward.

However, because you’re studying this, I’m certain you wanna know the small print that go inside every of those capabilities. Maybe you wanna construct your personal, or study what’s occurring. Both approach, each are cool — so let’s dive into it.

Choosing all focusable components

I did analysis once I wrote about this a while in the past. It looks like you might solely focus an a handful of components:

a
button
enter
textarea
choose
particulars
iframe
embed
object
abstract
dialog
audio[controls]
video[controls]
[contenteditable]
[tabindex]

So, step one in getFocusableElements is to seek for all focusable components inside a container:

export perform getFocusableElements(container = doc.physique ) {

  return {
    get all () {
      const components = Array.from(
        container.querySelectorAll(
          `a,
            button,
            enter,
            textarea,
            choose,
            particulars,
            iframe,
            embed,
            object,
            abstract,
            dialog,
            audio[controls],
            video[controls],
            [contenteditable],
            [tabindex]
          `,
        ),
      )
    }
  }
}

Subsequent, we need to filter away components which are disabled, hidden or set with show: none, since they can’t be targeted on. We are able to do that with a easy filter perform.

export perform getFocusableElements(container = doc.physique ) {

  return {
    get all () {
      // ...
      return components.filter(el => {
        if (el.hasAttribute('disabled')) return false
        if (el.hasAttribute('hidden')) return false
        if (window.getComputedStyle(el).show === 'none') return false
        return true
      })
    }
  }
}

Subsequent, since we need to entice keyboard focus, it’s solely pure to retrieve an inventory of keyboard-only focusable components. We are able to do this simply too. We solely must take away all tabindex values which are lower than 0.

export perform getFocusableElements(container = doc.physique ) {
  return {
    get all () { /* ... */ },
    get keyboardOnly() {
      return this.all.filter(el => el.tabIndex > -1)
    }
  }
}

Now, keep in mind that there are two issues we have to do for focus trapping:

If a person tries to tab out from the final ingredient, we return focus to the primary one.
If the person tries to Shift + Tab out of the primary ingredient, we return focus again to the final one.

This implies we want to have the ability to discover the primary focusable merchandise and the final focusable merchandise. Fortunately, we are able to add first and final getters to retrieve these components simply inside getFocusableElements.

On this case, since we’re coping with keyboard components, we are able to seize the primary and final objects from keyboardOnly:

export perform getFocusableElements(container = doc.physique ) {
  return {
    // ...
    get first() { return this.keyboardOnly[0] },
    get final() { return this.keyboardOnly[0] },
  }
}

We’ve every thing we want — subsequent is to implement the main focus trapping performance.

Methods to entice focus

First, we have to detect a keyboard occasion. We are able to do that simply with addEventListener:

const container = doc.querySelector('.some-element')
container.addEventListener('keydown', occasion => {/* ... */})

We have to test if the person is:

Urgent tab (with out Shift)
Urgent tab (with Shift)

Splendid Labz has handy capabilities to detect these as properly:

import { isTab, isShiftTab } from '@splendidlabz/utils/dom'

// ...
container.addEventListener('keydown', occasion => {
  if (isTab(occasion)) // Deal with Tab
  if (isShiftTab(occasion)) // Deal with Shift Tab
  /* ... */
})

In fact, within the spirit of studying, let’s work out how you can write the code from scratch:

You need to use occasion.key to detect whether or not the Tab secret is being pressed.
You need to use occasion.shiftKey to detect if the Shift secret is being pressed

Mix these two, it is possible for you to to put in writing your personal isTab and isShiftTab capabilities:

export perform isTab(occasion) {
  return !occasion.shiftKey && occasion.key === 'Tab'
}

export perform isShiftTab(occasion) {
  return occasion.shiftKey && occasion.key === 'Tab'
}

Since we’re solely dealing with the Tab key, we are able to use an early return assertion to skip the dealing with of different keys.

container.addEventListener('keydown', occasion => {
  if (occasion.key !== 'Tab') return

  if (isTab(occasion)) // Deal with Tab
  if (isShiftTab(occasion)) // Deal with Shift Tab
  /* ... */
})

We’ve nearly every thing we want now. The one factor is to know the place the present targeted ingredient is at — so we are able to resolve whether or not to entice focus or permit the default focus motion to proceed.

We are able to do that with doc.activeElement.

Going again to the steps:

Shift focus if person Tab on the final merchandise
Shift focus if the person Shift + Tab on the first merchandise

Naturally, you may inform that we have to test whether or not doc.activeElement is the primary or final focusable merchandise.

container.addEventListener('keydown', occasion => {
  // ...
  const focusables = getFocusableElements(container)
  const first = focusables.first
  const final = focusables.final

  if (doc.activeElement === final && isTab(occasion)) {
    // Shift focus to the primary merchandise
  }

  if (doc.activeElement === first && isShiftTab(occasion)) {
    // Shift focus to the final merchandise
  }
})

The ultimate step is to make use of focus to convey focus to the merchandise.

container.addEventListener('keydown', occasion => {
  // ...

  if (doc.activeElement === final && isTab(occasion)) {
    first.focus()
  }

  if (doc.activeElement === first && isShiftTab(occasion)) {
    final.focus()
  }
})

That’s it! Fairly easy if you happen to undergo the sequence step-by-step, isn’t it?

Last callout to Splendid Labz

As I resolve myself to cease instructing (a lot) and start constructing purposes, I discover myself needing many frequent elements, utilities, even kinds.

Since I’ve the aptitude to construct issues for myself, (plus the truth that I’m tremendous explicit in the case of good DX), I’ve determined to collect this stuff I discover or construct into a few easy-to-use libraries.

Simply sharing these with you in hopes that they may assist velocity up your improvement workflow.

Thanks for studying my shameless plug. All the very best for no matter you resolve to code!