@carbon/react
Version:
React components for the Carbon Design System
46 lines (44 loc) • 1.7 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { ArrowLeft, ArrowRight } from "./keys.js";
import { match } from "./match.js";
//#region src/internal/keyboard/navigation.ts
/**
* A "ring buffer" function that takes an array and, depending on an ArrowRight
* or ArrowLeft key input, loops from last index to first or first index to last.
*
* @param key - the left or right arrow key (KeyboardEvent, number, or string)
* @param index - the current index in the array
* @param arrayLength - the total length of the array
*
* @example
* getNextIndex(keyCodes.RIGHT, 0, 4)
*/
const getNextIndex = (key, index, arrayLength) => {
if (match(key, ArrowRight)) return (index + 1) % arrayLength;
if (match(key, ArrowLeft)) return (index + arrayLength - 1) % arrayLength;
};
/**
* CSS selector that selects major nodes that are sequentially focusable.
*/
const selectorTabbable = `
a[href], area[href], input:not([disabled]):not([tabindex='-1']),
button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),
textarea:not([disabled]):not([tabindex='-1']),
iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]
`;
/**
* CSS selector that selects major nodes that are click focusable.
*/
const selectorFocusable = `
a[href], area[href], input:not([disabled]),
button:not([disabled]),select:not([disabled]),
textarea:not([disabled]),
iframe, object, embed, *[tabindex]:not([disabled]), *[contenteditable=true]
`;
//#endregion
export { getNextIndex, selectorFocusable, selectorTabbable };