fix(a11y): track inert elements as hidden (microsoft#36947)

Author: agg23

packages/injected/src/roleUtils.ts

@@ -284,10 +284,10 @@ export function isElementHiddenForAria(element: Element): boolean {
   const isOptionInsideSelect = element.nodeName === 'OPTION' && !!element.closest('select');
   if (!isOptionInsideSelect && !isSlot && !isElementStyleVisibilityVisible(element, style))
     return true;
-  return belongsToDisplayNoneOrAriaHiddenOrNonSlotted(element);
+  return belongsToDisplayNoneOrAriaHiddenOrNonSlottedOrInert(element);
 }
 
-function belongsToDisplayNoneOrAriaHiddenOrNonSlotted(element: Element): boolean {
+function belongsToDisplayNoneOrAriaHiddenOrNonSlottedOrInert(element: Element): boolean {
   let hidden = cacheIsHidden?.get(element);
   if (hidden === undefined) {
     hidden = false;
@@ -298,17 +298,17 @@ function belongsToDisplayNoneOrAriaHiddenOrNonSlotted(element: Element): boolean
     if (element.parentElement && element.parentElement.shadowRoot && !element.assignedSlot)
       hidden = true;
 
-    // display:none and aria-hidden=true are considered hidden for aria.
+    // display:none and aria-hidden=true and inert are considered hidden for aria.
     if (!hidden) {
       const style = getElementComputedStyle(element);
-      hidden = !style || style.display === 'none' || getAriaBoolean(element.getAttribute('aria-hidden')) === true;
+      hidden = !style || style.display === 'none' || getAriaBoolean(element.getAttribute('aria-hidden')) === true || element.getAttribute('inert') !== null;
     }
 
     // Check recursively.
     if (!hidden) {
       const parent = parentElementOrShadowHost(element);
       if (parent)
-        hidden = belongsToDisplayNoneOrAriaHiddenOrNonSlotted(parent);
+        hidden = belongsToDisplayNoneOrAriaHiddenOrNonSlottedOrInert(parent);
     }
     cacheIsHidden?.set(element, hidden);
   }

tests/library/role-utils.spec.ts

@@ -564,6 +564,32 @@ test('should support search element', async ({ page }) => {
   await expect.soft(page.getByRole('search', { name: 'example' })).toBeVisible();
 });
 
+test('should consider inert elements to be hidden', async ({ page }) => {
+  await page.setContent(`
+        <div aria-hidden="true">
+            <button type="button">First</button>
+        </div>
+        <div inert>
+            <button type="button">Second</button>
+        </div>
+        <button type="button" inert>Third</button>
+    `);
+
+  await expect(page.getByRole('button', { name: 'First' })).toHaveCount(0);
+  await expect(page.getByRole('button', { name: 'Second' })).toHaveCount(0);
+  await expect(page.getByRole('button', { name: 'Third' })).toHaveCount(0);
+
+  await expect(
+      page.getByRole('button', { name: 'First', includeHidden: true })
+  ).toHaveCount(1);
+  await expect(
+      page.getByRole('button', { name: 'Second', includeHidden: true })
+  ).toHaveCount(1);
+  await expect(
+      page.getByRole('button', { name: 'Third', includeHidden: true })
+  ).toHaveCount(1);
+});
+
 function toArray(x: any): any[] {
   return Array.isArray(x) ? x : [x];
 }