diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js
index f47daa42..3735a352 100644
--- a/src/__tests__/role-helpers.js
+++ b/src/__tests__/role-helpers.js
@@ -205,6 +205,7 @@ test.each([
['
', true],
['', true],
['', true],
+ ['', true],
])('shouldExcludeFromA11yTree for %s returns %p', (html, expected) => {
const {container} = render(html)
container.firstChild.appendChild(document.createElement('button'))
diff --git a/src/__tests__/role.js b/src/__tests__/role.js
index cf598583..d5e0cf81 100644
--- a/src/__tests__/role.js
+++ b/src/__tests__/role.js
@@ -175,6 +175,25 @@ test('by default excludes elements which have aria-hidden="true" or any of their
`)
})
+test('by default excludes elements which have inert attribute or any of their parents', () => {
+ const {getByRole} = render('')
+
+ expect(() => getByRole('list')).toThrowErrorMatchingInlineSnapshot(`
+ Unable to find an accessible element with the role "list"
+
+ 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
+
+ Ignored nodes: comments, script, style
+
+ `)
+})
+
test('considers the computed visibility style not the parent', () => {
// this behavior deviates from the spec which includes "any descendant"
// if visibility is hidden. However, chrome a11y tree and nvda will include
diff --git a/src/role-helpers.js b/src/role-helpers.js
index 8d7e7cb0..9e931016 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -21,6 +21,10 @@ function isSubtreeInaccessible(element) {
return true
}
+ if (element.hasAttribute('inert')) {
+ return true
+ }
+
const window = element.ownerDocument.defaultView
if (window.getComputedStyle(element).display === 'none') {
return true