index.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500
  1. /*!
  2. * tabbable 5.3.3
  3. * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
  4. */
  5. 'use strict';
  6. Object.defineProperty(exports, '__esModule', { value: true });
  7. var candidateSelectors = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]:not(slot)', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', 'details>summary:first-of-type', 'details'];
  8. var candidateSelector = /* #__PURE__ */candidateSelectors.join(',');
  9. var NoElement = typeof Element === 'undefined';
  10. var matches = NoElement ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
  11. var getRootNode = !NoElement && Element.prototype.getRootNode ? function (element) {
  12. return element.getRootNode();
  13. } : function (element) {
  14. return element.ownerDocument;
  15. };
  16. /**
  17. * @param {Element} el container to check in
  18. * @param {boolean} includeContainer add container to check
  19. * @param {(node: Element) => boolean} filter filter candidates
  20. * @returns {Element[]}
  21. */
  22. var getCandidates = function getCandidates(el, includeContainer, filter) {
  23. var candidates = Array.prototype.slice.apply(el.querySelectorAll(candidateSelector));
  24. if (includeContainer && matches.call(el, candidateSelector)) {
  25. candidates.unshift(el);
  26. }
  27. candidates = candidates.filter(filter);
  28. return candidates;
  29. };
  30. /**
  31. * @callback GetShadowRoot
  32. * @param {Element} element to check for shadow root
  33. * @returns {ShadowRoot|boolean} ShadowRoot if available or boolean indicating if a shadowRoot is attached but not available.
  34. */
  35. /**
  36. * @callback ShadowRootFilter
  37. * @param {Element} shadowHostNode the element which contains shadow content
  38. * @returns {boolean} true if a shadow root could potentially contain valid candidates.
  39. */
  40. /**
  41. * @typedef {Object} CandidatesScope
  42. * @property {Element} scope contains inner candidates
  43. * @property {Element[]} candidates
  44. */
  45. /**
  46. * @typedef {Object} IterativeOptions
  47. * @property {GetShadowRoot|boolean} getShadowRoot true if shadow support is enabled; falsy if not;
  48. * if a function, implies shadow support is enabled and either returns the shadow root of an element
  49. * or a boolean stating if it has an undisclosed shadow root
  50. * @property {(node: Element) => boolean} filter filter candidates
  51. * @property {boolean} flatten if true then result will flatten any CandidatesScope into the returned list
  52. * @property {ShadowRootFilter} shadowRootFilter filter shadow roots;
  53. */
  54. /**
  55. * @param {Element[]} elements list of element containers to match candidates from
  56. * @param {boolean} includeContainer add container list to check
  57. * @param {IterativeOptions} options
  58. * @returns {Array.<Element|CandidatesScope>}
  59. */
  60. var getCandidatesIteratively = function getCandidatesIteratively(elements, includeContainer, options) {
  61. var candidates = [];
  62. var elementsToCheck = Array.from(elements);
  63. while (elementsToCheck.length) {
  64. var element = elementsToCheck.shift();
  65. if (element.tagName === 'SLOT') {
  66. // add shadow dom slot scope (slot itself cannot be focusable)
  67. var assigned = element.assignedElements();
  68. var content = assigned.length ? assigned : element.children;
  69. var nestedCandidates = getCandidatesIteratively(content, true, options);
  70. if (options.flatten) {
  71. candidates.push.apply(candidates, nestedCandidates);
  72. } else {
  73. candidates.push({
  74. scope: element,
  75. candidates: nestedCandidates
  76. });
  77. }
  78. } else {
  79. // check candidate element
  80. var validCandidate = matches.call(element, candidateSelector);
  81. if (validCandidate && options.filter(element) && (includeContainer || !elements.includes(element))) {
  82. candidates.push(element);
  83. } // iterate over shadow content if possible
  84. var shadowRoot = element.shadowRoot || // check for an undisclosed shadow
  85. typeof options.getShadowRoot === 'function' && options.getShadowRoot(element);
  86. var validShadowRoot = !options.shadowRootFilter || options.shadowRootFilter(element);
  87. if (shadowRoot && validShadowRoot) {
  88. // add shadow dom scope IIF a shadow root node was given; otherwise, an undisclosed
  89. // shadow exists, so look at light dom children as fallback BUT create a scope for any
  90. // child candidates found because they're likely slotted elements (elements that are
  91. // children of the web component element (which has the shadow), in the light dom, but
  92. // slotted somewhere _inside_ the undisclosed shadow) -- the scope is created below,
  93. // _after_ we return from this recursive call
  94. var _nestedCandidates = getCandidatesIteratively(shadowRoot === true ? element.children : shadowRoot.children, true, options);
  95. if (options.flatten) {
  96. candidates.push.apply(candidates, _nestedCandidates);
  97. } else {
  98. candidates.push({
  99. scope: element,
  100. candidates: _nestedCandidates
  101. });
  102. }
  103. } else {
  104. // there's not shadow so just dig into the element's (light dom) children
  105. // __without__ giving the element special scope treatment
  106. elementsToCheck.unshift.apply(elementsToCheck, element.children);
  107. }
  108. }
  109. }
  110. return candidates;
  111. };
  112. var getTabindex = function getTabindex(node, isScope) {
  113. if (node.tabIndex < 0) {
  114. // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
  115. // `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
  116. // yet they are still part of the regular tab order; in FF, they get a default
  117. // `tabIndex` of 0; since Chrome still puts those elements in the regular tab
  118. // order, consider their tab index to be 0.
  119. // Also browsers do not return `tabIndex` correctly for contentEditable nodes;
  120. // so if they don't have a tabindex attribute specifically set, assume it's 0.
  121. //
  122. // isScope is positive for custom element with shadow root or slot that by default
  123. // have tabIndex -1, but need to be sorted by document order in order for their
  124. // content to be inserted in the correct position
  125. if ((isScope || /^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || node.isContentEditable) && isNaN(parseInt(node.getAttribute('tabindex'), 10))) {
  126. return 0;
  127. }
  128. }
  129. return node.tabIndex;
  130. };
  131. var sortOrderedTabbables = function sortOrderedTabbables(a, b) {
  132. return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex;
  133. };
  134. var isInput = function isInput(node) {
  135. return node.tagName === 'INPUT';
  136. };
  137. var isHiddenInput = function isHiddenInput(node) {
  138. return isInput(node) && node.type === 'hidden';
  139. };
  140. var isDetailsWithSummary = function isDetailsWithSummary(node) {
  141. var r = node.tagName === 'DETAILS' && Array.prototype.slice.apply(node.children).some(function (child) {
  142. return child.tagName === 'SUMMARY';
  143. });
  144. return r;
  145. };
  146. var getCheckedRadio = function getCheckedRadio(nodes, form) {
  147. for (var i = 0; i < nodes.length; i++) {
  148. if (nodes[i].checked && nodes[i].form === form) {
  149. return nodes[i];
  150. }
  151. }
  152. };
  153. var isTabbableRadio = function isTabbableRadio(node) {
  154. if (!node.name) {
  155. return true;
  156. }
  157. var radioScope = node.form || getRootNode(node);
  158. var queryRadios = function queryRadios(name) {
  159. return radioScope.querySelectorAll('input[type="radio"][name="' + name + '"]');
  160. };
  161. var radioSet;
  162. if (typeof window !== 'undefined' && typeof window.CSS !== 'undefined' && typeof window.CSS.escape === 'function') {
  163. radioSet = queryRadios(window.CSS.escape(node.name));
  164. } else {
  165. try {
  166. radioSet = queryRadios(node.name);
  167. } catch (err) {
  168. // eslint-disable-next-line no-console
  169. console.error('Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s', err.message);
  170. return false;
  171. }
  172. }
  173. var checked = getCheckedRadio(radioSet, node.form);
  174. return !checked || checked === node;
  175. };
  176. var isRadio = function isRadio(node) {
  177. return isInput(node) && node.type === 'radio';
  178. };
  179. var isNonTabbableRadio = function isNonTabbableRadio(node) {
  180. return isRadio(node) && !isTabbableRadio(node);
  181. };
  182. var isZeroArea = function isZeroArea(node) {
  183. var _node$getBoundingClie = node.getBoundingClientRect(),
  184. width = _node$getBoundingClie.width,
  185. height = _node$getBoundingClie.height;
  186. return width === 0 && height === 0;
  187. };
  188. var isHidden = function isHidden(node, _ref) {
  189. var displayCheck = _ref.displayCheck,
  190. getShadowRoot = _ref.getShadowRoot;
  191. // NOTE: visibility will be `undefined` if node is detached from the document
  192. // (see notes about this further down), which means we will consider it visible
  193. // (this is legacy behavior from a very long way back)
  194. // NOTE: we check this regardless of `displayCheck="none"` because this is a
  195. // _visibility_ check, not a _display_ check
  196. if (getComputedStyle(node).visibility === 'hidden') {
  197. return true;
  198. }
  199. var isDirectSummary = matches.call(node, 'details>summary:first-of-type');
  200. var nodeUnderDetails = isDirectSummary ? node.parentElement : node;
  201. if (matches.call(nodeUnderDetails, 'details:not([open]) *')) {
  202. return true;
  203. } // The root node is the shadow root if the node is in a shadow DOM; some document otherwise
  204. // (but NOT _the_ document; see second 'If' comment below for more).
  205. // If rootNode is shadow root, it'll have a host, which is the element to which the shadow
  206. // is attached, and the one we need to check if it's in the document or not (because the
  207. // shadow, and all nodes it contains, is never considered in the document since shadows
  208. // behave like self-contained DOMs; but if the shadow's HOST, which is part of the document,
  209. // is hidden, or is not in the document itself but is detached, it will affect the shadow's
  210. // visibility, including all the nodes it contains). The host could be any normal node,
  211. // or a custom element (i.e. web component). Either way, that's the one that is considered
  212. // part of the document, not the shadow root, nor any of its children (i.e. the node being
  213. // tested).
  214. // If rootNode is not a shadow root, it won't have a host, and so rootNode should be the
  215. // document (per the docs) and while it's a Document-type object, that document does not
  216. // appear to be the same as the node's `ownerDocument` for some reason, so it's safer
  217. // to ignore the rootNode at this point, and use `node.ownerDocument`. Otherwise,
  218. // using `rootNode.contains(node)` will _always_ be true we'll get false-positives when
  219. // node is actually detached.
  220. var nodeRootHost = getRootNode(node).host;
  221. var nodeIsAttached = (nodeRootHost === null || nodeRootHost === void 0 ? void 0 : nodeRootHost.ownerDocument.contains(nodeRootHost)) || node.ownerDocument.contains(node);
  222. if (!displayCheck || displayCheck === 'full') {
  223. if (typeof getShadowRoot === 'function') {
  224. // figure out if we should consider the node to be in an undisclosed shadow and use the
  225. // 'non-zero-area' fallback
  226. var originalNode = node;
  227. while (node) {
  228. var parentElement = node.parentElement;
  229. var rootNode = getRootNode(node);
  230. if (parentElement && !parentElement.shadowRoot && getShadowRoot(parentElement) === true // check if there's an undisclosed shadow
  231. ) {
  232. // node has an undisclosed shadow which means we can only treat it as a black box, so we
  233. // fall back to a non-zero-area test
  234. return isZeroArea(node);
  235. } else if (node.assignedSlot) {
  236. // iterate up slot
  237. node = node.assignedSlot;
  238. } else if (!parentElement && rootNode !== node.ownerDocument) {
  239. // cross shadow boundary
  240. node = rootNode.host;
  241. } else {
  242. // iterate up normal dom
  243. node = parentElement;
  244. }
  245. }
  246. node = originalNode;
  247. } // else, `getShadowRoot` might be true, but all that does is enable shadow DOM support
  248. // (i.e. it does not also presume that all nodes might have undisclosed shadows); or
  249. // it might be a falsy value, which means shadow DOM support is disabled
  250. // Since we didn't find it sitting in an undisclosed shadow (or shadows are disabled)
  251. // now we can just test to see if it would normally be visible or not, provided it's
  252. // attached to the main document.
  253. // NOTE: We must consider case where node is inside a shadow DOM and given directly to
  254. // `isTabbable()` or `isFocusable()` -- regardless of `getShadowRoot` option setting.
  255. if (nodeIsAttached) {
  256. // this works wherever the node is: if there's at least one client rect, it's
  257. // somehow displayed; it also covers the CSS 'display: contents' case where the
  258. // node itself is hidden in place of its contents; and there's no need to search
  259. // up the hierarchy either
  260. return !node.getClientRects().length;
  261. } // Else, the node isn't attached to the document, which means the `getClientRects()`
  262. // API will __always__ return zero rects (this can happen, for example, if React
  263. // is used to render nodes onto a detached tree, as confirmed in this thread:
  264. // https://github.com/facebook/react/issues/9117#issuecomment-284228870)
  265. //
  266. // It also means that even window.getComputedStyle(node).display will return `undefined`
  267. // because styles are only computed for nodes that are in the document.
  268. //
  269. // NOTE: THIS HAS BEEN THE CASE FOR YEARS. It is not new, nor is it caused by tabbable
  270. // somehow. Though it was never stated officially, anyone who has ever used tabbable
  271. // APIs on nodes in detached containers has actually implicitly used tabbable in what
  272. // was later (as of v5.2.0 on Apr 9, 2021) called `displayCheck="none"` mode -- essentially
  273. // considering __everything__ to be visible because of the innability to determine styles.
  274. } else if (displayCheck === 'non-zero-area') {
  275. // NOTE: Even though this tests that the node's client rect is non-zero to determine
  276. // whether it's displayed, and that a detached node will __always__ have a zero-area
  277. // client rect, we don't special-case for whether the node is attached or not. In
  278. // this mode, we do want to consider nodes that have a zero area to be hidden at all
  279. // times, and that includes attached or not.
  280. return isZeroArea(node);
  281. } // visible, as far as we can tell, or per current `displayCheck` mode
  282. return false;
  283. }; // form fields (nested) inside a disabled fieldset are not focusable/tabbable
  284. // unless they are in the _first_ <legend> element of the top-most disabled
  285. // fieldset
  286. var isDisabledFromFieldset = function isDisabledFromFieldset(node) {
  287. if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(node.tagName)) {
  288. var parentNode = node.parentElement; // check if `node` is contained in a disabled <fieldset>
  289. while (parentNode) {
  290. if (parentNode.tagName === 'FIELDSET' && parentNode.disabled) {
  291. // look for the first <legend> among the children of the disabled <fieldset>
  292. for (var i = 0; i < parentNode.children.length; i++) {
  293. var child = parentNode.children.item(i); // when the first <legend> (in document order) is found
  294. if (child.tagName === 'LEGEND') {
  295. // if its parent <fieldset> is not nested in another disabled <fieldset>,
  296. // return whether `node` is a descendant of its first <legend>
  297. return matches.call(parentNode, 'fieldset[disabled] *') ? true : !child.contains(node);
  298. }
  299. } // the disabled <fieldset> containing `node` has no <legend>
  300. return true;
  301. }
  302. parentNode = parentNode.parentElement;
  303. }
  304. } // else, node's tabbable/focusable state should not be affected by a fieldset's
  305. // enabled/disabled state
  306. return false;
  307. };
  308. var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(options, node) {
  309. if (node.disabled || isHiddenInput(node) || isHidden(node, options) || // For a details element with a summary, the summary element gets the focus
  310. isDetailsWithSummary(node) || isDisabledFromFieldset(node)) {
  311. return false;
  312. }
  313. return true;
  314. };
  315. var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(options, node) {
  316. if (isNonTabbableRadio(node) || getTabindex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {
  317. return false;
  318. }
  319. return true;
  320. };
  321. var isValidShadowRootTabbable = function isValidShadowRootTabbable(shadowHostNode) {
  322. var tabIndex = parseInt(shadowHostNode.getAttribute('tabindex'), 10);
  323. if (isNaN(tabIndex) || tabIndex >= 0) {
  324. return true;
  325. } // If a custom element has an explicit negative tabindex,
  326. // browsers will not allow tab targeting said element's children.
  327. return false;
  328. };
  329. /**
  330. * @param {Array.<Element|CandidatesScope>} candidates
  331. * @returns Element[]
  332. */
  333. var sortByOrder = function sortByOrder(candidates) {
  334. var regularTabbables = [];
  335. var orderedTabbables = [];
  336. candidates.forEach(function (item, i) {
  337. var isScope = !!item.scope;
  338. var element = isScope ? item.scope : item;
  339. var candidateTabindex = getTabindex(element, isScope);
  340. var elements = isScope ? sortByOrder(item.candidates) : element;
  341. if (candidateTabindex === 0) {
  342. isScope ? regularTabbables.push.apply(regularTabbables, elements) : regularTabbables.push(element);
  343. } else {
  344. orderedTabbables.push({
  345. documentOrder: i,
  346. tabIndex: candidateTabindex,
  347. item: item,
  348. isScope: isScope,
  349. content: elements
  350. });
  351. }
  352. });
  353. return orderedTabbables.sort(sortOrderedTabbables).reduce(function (acc, sortable) {
  354. sortable.isScope ? acc.push.apply(acc, sortable.content) : acc.push(sortable.content);
  355. return acc;
  356. }, []).concat(regularTabbables);
  357. };
  358. var tabbable = function tabbable(el, options) {
  359. options = options || {};
  360. var candidates;
  361. if (options.getShadowRoot) {
  362. candidates = getCandidatesIteratively([el], options.includeContainer, {
  363. filter: isNodeMatchingSelectorTabbable.bind(null, options),
  364. flatten: false,
  365. getShadowRoot: options.getShadowRoot,
  366. shadowRootFilter: isValidShadowRootTabbable
  367. });
  368. } else {
  369. candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
  370. }
  371. return sortByOrder(candidates);
  372. };
  373. var focusable = function focusable(el, options) {
  374. options = options || {};
  375. var candidates;
  376. if (options.getShadowRoot) {
  377. candidates = getCandidatesIteratively([el], options.includeContainer, {
  378. filter: isNodeMatchingSelectorFocusable.bind(null, options),
  379. flatten: true,
  380. getShadowRoot: options.getShadowRoot
  381. });
  382. } else {
  383. candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorFocusable.bind(null, options));
  384. }
  385. return candidates;
  386. };
  387. var isTabbable = function isTabbable(node, options) {
  388. options = options || {};
  389. if (!node) {
  390. throw new Error('No node provided');
  391. }
  392. if (matches.call(node, candidateSelector) === false) {
  393. return false;
  394. }
  395. return isNodeMatchingSelectorTabbable(options, node);
  396. };
  397. var focusableCandidateSelector = /* #__PURE__ */candidateSelectors.concat('iframe').join(',');
  398. var isFocusable = function isFocusable(node, options) {
  399. options = options || {};
  400. if (!node) {
  401. throw new Error('No node provided');
  402. }
  403. if (matches.call(node, focusableCandidateSelector) === false) {
  404. return false;
  405. }
  406. return isNodeMatchingSelectorFocusable(options, node);
  407. };
  408. exports.focusable = focusable;
  409. exports.isFocusable = isFocusable;
  410. exports.isTabbable = isTabbable;
  411. exports.tabbable = tabbable;
  412. //# sourceMappingURL=index.js.map