@testing-library/dom - npm Package Compare versions

Comparing version 6.3.0 to 6.4.0

dist/@testing-library/dom.cjs.js

@@ -720,3 +720,57 @@ 'use strict';
 var elementRoleList = buildElementRoleList(ariaQuery.elementRoles);
+/**
+ * Partial implementation https://www.w3.org/TR/wai-aria-1.2/#tree_exclusion
+ * which should only be used for elements with a non-presentational role i.e.
+ * `role="none"` and `role="presentation"` will not be excluded.
+ *
+ * Implements aria-hidden semantics (i.e. parent overrides child)
+ * Ignores "Child Presentational: True" characteristics
+ *
+ * @param {Element} element -
+ * @returns {boolean} true if excluded, otherwise false
+ */
 
+function shouldExcludeFromA11yTree(element) {
+  var computedStyle = window.getComputedStyle(element); // since visibility is inherited we can exit early
+
+  if (computedStyle.visibility === 'hidden') {
+    return true;
+  } // Remove once https://github.com/jsdom/jsdom/issues/2616 is fixed
+
+
+  var supportsStyleInheritance = computedStyle.visibility !== '';
+  var visibility = computedStyle.visibility;
+  var currentElement = element;
+
+  while (currentElement !== null) {
+    if (currentElement.hidden === true) {
+      return true;
+    }
+
+    if (currentElement.getAttribute('aria-hidden') === 'true') {
+      return true;
+    }
+
+    var currentComputedStyle = window.getComputedStyle(currentElement);
+
+    if (currentComputedStyle.display === 'none') {
+      return true;
+    }
+
+    if (supportsStyleInheritance === false) {
+      // we go bottom-up for an inheritable property so we can only set it
+      // if it wasn't set already i.e. the parent can't overwrite the child
+      if (visibility === '') visibility = currentComputedStyle.visibility;
+
+      if (visibility === 'hidden') {
+        return true;
+      }
+    }
+
+    currentElement = currentElement.parentElement;
+  }
+
+  return false;
+}
+
 function getImplicitAriaRoles(currentNode) {
@@ -796,3 +850,7 @@ for (var _iterator = elementRoleList, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
 
-function getRoles(container) {
+function getRoles(container, _temp) {
+  var _ref10 = _temp === void 0 ? {} : _temp,
+      _ref10$hidden = _ref10.hidden,
+      hidden = _ref10$hidden === void 0 ? false : _ref10$hidden;
+
   function flattenDOM(node) {
@@ -804,3 +862,5 @@ return [node].concat(Array.from(node.children).reduce(function (acc, child) {
 
-  return flattenDOM(container).reduce(function (acc, node) {
+  return flattenDOM(container).filter(function (element) {
+    return hidden === false ? shouldExcludeFromA11yTree(element) === false : true;
+  }).reduce(function (acc, node) {
     var roles = getImplicitAriaRoles(node);
@@ -815,7 +875,10 @@ return roles.reduce(function (rolesAcc, role) {
 
-function prettyRoles(dom) {
-  var roles = getRoles(dom);
-  return Object.entries(roles).map(function (_ref10) {
-    var role = _ref10[0],
-        elements = _ref10[1];
+function prettyRoles(dom, _ref11) {
+  var hidden = _ref11.hidden;
+  var roles = getRoles(dom, {
+    hidden: hidden
+  });
+  return Object.entries(roles).map(function (_ref12) {
+    var role = _ref12[0],
+        elements = _ref12[1];
     var delimiterBar = '-'.repeat(50);
@@ -829,4 +892,10 @@ var elementsString = elements.map(function (el) {
 
-var logRoles = function (dom) {
-  return console.log(prettyRoles(dom));
+var logRoles = function (dom, _temp2) {
+  var _ref13 = _temp2 === void 0 ? {} : _temp2,
+      _ref13$hidden = _ref13.hidden,
+      hidden = _ref13$hidden === void 0 ? false : _ref13$hidden;
+
+  return console.log(prettyRoles(dom, {
+    hidden: hidden
+  }));
 };
@@ -840,2 +909,4 @@ /* eslint no-console:0 */
       collapseWhitespace = _ref.collapseWhitespace,
+      _ref$hidden = _ref.hidden,
+      hidden = _ref$hidden === void 0 ? false : _ref$hidden,
       trim = _ref.trim,
@@ -850,3 +921,5 @@ normalizer = _ref.normalizer;
   });
-  return Array.from(container.querySelectorAll('*')).filter(function (node) {
+  return Array.from(container.querySelectorAll('*')).filter(function (element) {
+    return hidden === false ? shouldExcludeFromA11yTree(element) === false : true;
+  }).filter(function (node) {
     var isRoleSpecifiedExplicitly = node.hasAttribute('role');
@@ -869,13 +942,23 @@
 
-var getMissingError$5 = function (container, role) {
-  var roles = prettyRoles(container);
+var getMissingError$5 = function (container, role, _temp2) {
+  var _ref2 = _temp2 === void 0 ? {} : _temp2,
+      _ref2$hidden = _ref2.hidden,
+      hidden = _ref2$hidden === void 0 ? false : _ref2$hidden;
+
+  var roles = prettyRoles(container, {
+    hidden: hidden
+  });
   var roleMessage;
 
   if (roles.length === 0) {
-    roleMessage = 'There are no available roles.';
+    if (hidden === false) {
+      roleMessage = 'There are no accessible roles. But there might be some inaccessible roles. ' + 'If you wish to access them, then set the `hidden` option to `true`. ' + 'Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole';
+    } else {
+      roleMessage = 'There are no available roles.';
+    }
   } else {
-    roleMessage = ("\nHere are the available roles:\n\n  " + roles.replace(/\n/g, '\n  ').replace(/\n\s\s\n/g, '\n\n') + "\n").trim();
+    roleMessage = ("\nHere are the " + (hidden === false ? 'accessible' : 'available') + " roles:\n\n  " + roles.replace(/\n/g, '\n  ').replace(/\n\s\s\n/g, '\n\n') + "\n").trim();
   }
 
-  return ("\nUnable to find an element with the role \"" + role + "\"\n\n" + roleMessage).trim();
+  return ("\nUnable to find an " + (hidden === false ? 'accessible ' : '') + "element with the role \"" + role + "\"\n\n" + roleMessage).trim();
 };
@@ -882,0 +965,0 @@

dist/@testing-library/dom.esm.js

@@ -714,3 +714,57 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 var elementRoleList = buildElementRoleList(elementRoles);
+/**
+ * Partial implementation https://www.w3.org/TR/wai-aria-1.2/#tree_exclusion
+ * which should only be used for elements with a non-presentational role i.e.
+ * `role="none"` and `role="presentation"` will not be excluded.
+ *
+ * Implements aria-hidden semantics (i.e. parent overrides child)
+ * Ignores "Child Presentational: True" characteristics
+ *
+ * @param {Element} element -
+ * @returns {boolean} true if excluded, otherwise false
+ */
 
+function shouldExcludeFromA11yTree(element) {
+  var computedStyle = window.getComputedStyle(element); // since visibility is inherited we can exit early
+
+  if (computedStyle.visibility === 'hidden') {
+    return true;
+  } // Remove once https://github.com/jsdom/jsdom/issues/2616 is fixed
+
+
+  var supportsStyleInheritance = computedStyle.visibility !== '';
+  var visibility = computedStyle.visibility;
+  var currentElement = element;
+
+  while (currentElement !== null) {
+    if (currentElement.hidden === true) {
+      return true;
+    }
+
+    if (currentElement.getAttribute('aria-hidden') === 'true') {
+      return true;
+    }
+
+    var currentComputedStyle = window.getComputedStyle(currentElement);
+
+    if (currentComputedStyle.display === 'none') {
+      return true;
+    }
+
+    if (supportsStyleInheritance === false) {
+      // we go bottom-up for an inheritable property so we can only set it
+      // if it wasn't set already i.e. the parent can't overwrite the child
+      if (visibility === '') visibility = currentComputedStyle.visibility;
+
+      if (visibility === 'hidden') {
+        return true;
+      }
+    }
+
+    currentElement = currentElement.parentElement;
+  }
+
+  return false;
+}
+
 function getImplicitAriaRoles(currentNode) {
@@ -790,3 +844,7 @@ for (var _iterator = elementRoleList, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
 
-function getRoles(container) {
+function getRoles(container, _temp) {
+  var _ref10 = _temp === void 0 ? {} : _temp,
+      _ref10$hidden = _ref10.hidden,
+      hidden = _ref10$hidden === void 0 ? false : _ref10$hidden;
+
   function flattenDOM(node) {
@@ -798,3 +856,5 @@ return [node].concat(Array.from(node.children).reduce(function (acc, child) {
 
-  return flattenDOM(container).reduce(function (acc, node) {
+  return flattenDOM(container).filter(function (element) {
+    return hidden === false ? shouldExcludeFromA11yTree(element) === false : true;
+  }).reduce(function (acc, node) {
     var roles = getImplicitAriaRoles(node);
@@ -809,7 +869,10 @@ return roles.reduce(function (rolesAcc, role) {
 
-function prettyRoles(dom) {
-  var roles = getRoles(dom);
-  return Object.entries(roles).map(function (_ref10) {
-    var role = _ref10[0],
-        elements = _ref10[1];
+function prettyRoles(dom, _ref11) {
+  var hidden = _ref11.hidden;
+  var roles = getRoles(dom, {
+    hidden: hidden
+  });
+  return Object.entries(roles).map(function (_ref12) {
+    var role = _ref12[0],
+        elements = _ref12[1];
     var delimiterBar = '-'.repeat(50);
@@ -823,4 +886,10 @@ var elementsString = elements.map(function (el) {
 
-var logRoles = function (dom) {
-  return console.log(prettyRoles(dom));
+var logRoles = function (dom, _temp2) {
+  var _ref13 = _temp2 === void 0 ? {} : _temp2,
+      _ref13$hidden = _ref13.hidden,
+      hidden = _ref13$hidden === void 0 ? false : _ref13$hidden;
+
+  return console.log(prettyRoles(dom, {
+    hidden: hidden
+  }));
 };
@@ -834,2 +903,4 @@ /* eslint no-console:0 */
       collapseWhitespace = _ref.collapseWhitespace,
+      _ref$hidden = _ref.hidden,
+      hidden = _ref$hidden === void 0 ? false : _ref$hidden,
       trim = _ref.trim,
@@ -844,3 +915,5 @@ normalizer = _ref.normalizer;
   });
-  return Array.from(container.querySelectorAll('*')).filter(function (node) {
+  return Array.from(container.querySelectorAll('*')).filter(function (element) {
+    return hidden === false ? shouldExcludeFromA11yTree(element) === false : true;
+  }).filter(function (node) {
     var isRoleSpecifiedExplicitly = node.hasAttribute('role');
@@ -863,13 +936,23 @@
 
-var getMissingError$5 = function (container, role) {
-  var roles = prettyRoles(container);
+var getMissingError$5 = function (container, role, _temp2) {
+  var _ref2 = _temp2 === void 0 ? {} : _temp2,
+      _ref2$hidden = _ref2.hidden,
+      hidden = _ref2$hidden === void 0 ? false : _ref2$hidden;
+
+  var roles = prettyRoles(container, {
+    hidden: hidden
+  });
   var roleMessage;
 
   if (roles.length === 0) {
-    roleMessage = 'There are no available roles.';
+    if (hidden === false) {
+      roleMessage = 'There are no accessible roles. But there might be some inaccessible roles. ' + 'If you wish to access them, then set the `hidden` option to `true`. ' + 'Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole';
+    } else {
+      roleMessage = 'There are no available roles.';
+    }
   } else {
-    roleMessage = ("\nHere are the available roles:\n\n  " + roles.replace(/\n/g, '\n  ').replace(/\n\s\s\n/g, '\n\n') + "\n").trim();
+    roleMessage = ("\nHere are the " + (hidden === false ? 'accessible' : 'available') + " roles:\n\n  " + roles.replace(/\n/g, '\n  ').replace(/\n\s\s\n/g, '\n\n') + "\n").trim();
   }
 
-  return ("\nUnable to find an element with the role \"" + role + "\"\n\n" + roleMessage).trim();
+  return ("\nUnable to find an " + (hidden === false ? 'accessible ' : '') + "element with the role \"" + role + "\"\n\n" + roleMessage).trim();
 };
@@ -876,0 +959,0 @@

dist/queries/role.js

@@ -16,2 +16,3 @@ "use strict";
   collapseWhitespace,
+  hidden = false,
   trim,
@@ -26,3 +27,5 @@ normalizer
   });
-  return Array.from(container.querySelectorAll('*')).filter(node => {
+  return Array.from(container.querySelectorAll('*')).filter(element => {
+    return hidden === false ? (0, _roleHelpers.shouldExcludeFromA11yTree)(element) === false : true;
+  }).filter(node => {
     const isRoleSpecifiedExplicitly = node.hasAttribute('role');
@@ -41,11 +44,19 @@
 
-const getMissingError = (container, role) => {
-  const roles = (0, _roleHelpers.prettyRoles)(container);
+const getMissingError = (container, role, {
+  hidden = false
+} = {}) => {
+  const roles = (0, _roleHelpers.prettyRoles)(container, {
+    hidden
+  });
   let roleMessage;
 
   if (roles.length === 0) {
-    roleMessage = 'There are no available roles.';
+    if (hidden === false) {
+      roleMessage = 'There are no accessible roles. But there might be some inaccessible roles. ' + 'If you wish to access them, then set the `hidden` option to `true`. ' + 'Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole';
+    } else {
+      roleMessage = 'There are no available roles.';
+    }
   } else {
     roleMessage = `
-Here are the available roles:
+Here are the ${hidden === false ? 'accessible' : 'available'} roles:
 
@@ -57,3 +68,3 @@ ${roles.replace(/\n/g, '\n  ').replace(/\n\s\s\n/g, '\n\n')}
   return `
-Unable to find an element with the role "${role}"
+Unable to find an ${hidden === false ? 'accessible ' : ''}element with the role "${role}"
 
@@ -60,0 +71,0 @@ ${roleMessage}`.trim();

dist/role-helpers.js

@@ -11,2 +11,3 @@ "use strict";
 exports.prettyRoles = prettyRoles;
+exports.shouldExcludeFromA11yTree = shouldExcludeFromA11yTree;
 exports.logRoles = void 0;
@@ -21,3 +22,57 @@
 const elementRoleList = buildElementRoleList(_ariaQuery.elementRoles);
+/**
+ * Partial implementation https://www.w3.org/TR/wai-aria-1.2/#tree_exclusion
+ * which should only be used for elements with a non-presentational role i.e.
+ * `role="none"` and `role="presentation"` will not be excluded.
+ *
+ * Implements aria-hidden semantics (i.e. parent overrides child)
+ * Ignores "Child Presentational: True" characteristics
+ *
+ * @param {Element} element -
+ * @returns {boolean} true if excluded, otherwise false
+ */
 
+function shouldExcludeFromA11yTree(element) {
+  const computedStyle = window.getComputedStyle(element); // since visibility is inherited we can exit early
+
+  if (computedStyle.visibility === 'hidden') {
+    return true;
+  } // Remove once https://github.com/jsdom/jsdom/issues/2616 is fixed
+
+
+  const supportsStyleInheritance = computedStyle.visibility !== '';
+  let visibility = computedStyle.visibility;
+  let currentElement = element;
+
+  while (currentElement !== null) {
+    if (currentElement.hidden === true) {
+      return true;
+    }
+
+    if (currentElement.getAttribute('aria-hidden') === 'true') {
+      return true;
+    }
+
+    const currentComputedStyle = window.getComputedStyle(currentElement);
+
+    if (currentComputedStyle.display === 'none') {
+      return true;
+    }
+
+    if (supportsStyleInheritance === false) {
+      // we go bottom-up for an inheritable property so we can only set it
+      // if it wasn't set already i.e. the parent can't overwrite the child
+      if (visibility === '') visibility = currentComputedStyle.visibility;
+
+      if (visibility === 'hidden') {
+        return true;
+      }
+    }
+
+    currentElement = currentElement.parentElement;
+  }
+
+  return false;
+}
+
 function getImplicitAriaRoles(currentNode) {
@@ -74,3 +129,5 @@ for (const _ref of elementRoleList) {
 
-function getRoles(container) {
+function getRoles(container, {
+  hidden = false
+} = {}) {
   function flattenDOM(node) {
@@ -80,3 +137,5 @@ return [node, ...Array.from(node.children).reduce((acc, child) => [...acc, ...flattenDOM(child)], [])];
 
-  return flattenDOM(container).reduce((acc, node) => {
+  return flattenDOM(container).filter(element => {
+    return hidden === false ? shouldExcludeFromA11yTree(element) === false : true;
+  }).reduce((acc, node) => {
     const roles = getImplicitAriaRoles(node);
@@ -91,4 +150,8 @@ return roles.reduce((rolesAcc, role) => Array.isArray(rolesAcc[role]) ? (0, _extends2.default)({}, rolesAcc, {
 
-function prettyRoles(dom) {
-  const roles = getRoles(dom);
+function prettyRoles(dom, {
+  hidden
+}) {
+  const roles = getRoles(dom, {
+    hidden
+  });
   return Object.entries(roles).map(([role, elements]) => {
@@ -101,3 +164,7 @@ const delimiterBar = '-'.repeat(50);
 
-const logRoles = dom => console.log(prettyRoles(dom));
+const logRoles = (dom, {
+  hidden = false
+} = {}) => console.log(prettyRoles(dom, {
+  hidden
+}));
 /* eslint no-console:0 */
@@ -104,0 +171,0 @@

package.json

 {
   "name": "@testing-library/dom",
-  "version": "6.3.0",
+  "version": "6.4.0",
   "description": "Simple and complete DOM testing utilities that encourage good testing practices.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -215,3 +215,3 @@ <div align="center">
   <tr>
-    <td align="center"><a href="https://twitter.com/sebsilbermann"><img src="https://avatars3.githubusercontent.com/u/12292047?v=4" width="100px;" alt="Sebastian Silbermann"/><br /><sub><b>Sebastian Silbermann</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=eps1lon" title="Code">💻</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=eps1lon" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://twitter.com/sebsilbermann"><img src="https://avatars3.githubusercontent.com/u/12292047?v=4" width="100px;" alt="Sebastian Silbermann"/><br /><sub><b>Sebastian Silbermann</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=eps1lon" title="Code">💻</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=eps1lon" title="Tests">⚠️</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=eps1lon" title="Documentation">📖</a></td>
     <td align="center"><a href="https://dylanvann.com/"><img src="https://avatars0.githubusercontent.com/u/1537615?v=4" width="100px;" alt="Dylan Vann"/><br /><sub><b>Dylan Vann</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=DylanVann" title="Code">💻</a></td>
@@ -218,0 +218,0 @@ <td align="center"><a href="https://afontcu.dev"><img src="https://avatars0.githubusercontent.com/u/9197791?v=4" width="100px;" alt="Adrià Fontcuberta"/><br /><sub><b>Adrià Fontcuberta</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=afontcu" title="Code">💻</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=afontcu" title="Tests">⚠️</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=afontcu" title="Documentation">📖</a></td>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1643363

increased by1.28%

Lines of code

14959

increased by1.87%

No dependency changes