fix: use inert on host elements instead of aria-hidden when host elem…

…ent is hidden (#11056)

**Related Issue:** #10731

## Summary

This will address the following Chrome console error caused by using the
`ariaHidden` prop (after #10310):

> Blocked aria-hidden on an element because its descendant retained
focus. The focus must not be hidden from assistive technology users.
Avoid using aria-hidden on a focused element or its ancestor. Consider
using the inert attribute instead, which will also prevent focus. For
more details, see the aria-hidden section of the WAI-ARIA specification
at https://w3c.github.io/aria/#aria-hidden.
Element with focus: span
Ancestor with aria-hidden: <calcite-popover
reference-element=​"reference-element" placement=​"auto"
offset-distance=​"6" offset-skidding=​"0" text-close=​"Close"
aria-hidden=​"true" aria-live=​"polite"
id=​"calcite-popover-a872ffbb-85e1-5c2c-6f14-8108c4821728"
role=​"dialog" overlay-positioning=​"absolute" scale=​"m"
calcite-hydrated>​…​</calcite-popover>​#shadow-root (open)<div
style=​"width:​ 300px;​ padding:​12px
16px;​">​…​</div>​slot</calcite-popover>

BEGIN_COMMIT_OVERRIDE
END_COMMIT_OVERRIDE

packages/calcite-components/src/components/alert/alert.tsx

@@ -13,7 +13,6 @@ import {
   focusFirstTabbable,
   setRequestedIcon,
   slotChangeHasAssignedElement,
-  toAriaBoolean,
 } from "../../utils/dom";
 import { MenuPlacement } from "../../utils/floating-ui";
 import { getIconScale } from "../../utils/component";
@@ -408,7 +407,7 @@ export class Alert extends LitElement implements OpenCloseComponent, LoadableCom
     const effectiveIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
     const hasQueuedAlerts = openAlertCount > 1;
     /* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */
-    this.el.ariaHidden = toAriaBoolean(hidden);
+    this.el.inert = hidden;
     /* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */
     this.el.ariaLabel = label;
     this.el.toggleAttribute("calcite-hydrated-hidden", hidden);

packages/calcite-components/src/components/popover/popover.tsx

@@ -561,7 +561,7 @@ export class Popover
       <FloatingArrow floatingLayout={floatingLayout} key="floating-arrow" ref={this.storeArrowEl} />
     ) : null;
     /* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */
-    this.el.ariaHidden = toAriaBoolean(hidden);
+    this.el.inert = hidden;
     /* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */
     this.el.ariaLabel = label;
     /* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */

packages/calcite-components/src/components/tooltip/tooltip.tsx

@@ -9,7 +9,6 @@ import {
   JsxNode,
   setAttribute,
 } from "@arcgis/lumina";
-import { toAriaBoolean } from "../../utils/dom";
 import {
   connectFloatingUI,
   defaultOffsetDistance,
@@ -313,7 +312,7 @@ export class Tooltip extends LitElement implements FloatingUIComponent, OpenClos
     const displayed = referenceEl && open;
     const hidden = !displayed;
     /* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */
-    this.el.ariaHidden = toAriaBoolean(hidden);
+    this.el.inert = hidden;
     /* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */
     this.el.ariaLabel = label;
     /* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */

packages/calcite-components/src/components/tree-item/tree-item.e2e.ts

@@ -288,7 +288,7 @@ describe("calcite-tree-item", () => {
       await btn.click();
 
       const item = await page.find("#newbie");
-      expect(item).toEqualAttribute("aria-hidden", "false");
+      expect(item.inert).toBe(false);
       expect(item.tabIndex).toBe(0);
     });
   });

packages/calcite-components/src/components/tree-item/tree-item.tsx

@@ -433,7 +433,7 @@ export class TreeItem extends LitElement implements InteractiveComponent {
     /* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */
     this.el.ariaExpanded = this.hasChildren ? toAriaBoolean(isExpanded) : undefined;
     /* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */
-    this.el.ariaHidden = toAriaBoolean(hidden);
+    this.el.inert = hidden;
     /* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */
     this.el.ariaLive = "polite";
     /* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */