From dff564dcf0140910dea69a0616348d33b456146a Mon Sep 17 00:00:00 2001
From: Sylvester Kaczmarek
 <16242628+sylvesterkaczmarek@users.noreply.github.com>
Date: Tue, 15 Sep 2026 15:55:28 +0100
Subject: [PATCH 1/2] fix(web-components): #4451 preserve dialog content
 semantics

---
 .../src/components/ic-dialog/ic-dialog.tsx    |  1 -
 .../__snapshots__/ic-dialog.spec.ts.snap      | 22 +++++++++----------
 .../ic-dialog/test/basic/ic-dialog.spec.ts    | 21 ++++++++++++++++++
 .../ic-popover-menu.spec.ts.snap              |  2 +-
 4 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/packages/web-components/src/components/ic-dialog/ic-dialog.tsx b/packages/web-components/src/components/ic-dialog/ic-dialog.tsx
index 8e81320c9e7..dc5d618d1f2 100644
--- a/packages/web-components/src/components/ic-dialog/ic-dialog.tsx
+++ b/packages/web-components/src/components/ic-dialog/ic-dialog.tsx
@@ -431,7 +431,6 @@ export class Dialog {
           "disable-width-constraint": !!disableWidthConstraint,
         }}
         aria-labelledby="dialog-label dialog-heading"
-        aria-describedby="dialog-alert dialog-content"
         ref={(el) => (this.dialogEl = el)}
       >
         <div tabindex="0" onFocus={this.focusLast} />
