feat(ByRole): Treat inert subtrees as hidden in role queries

src/__tests__/role-helpers.js

@@ -205,6 +205,7 @@ test.each([
   ['<div style="display: none;"/>', true],
   ['<div style="visibility: hidden;"/>', true],
   ['<div aria-hidden="true" />', true],
+  ['<div inert />', true],
 ])('shouldExcludeFromA11yTree for %s returns %p', (html, expected) => {
   const {container} = render(html)
   container.firstChild.appendChild(document.createElement('button'))

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('<div inert><ul /></div>')
+
+  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
+    <div>
+      <div
+        inert=""
+      >
+        <ul />
+      </div>
+    </div>
+  `)
+})
+
 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

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