Question

0

151

Vistas

When landing on last element of focus trap, it immediately goes back to the first element

I am running into an issue with focus trapping, I have a popup with a command bar that has 3 span elements that use icons, and when I tab through them it works fine, up until I tab over to the last element and as soon I land on it, it brings me right back to the first element, and what I was expecting to happen is when I tab away from the last element then it should go back to the first element.. Click on the Save Icon and use the tab key

const element = document.getElementById("PromptsDialog");
const focusableElements = element.querySelectorAll("span:not([disabled])");

const firstFocusableElement = focusableElements[0];
const lastFocusableElement = focusableElements[focusableElements.length - 1];
element.addEventListener("keyup", function(e) {
  if (e.key === "Tab") {
    if (document.activeElement === lastFocusableElement) {
      firstFocusableElement.focus();
      e.preventDefault();
    }
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="PromptsDialog" style="display: block;">
  <div class="prompt-title-bar">
    <h4 style="margin-top:-4px;">Options Prompt</h4>
    <div id="PromptsCommand" class="">
      <div style="height:inherit">
        <span type="" tabindex="1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save" class="" id="btnSaveWindow"><i class="fa fa-save"></i></span>
        <span type="" tabindex="2" data-toggle="tooltip" data-placement="top" title="" data-original-title="Remove Item" class="" id="btnRemoveFromItemsGrid"><i class="fa fa-trash"></i></span>
        <span type="" tabindex="3" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close" class="" id="btnClosePromptDialog"><i class="fa fa-remove"></i></span>
      </div>
    </div>
  </div>
</div>

Any idea on why it happens when I land on the last element?

Thanks!

about 4 years ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

Keydown is a better event and this works with shift-tab too

const element = document.getElementById("PromptsDialog");
const focusableElements = element.querySelectorAll("span:not([disabled])");
const lastIdx = focusableElements.length-1;
focusableElements.forEach((elem, i) => {
  elem.dataset.next = i < lastIdx ? i+1 : 0;
  elem.dataset.prev = i >= 1 ? i-1 : lastIdx;
})

element.addEventListener("keydown", function(e) { 
  if (e.key === "Tab") {
    e.preventDefault();
    const idx = +e.target.dataset[e.shiftKey ? "prev" : "next"];
    focusableElements[idx].focus();
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="PromptsDialog" style="display: block;">
  <div class="prompt-title-bar">
    <h4 style="margin-top:-4px;">Options Prompt</h4>
    <div id="PromptsCommand" class="">
      <div style="height:inherit">
        <span type="" tabindex="1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save" class="" id="btnSaveWindow"><i class="fa fa-save"></i></span>
        <span type="" tabindex="2" data-toggle="tooltip" data-placement="top" title="" data-original-title="Remove Item" class="" id="btnRemoveFromItemsGrid"><i class="fa fa-trash"></i></span>
        <span type="" tabindex="3" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close" class="" id="btnClosePromptDialog"><i class="fa fa-remove"></i></span>
      </div>
    </div>
  </div>
</div>

about 4 years ago · Juan Pablo Isaza Denunciar

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-08-24T01:36:39.717Z

It immediately goes back to the first element more or less because of the timing of events. In your code you are using the 'keyup' event, which triggers as soon as the 'Tab' key is released. However, the last element is focused when the 'Tab' key is pressed (down), and so pressing tab will first focus the last element, then execute your code when tab is released, immediately moving back to the first element.

An easy fix is to use the 'keydown' event instead.

const element = document.getElementById("PromptsDialog");
const focusableElements = element.querySelectorAll("span:not([disabled])");

const firstFocusableElement = focusableElements[0];
const lastFocusableElement = focusableElements[focusableElements.length - 1];
element.addEventListener("keydown", function(e) {
  if (e.key === "Tab") {
    if (document.activeElement === lastFocusableElement) {
      firstFocusableElement.focus();
      e.preventDefault();
    }
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="PromptsDialog" style="display: block;">
  <div class="prompt-title-bar">
    <h4 style="margin-top:-4px;">Options Prompt</h4>
    <div id="PromptsCommand" class="">
      <div style="height:inherit">
        <span type="" tabindex="1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save" class="" id="btnSaveWindow"><i class="fa fa-save"></i></span>
        <span type="" tabindex="2" data-toggle="tooltip" data-placement="top" title="" data-original-title="Remove Item" class="" id="btnRemoveFromItemsGrid"><i class="fa fa-trash"></i></span>
        <span type="" tabindex="3" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close" class="" id="btnClosePromptDialog"><i class="fa fa-remove"></i></span>
      </div>
    </div>
  </div>
</div>

0

151

When landing on last element of focus trap, it immediately goes back to the first element

2 Respuestas

0

0

Encuentra empleos remotos

Andres GPT