Tab Focus Trapping mit textArea führt dazu, dass Trap den Container verlässt ⇐ JavaScript

[Anonymous]

Ich führe Focus Trapping mit der Tabulatortaste durch und wenn ich mit der Tabulatortaste den Textbereich verlasse, verlässt die Tabulatortaste den Container. Wenn ich stattdessen eine Eingabe verwende, funktioniert die Fokusüberfüllung ... Haben Sie eine Idee, warum die Fokusüberfüllung mit textarea nicht funktioniert?

Code: Select all

const container = document.getElementById("SpecialInstructionsWindow");

const getFocusables = () => {
return Array.from(
container.querySelectorAll(`textarea:not([disabled]), button:not([disabled]`)
).sort((a, b) =>
(a.dataset.focusOrder ?? 9999) - (b.dataset.focusOrder ?? 9999)
);
};

container.addEventListener("keydown", (e) => {
if (e.key !== "Tab") return;

const focusables = getFocusables();
if (focusables.length === 0) return;

const first = focusables[0];
const last = focusables[focusables.length - 1];

// TAB (forward)
if (!e.shiftKey && document.activeElement === last) {
first.focus();
e.preventDefault();
}
});

Code: Select all

Special Instructions