fix: support inert attribute and <search> element in role queries

src/__tests__/role-helpers.js

@@ -197,6 +197,13 @@ test('getImplicitAriaRoles returns expected roles for various dom nodes', () =>
   expect(getImplicitAriaRoles(input)).toEqual(['textbox'])
 })
 
+test('getImplicitAriaRoles returns search role for <search> element', () => {
+  const {container} = render('<search>Search content</search>')
+  expect(getImplicitAriaRoles(container.querySelector('search'))).toEqual([
+    'search',
+  ])
+})
+
 test.each([
   ['<div />', false],
   ['<div aria-hidden="false" />', false],
@@ -205,9 +212,17 @@ 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'))
 
   expect(isInaccessible(container.querySelector('button'))).toBe(expected)
 })
+
+test('elements nested in inert subtree are inaccessible', () => {
+  const {container} = render(
+    '<div inert><span><button>click me</button></span></div>',
+  )
+  expect(isInaccessible(container.querySelector('button'))).toBe(true)
+})

src/role-helpers.js

@@ -21,6 +21,10 @@ function isSubtreeInaccessible(element) {
     return true
   }
 
+  if (element.hasAttribute('inert') || element.closest('[inert]')) {
+    return true
+  }
+
   const window = element.ownerDocument.defaultView
   if (window.getComputedStyle(element).display === 'none') {
     return true
@@ -74,6 +78,15 @@ function getImplicitAriaRoles(currentNode) {
     }
   }
 
+  // Handle elements not yet in aria-query's elementRoles map
+  // See: https://github.com/testing-library/dom-testing-library/issues/1359
+  // The <search> element has an implicit 'search' role per the HTML-ARIA spec
+  // but aria-query 5.3.0 does not include it in elementRoles.
+  // This can be removed once aria-query includes this mapping.
+  if (currentNode.tagName === 'SEARCH') {
+    return ['search']
+  }
+
   return []
 }