diff --git a/packages/web-components/src/components/ic-dialog/test/basic/__snapshots__/ic-dialog.spec.ts.snap b/packages/web-components/src/components/ic-dialog/test/basic/__snapshots__/ic-dialog.spec.ts.snap
index 208753559fb..043870489e7 100644
--- a/packages/web-components/src/components/ic-dialog/test/basic/__snapshots__/ic-dialog.spec.ts.snap
+++ b/packages/web-components/src/components/ic-dialog/test/basic/__snapshots__/ic-dialog.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`ic-dialog component should render 1`] = `
 <ic-dialog class="ic-dialog-hidden ic-dialog-size-small" heading="Dialog heading" hide-default-controls="true">
   <template shadowrootmode="open">
-    <dialog aria-describedby="dialog-alert dialog-content" aria-labelledby="dialog-label dialog-heading" class="dialog small">
+    <dialog aria-labelledby="dialog-label dialog-heading" class="dialog small">
       <div tabindex="0"></div>
       <div class="heading-area">
         <div class="heading-content">
@@ -45,7 +45,7 @@ exports[`ic-dialog component should render 1`] = `
 exports[`ic-dialog component should render as large size 1`] = `
 <ic-dialog class="ic-dialog-hidden ic-dialog-size-large" heading="Dialog heading" hide-default-controls="true" size="large">
   <template shadowrootmode="open">
-    <dialog aria-describedby="dialog-alert dialog-content" aria-labelledby="dialog-label dialog-heading" class="dialog large">
+    <dialog aria-labelledby="dialog-label dialog-heading" class="dialog large">
       <div tabindex="0"></div>
       <div class="heading-area">
         <div class="heading-content">
@@ -87,7 +87,7 @@ exports[`ic-dialog component should render as large size 1`] = `
 exports[`ic-dialog component should render as large size and disableWidthConstraint is set 1`] = `
 <ic-dialog class="ic-dialog-hidden ic-dialog-size-large" disable-width-constraint="true" heading="Dialog heading" hide-default-controls="true" size="large">
   <template shadowrootmode="open">
-    <dialog aria-describedby="dialog-alert dialog-content" aria-labelledby="dialog-label dialog-heading" class="dialog disable-width-constraint large">
+    <dialog aria-labelledby="dialog-label dialog-heading" class="dialog disable-width-constraint large">
       <div tabindex="0"></div>
       <div class="heading-area">
         <div class="heading-content">
@@ -129,7 +129,7 @@ exports[`ic-dialog component should render as large size and disableWidthConstra
 exports[`ic-dialog component should render as medium size 1`] = `
 <ic-dialog class="ic-dialog-hidden ic-dialog-size-medium" heading="Dialog heading" hide-default-controls="true" size="medium">
   <template shadowrootmode="open">
-    <dialog aria-describedby="dialog-alert dialog-content" aria-labelledby="dialog-label dialog-heading" class="dialog medium">
+    <dialog aria-labelledby="dialog-label dialog-heading" class="dialog medium">
       <div tabindex="0"></div>
       <div class="heading-area">
         <div class="heading-content">
@@ -171,7 +171,7 @@ exports[`ic-dialog component should render as medium size 1`] = `
 exports[`ic-dialog component should render with a label 1`] = `
 <ic-dialog class="ic-dialog-hidden ic-dialog-size-small" heading="Dialog heading" hide-default-controls="true" label="Dialog label">
   <template shadowrootmode="open">
-    <dialog aria-describedby="dialog-alert dialog-content" aria-labelledby="dialog-label dialog-heading" class="dialog small">
+    <dialog aria-labelledby="dialog-label dialog-heading" class="dialog small">
       <div tabindex="0"></div>
       <div class="heading-area">
         <div class="heading-content">
@@ -215,7 +215,7 @@ exports[`ic-dialog component should render with a label 1`] = `
 exports[`ic-dialog component should render with no buttons 1`] = `
 <ic-dialog class="ic-dialog-hidden ic-dialog-size-small" heading="Dialog heading" hide-default-controls="true">
   <template shadowrootmode="open">
-    <dialog aria-describedby="dialog-alert dialog-content" aria-labelledby="dialog-label dialog-heading" class="dialog small">
+    <dialog aria-labelledby="dialog-label dialog-heading" class="dialog small">
       <div tabindex="0"></div>
       <div class="heading-area">
         <div class="heading-content">
@@ -251,7 +251,7 @@ exports[`ic-dialog component should render with no buttons 1`] = `
 exports[`ic-dialog component should render with slotted content 1`] = `
 <ic-dialog class="ic-dialog-hidden ic-dialog-size-small" heading="Dialog heading">
   <template shadowrootmode="open">
-    <dialog aria-describedby="dialog-alert dialog-content" aria-labelledby="dialog-label dialog-heading" class="dialog small">
+    <dialog aria-labelledby="dialog-label dialog-heading" class="dialog small">
       <div tabindex="0"></div>
       <div class="heading-area">
         <div class="heading-content">
@@ -333,7 +333,7 @@ exports[`ic-dialog component should render with slotted content 1`] = `
 exports[`ic-dialog component should render with slotted controls 1`] = `
 <ic-dialog class="ic-dialog-size-small" heading="Dialog heading" open="">
   <template shadowrootmode="open">
-    <dialog aria-describedby="dialog-alert dialog-content" aria-labelledby="dialog-label dialog-heading" class="dialog small">
+    <dialog aria-labelledby="dialog-label dialog-heading" class="dialog small">
       <div tabindex="0"></div>
       <div class="heading-area">
         <div class="heading-content">
@@ -386,7 +386,7 @@ exports[`ic-dialog component should render with slotted controls 1`] = `
 exports[`ic-dialog component should render with the close button 1`] = `
 <ic-dialog class="ic-dialog-hidden ic-dialog-size-small" heading="Dialog with close button test">
   <template shadowrootmode="open">
-    <dialog aria-describedby="dialog-alert dialog-content" aria-labelledby="dialog-label dialog-heading" class="dialog small">
+    <dialog aria-labelledby="dialog-label dialog-heading" class="dialog small">
       <div tabindex="0"></div>
       <div class="heading-area">
         <div class="heading-content">
@@ -446,7 +446,7 @@ exports[`ic-dialog component should render with the close button 1`] = `
 exports[`ic-dialog component should render with two default buttons 1`] = `
 <ic-dialog class="ic-dialog-hidden ic-dialog-size-small" heading="Dialog heading">
   <template shadowrootmode="open">
-    <dialog aria-describedby="dialog-alert dialog-content" aria-labelledby="dialog-label dialog-heading" class="dialog small">
+    <dialog aria-labelledby="dialog-label dialog-heading" class="dialog small">
       <div tabindex="0"></div>
       <div class="heading-area">
         <div class="heading-content">
@@ -506,7 +506,7 @@ exports[`ic-dialog component should render with two default buttons 1`] = `
 exports[`ic-dialog component should render without the close button 1`] = `
 <ic-dialog class="ic-dialog-hidden ic-dialog-size-small" heading="Dialog hide close button test" hide-close-button="true">
   <template shadowrootmode="open">
-    <dialog aria-describedby="dialog-alert dialog-content" aria-labelledby="dialog-label dialog-heading" class="dialog small">
+    <dialog aria-labelledby="dialog-label dialog-heading" class="dialog small">
       <div tabindex="0"></div>
       <div class="heading-area">
         <div class="heading-content">
diff --git a/packages/web-components/src/components/ic-dialog/test/basic/ic-dialog.spec.ts b/packages/web-components/src/components/ic-dialog/test/basic/ic-dialog.spec.ts
index 2328436bb66..fc69692cfdb 100644
--- a/packages/web-components/src/components/ic-dialog/test/basic/ic-dialog.spec.ts
+++ b/packages/web-components/src/components/ic-dialog/test/basic/ic-dialog.spec.ts
@@ -829,3 +829,24 @@ describe("ic-dialog component", () => {
     expect(shouldSkipElementResult).toBe(true);
   });
 });
+
+describe("ic-dialog aria description", () => {
+  it("should not flatten structured dialog content into aria-describedby", async () => {
+    const page = await newSpecPage({
+      components: [Dialog, Button],
+      html: `<ic-dialog heading="Dialog heading">
+        <p>Read the <a href="#details">details</a> before continuing.</p>
+      </ic-dialog>`,
+    });
+
+    const dialog = page.root?.shadowRoot?.querySelector("dialog");
+
+    expect(dialog?.hasAttribute("aria-describedby")).toBe(false);
+    expect(dialog?.getAttribute("aria-labelledby")).toBe(
+      "dialog-label dialog-heading"
+    );
+    expect(page.root?.querySelector("a")?.getAttribute("href")).toBe(
+      "#details"
+    );
+  });
+});
diff --git a/packages/web-components/src/components/ic-popover-menu/test/basic/__snapshots__/ic-popover-menu.spec.ts.snap b/packages/web-components/src/components/ic-popover-menu/test/basic/__snapshots__/ic-popover-menu.spec.ts.snap
index a5a568511d6..a46a368b09c 100644
--- a/packages/web-components/src/components/ic-popover-menu/test/basic/__snapshots__/ic-popover-menu.spec.ts.snap
+++ b/packages/web-components/src/components/ic-popover-menu/test/basic/__snapshots__/ic-popover-menu.spec.ts.snap
@@ -146,7 +146,7 @@ exports[`ic-popover-menu should render a menu item and menu group: should render
 exports[`ic-popover-menu should render on a dialog 1`] = `
 <ic-dialog class="ic-dialog-hidden ic-dialog-size-small">
   <template shadowrootmode="open">
-    <dialog aria-describedby="dialog-alert dialog-content" aria-labelledby="dialog-label dialog-heading" class="dialog small">
+    <dialog aria-labelledby="dialog-label dialog-heading" class="dialog small">
       <div tabindex="0"></div>
       <div class="heading-area">
         <div class="heading-content">

From 0d5d7a0247e05c25d791c6a7e9b9bf7f8718e6a2 Mon Sep 17 00:00:00 2001
From: Sylvester Kaczmarek
 <16242628+sylvesterkaczmarek@users.noreply.github.com>
Date: Tue, 15 Sep 2026 15:55:28 +0100
Subject: [PATCH 2/2] test(react): cover dialog content semantics

---
 .../component-tests/IcDialog/IcDialog.cy.tsx  | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/packages/react/src/component-tests/IcDialog/IcDialog.cy.tsx b/packages/react/src/component-tests/IcDialog/IcDialog.cy.tsx
index 79985cdca8c..0068151d813 100644
--- a/packages/react/src/component-tests/IcDialog/IcDialog.cy.tsx
+++ b/packages/react/src/component-tests/IcDialog/IcDialog.cy.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import { mount } from "cypress/react";
+import { IcDialog } from "../../components";
 import {
   NoBackgroundClickDialog,
   SimpleDialog,
@@ -804,3 +805,34 @@ describe("IcDialog visual regression tests in high contrast mode", () => {
     });
   });
 });
+
+describe("IcDialog structured content accessibility", () => {
+  beforeEach(() => {
+    cy.injectAxe();
+  });
+
+  it("should keep slotted links navigable instead of flattening dialog content", () => {
+    mount(
+      <IcDialog heading="Dialog heading" open>
+        <p>
+          Read the <a href="#details">details</a> before continuing.
+        </p>
+      </IcDialog>
+    );
+
+    cy.checkHydrated(DIALOG);
+    cy.get(DIALOG)
+      .shadow()
+      .find("dialog")
+      .should(NOT_HAVE_ATTR, "aria-describedby");
+    cy.get(DIALOG)
+      .shadow()
+      .find("dialog")
+      .should(HAVE_ATTR, "aria-labelledby", "dialog-label dialog-heading");
+
+    cy.get(DIALOG).find('a[href="#details"]').focus();
+    cy.focused().should(HAVE_ATTR, "href", "#details");
+
+    cy.checkA11yWithWait();
+  });
+});