@octopusdeploy/design-system-components
Version:
The design systems component library.
131 lines (130 loc) • 6.34 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@testing-library/react");
const user_event_1 = __importDefault(require("@testing-library/user-event"));
const vitest_1 = require("vitest");
const useFocusTrap_1 = require("../useFocusTrap");
(0, vitest_1.describe)("useFocusTrap", () => {
(0, vitest_1.it)("should trap focus and cycle forward through focusable elements when Tab is pressed", async () => {
const user = user_event_1.default.setup();
const { firstButton, secondButton, thirdButton } = renderFocusTrapContainer();
firstButton.focus();
(0, vitest_1.expect)(firstButton).toHaveFocus();
await user.keyboard("{Tab}");
(0, vitest_1.expect)(secondButton).toHaveFocus();
await user.keyboard("{Tab}");
(0, vitest_1.expect)(thirdButton).toHaveFocus();
await user.keyboard("{Tab}");
(0, vitest_1.expect)(firstButton).toHaveFocus();
});
(0, vitest_1.it)("should trap focus and cycle backward through focusable elements when Shift+Tab is pressed", async () => {
const user = user_event_1.default.setup();
const { firstButton, secondButton, thirdButton } = renderFocusTrapContainer();
thirdButton.focus();
(0, vitest_1.expect)(thirdButton).toHaveFocus();
await user.keyboard("{Shift>}{Tab}{/Shift}");
(0, vitest_1.expect)(secondButton).toHaveFocus();
await user.keyboard("{Shift>}{Tab}{/Shift}");
(0, vitest_1.expect)(firstButton).toHaveFocus();
await user.keyboard("{Shift>}{Tab}{/Shift}");
(0, vitest_1.expect)(thirdButton).toHaveFocus();
});
(0, vitest_1.it)("should not trap focus when enabled is false", async () => {
const user = user_event_1.default.setup();
const { firstButton, secondButton, thirdButton } = renderFocusTrapContainer({ enabled: false });
firstButton.focus();
(0, vitest_1.expect)(firstButton).toHaveFocus();
await user.keyboard("{Tab}");
(0, vitest_1.expect)(secondButton).toHaveFocus();
await user.keyboard("{Tab}");
(0, vitest_1.expect)(thirdButton).toHaveFocus();
await user.keyboard("{Tab}");
(0, vitest_1.expect)(firstButton).not.toHaveFocus();
});
(0, vitest_1.describe)("hidden element filtering", () => {
(0, vitest_1.it)("should skip elements with the hidden attribute", async () => {
const user = user_event_1.default.setup();
const { firstButton, thirdButton } = renderFocusTrapContainer({ hiddenButtonIndex: 1 });
firstButton.focus();
(0, vitest_1.expect)(firstButton).toHaveFocus();
// Second button is hidden — should skip straight to third
await user.keyboard("{Tab}");
(0, vitest_1.expect)(thirdButton).toHaveFocus();
});
(0, vitest_1.it)("should skip elements with display:none", async () => {
const user = user_event_1.default.setup();
const { firstButton, thirdButton } = renderFocusTrapContainer({ displayNoneButtonIndex: 1 });
firstButton.focus();
(0, vitest_1.expect)(firstButton).toHaveFocus();
// Second button has display:none — should skip straight to third
await user.keyboard("{Tab}");
(0, vitest_1.expect)(thirdButton).toHaveFocus();
});
(0, vitest_1.it)("should skip elements with visibility:hidden", async () => {
const user = user_event_1.default.setup();
const { firstButton, thirdButton } = renderFocusTrapContainer({ visibilityHiddenButtonIndex: 1 });
firstButton.focus();
(0, vitest_1.expect)(firstButton).toHaveFocus();
// Second button has visibility:hidden — should skip straight to third
await user.keyboard("{Tab}");
(0, vitest_1.expect)(thirdButton).toHaveFocus();
});
(0, vitest_1.it)("should skip elements inside an inert subtree", async () => {
const user = user_event_1.default.setup();
const { firstButton, thirdButton } = renderFocusTrapContainer({ inertButtonIndex: 1 });
firstButton.focus();
(0, vitest_1.expect)(firstButton).toHaveFocus();
// Second button is inside an inert wrapper — should skip straight to third
await user.keyboard("{Tab}");
(0, vitest_1.expect)(thirdButton).toHaveFocus();
});
});
});
function TestComponent({ focusContainer, enabled = true }) {
(0, useFocusTrap_1.useFocusTrap)(focusContainer, enabled);
return null;
}
function renderFocusTrapContainer(options = {}) {
const { enabled = true, hiddenButtonIndex, displayNoneButtonIndex, visibilityHiddenButtonIndex, inertButtonIndex } = options;
const container = document.createElement("div");
container.tabIndex = -1;
const buttons = ["First", "Second", "Third"].map((label) => {
const button = document.createElement("button");
button.textContent = label;
return button;
});
buttons.forEach((button, index) => {
if (index === hiddenButtonIndex) {
button.hidden = true;
}
if (index === displayNoneButtonIndex) {
button.style.display = "none";
}
if (index === visibilityHiddenButtonIndex) {
button.style.visibility = "hidden";
}
if (index === inertButtonIndex) {
const inertWrapper = document.createElement("div");
inertWrapper.setAttribute("inert", "");
inertWrapper.appendChild(button);
container.appendChild(inertWrapper);
}
else {
container.appendChild(button);
}
});
document.body.appendChild(container);
const { unmount } = (0, react_1.render)((0, jsx_runtime_1.jsx)(TestComponent, { focusContainer: container, enabled: enabled }));
const [firstButton, secondButton, thirdButton] = buttons;
return {
container,
firstButton,
secondButton,
thirdButton,
unmount,
};
}