devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
115 lines (113 loc) • 4.09 kB
JavaScript
/**
* DevExtreme (cjs/__internal/grids/pivot_grid/keyboard_navigation/roving_tab_index.js)
* Version: 26.1.4
* Build date: Fri Jul 24 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.RovingTabIndex = void 0;
var _dom_adapter = _interopRequireDefault(require("../../../../core/dom_adapter"));
var _renderer = _interopRequireDefault(require("../../../../core/renderer"));
var _accessibility = require("../../../../ui/shared/accessibility");
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const NOT_FOCUSABLE_TAB_INDEX = "-1";
class RovingTabIndex {
constructor(options) {
this.options = options;
this.focusedItemIndex = 0
}
getItems() {
return this.options.getItems() ?? []
}
getFocusedItemIndex() {
return this.getActualItemIndex(this.getItems())
}
getFocusedItem() {
const items = this.getItems();
return items[this.getActualItemIndex(items)]
}
updateTabIndexes() {
const items = this.getItems();
if (!items.length) {
return
}
this.focusedItemIndex = this.getActualItemIndex(items);
items.forEach((item, index) => {
if (index === this.focusedItemIndex) {
(0, _accessibility.setTabIndex)(this.options.component, (0, _renderer.default)(item))
} else {
item.setAttribute("tabindex", "-1")
}
})
}
focusItem(itemOrIndex) {
var _this$options$scrollT, _this$options;
const items = this.getItems();
const index = "number" === typeof itemOrIndex ? itemOrIndex : items.indexOf(itemOrIndex);
if (index < 0 || index >= items.length) {
return
}
this.setFocusedItem(index, items);
this.updateTabIndexes();
const item = items[index];
null === (_this$options$scrollT = (_this$options = this.options).scrollToItem) || void 0 === _this$options$scrollT || _this$options$scrollT.call(_this$options, item);
item.focus({
preventScroll: true
})
}
containsActiveElement() {
const activeElement = _dom_adapter.default.getActiveElement();
return this.getItems().some(item => item === activeElement || item.contains(activeElement))
}
refocusFocusedItem() {
var _this$getFocusedItem;
null === (_this$getFocusedItem = this.getFocusedItem()) || void 0 === _this$getFocusedItem || _this$getFocusedItem.focus({
preventScroll: true
})
}
handleFocusIn(item) {
const items = this.getItems();
const index = items.indexOf(item);
if (index >= 0 && index !== this.focusedItemIndex) {
this.setFocusedItem(index, items);
this.updateTabIndexes()
}
}
reset() {
this.focusedItemIndex = 0;
this.focusedItemId = void 0
}
setFocusedItem(index, items) {
var _this$options$getItem, _this$options2;
this.focusedItemIndex = index;
this.focusedItemId = null === (_this$options$getItem = (_this$options2 = this.options).getItemId) || void 0 === _this$options$getItem ? void 0 : _this$options$getItem.call(_this$options2, items[index])
}
getActualItemIndex(items) {
const {
getItemId: getItemId
} = this.options;
if (getItemId && void 0 !== this.focusedItemId) {
const index = items.findIndex(item => getItemId(item) === this.focusedItemId);
if (index >= 0) {
return index
}
}
return this.getNormalizedItemIndex(items)
}
getNormalizedItemIndex(items) {
if (!items.length) {
return -1
}
return Math.min(Math.max(this.focusedItemIndex, 0), items.length - 1)
}
}
exports.RovingTabIndex = RovingTabIndex;