is-hidden-with-css.js 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. import getComposedParent from './get-composed-parent';
  2. import { getNodeFromTree } from '../../core/utils';
  3. /**
  4. * Determine whether an element is hidden based on css
  5. * @method isHiddenWithCSS
  6. * @memberof axe.commons.dom
  7. * @instance
  8. * @param {HTMLElement} el The HTML Element
  9. * @param {Boolean} descendentVisibilityValue (Optional) immediate descendant visibility value used for recursive computation
  10. * @return {Boolean} the element's hidden status
  11. */
  12. function isHiddenWithCSS(el, descendentVisibilityValue) {
  13. const vNode = getNodeFromTree(el);
  14. if (!vNode) {
  15. return _isHiddenWithCSS(el, descendentVisibilityValue);
  16. }
  17. if (vNode._isHiddenWithCSS === void 0) {
  18. vNode._isHiddenWithCSS = _isHiddenWithCSS(el, descendentVisibilityValue);
  19. }
  20. return vNode._isHiddenWithCSS;
  21. }
  22. function _isHiddenWithCSS(el, descendentVisibilityValue) {
  23. if (el.nodeType === 9) {
  24. // 9 === Node.DOCUMENT
  25. return false;
  26. }
  27. if (el.nodeType === 11) {
  28. // 11 === Node.DOCUMENT_FRAGMENT_NODE
  29. el = el.host; // swap to host node
  30. }
  31. if (['STYLE', 'SCRIPT'].includes(el.nodeName.toUpperCase())) {
  32. return false;
  33. }
  34. const style = window.getComputedStyle(el, null);
  35. if (!style) {
  36. throw new Error('Style does not exist for the given element.');
  37. }
  38. const displayValue = style.getPropertyValue('display');
  39. if (displayValue === 'none') {
  40. return true;
  41. }
  42. const HIDDEN_VISIBILITY_VALUES = ['hidden', 'collapse'];
  43. const visibilityValue = style.getPropertyValue('visibility');
  44. if (
  45. HIDDEN_VISIBILITY_VALUES.includes(visibilityValue) &&
  46. !descendentVisibilityValue
  47. ) {
  48. return true;
  49. }
  50. if (
  51. HIDDEN_VISIBILITY_VALUES.includes(visibilityValue) &&
  52. descendentVisibilityValue &&
  53. HIDDEN_VISIBILITY_VALUES.includes(descendentVisibilityValue)
  54. ) {
  55. return true;
  56. }
  57. const parent = getComposedParent(el);
  58. if (parent && !HIDDEN_VISIBILITY_VALUES.includes(visibilityValue)) {
  59. return isHiddenWithCSS(parent, visibilityValue);
  60. }
  61. return false;
  62. }
  63. export default isHiddenWithCSS;