@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
56 lines • 2.68 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
export var PRESERVE_TABINDEX_CLASSNAME = 'md-nav-preserve-tabindex';
var FOCUSABLE_ELEMENT_SELECTORS = 'a[href], button, mdc-button, input, textarea, select, details, [tabindex]';
var PRESERVE_TABINDEX_SELECTORS = "[data-preserve-tabindex],.".concat(PRESERVE_TABINDEX_CLASSNAME);
var defaultOptions = {
includeTabbableOnly: true,
excludePreserveTabindex: true,
};
/**
* Returns all focusable child elements as an Element Array
*
* An element focusable if it:
* - it is interactive element (anchor with href, button, input, textarea, select and details)
* - it is not disabled
* - it is not hidden
* - it or any of its parents do not have `aria-hidden=true` attribute
* - it or any of its parents do not have `data-preserve-tabindex` attribute or `
* md-nav-preserve-tabindex` class
* - it has none empty or not "-1" tabindex, see `includeTabbableOnly` parameter
*
* @remarks
* Element with 0 tabindex can be tabbed to, while elements with any tabindex value can be
* manually focused
*
* @param root Element lookup starts from this element
* @param options Options to customize the behavior
*/
export function getKeyboardFocusableElements(root, options) {
var _a = __assign(__assign({}, defaultOptions), options), includeTabbableOnly = _a.includeTabbableOnly, excludePreserveTabindex = _a.excludePreserveTabindex;
var tabindex = includeTabbableOnly ? '-1' : '';
var preserveTabindexContainers = excludePreserveTabindex
? Array.from(root.querySelectorAll(PRESERVE_TABINDEX_SELECTORS))
: [];
// Exclude elements with `aris-hidden=true` attribute and all their children
var ariaHiddenContainers = Array.from(root.querySelectorAll('[aria-hidden="true"]'));
return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENT_SELECTORS)).filter(function (el) {
return !el.hasAttribute('disabled') &&
el.getAttribute('hidden') === null &&
el.getAttribute('tabindex') !== tabindex &&
// note: container.contains(container) is true
!preserveTabindexContainers.some(function (p) { return p.contains(el); }) &&
!ariaHiddenContainers.some(function (p) { return p.contains(el); }) &&
!el.hasAttribute('data-exclude-focus');
});
}
//# sourceMappingURL=navigation.js.map