From 7ca596558a00c3d1336018ca3c4b03a2d2a7395f Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 16 Dec 2024 10:15:03 -0800 Subject: [PATCH] fix: use inert on host elements instead of aria-hidden when host element is hidden (#11056) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **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: ​…​​#shadow-root (open)
​…​
​slot BEGIN_COMMIT_OVERRIDE END_COMMIT_OVERRIDE --- packages/calcite-components/src/components/alert/alert.tsx | 3 +-- packages/calcite-components/src/components/popover/popover.tsx | 2 +- packages/calcite-components/src/components/tooltip/tooltip.tsx | 3 +-- .../src/components/tree-item/tree-item.e2e.ts | 2 +- .../calcite-components/src/components/tree-item/tree-item.tsx | 2 +- 5 files changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index 56536cea50a..59431f93a64 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/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 before. In Stencil, 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 before. In Stencil, 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); diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx index df943334e49..d43df30659e 100644 --- a/packages/calcite-components/src/components/popover/popover.tsx +++ b/packages/calcite-components/src/components/popover/popover.tsx @@ -561,7 +561,7 @@ export class Popover ) : null; /* TODO: [MIGRATION] This used before. In Stencil, 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 before. In Stencil, 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 before. In Stencil, props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */ diff --git a/packages/calcite-components/src/components/tooltip/tooltip.tsx b/packages/calcite-components/src/components/tooltip/tooltip.tsx index 822abc435d3..befcfb164f4 100644 --- a/packages/calcite-components/src/components/tooltip/tooltip.tsx +++ b/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 before. In Stencil, 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 before. In Stencil, 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 before. In Stencil, props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */ diff --git a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts index 2d7cd2ceb2d..f657f4332e6 100644 --- a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts +++ b/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); }); }); diff --git a/packages/calcite-components/src/components/tree-item/tree-item.tsx b/packages/calcite-components/src/components/tree-item/tree-item.tsx index 0daa035b74e..057e0c02866 100644 --- a/packages/calcite-components/src/components/tree-item/tree-item.tsx +++ b/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 before. In Stencil, 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 before. In Stencil, 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 before. In Stencil, 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 before. In Stencil, props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */