focusable.js 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. /**
  2. * Returns whether the element is hidden.
  3. * @param $elem
  4. */
  5. export function isHidden($elem) {
  6. return $elem.hasAttribute("hidden")
  7. || ($elem.hasAttribute("aria-hidden") && $elem.getAttribute("aria-hidden") !== "false")
  8. // A quick and dirty way to check whether the element is hidden.
  9. // For a more fine-grained check we could use "window.getComputedStyle" but we don't because of bad performance.
  10. // If the element has visibility set to "hidden" or "collapse", display set to "none" or opacity set to "0" through CSS
  11. // we won't be able to catch it here. We accept it due to the huge performance benefits.
  12. || $elem.style.display === `none`
  13. || $elem.style.opacity === `0`
  14. || $elem.style.visibility === `hidden`
  15. || $elem.style.visibility === `collapse`;
  16. // If offsetParent is null we can assume that the element is hidden
  17. // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null
  18. //|| $elem.offsetParent == null;
  19. }
  20. /**
  21. * Returns whether the element is disabled.
  22. * @param $elem
  23. */
  24. export function isDisabled($elem) {
  25. return $elem.hasAttribute("disabled")
  26. || ($elem.hasAttribute("aria-disabled") && $elem.getAttribute("aria-disabled") !== "false");
  27. }
  28. /**
  29. * Determines whether an element is focusable.
  30. * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194
  31. * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable
  32. * @param $elem
  33. */
  34. export function isFocusable($elem) {
  35. // Discard elements that are removed from the tab order.
  36. if ($elem.getAttribute("tabindex") === "-1" || isHidden($elem) || isDisabled($elem)) {
  37. return false;
  38. }
  39. return (
  40. // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists
  41. $elem.hasAttribute("tabindex")
  42. // Anchor tags or area tags with a href set
  43. || ($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) && $elem.hasAttribute("href")
  44. // Form elements which are not disabled
  45. || ($elem instanceof HTMLButtonElement
  46. || $elem instanceof HTMLInputElement
  47. || $elem instanceof HTMLTextAreaElement
  48. || $elem instanceof HTMLSelectElement)
  49. // IFrames
  50. || $elem instanceof HTMLIFrameElement);
  51. }
  52. //# sourceMappingURL=focusable.js.map