Add ariaLabelledBy prop to Dialog

apps/website/screens/components/dialog/code/DialogCodePage.tsx

@@ -22,6 +22,19 @@ const sections = [
           </tr>
         </thead>
         <tbody>
+          <tr>
+            <td>
+              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
+                <StatusBadge status="new" />
+                ariaLabelledBy
+              </DxcFlex>
+            </td>
+            <td>
+              <TableCode>string</TableCode>
+            </td>
+            <td>Id of the element (usually the title of the dialog) that labels the dialog.</td>
+            <td>-</td>
+          </tr>
           <tr>
             <td>
               <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">

packages/lib/src/dialog/Dialog.test.tsx

@@ -50,6 +50,15 @@ describe("Dialog component tests", () => {
     expect(getByRole("dialog")).toBeTruthy();
     expect(getByRole("dialog").getAttribute("aria-modal")).toBe("false");
   });
+  test("Dialog is labelled by the element referenced in ariaLabelledBy", () => {
+    const { getByRole } = render(
+      <DxcDialog ariaLabelledBy="dialog-title">
+        <h2 id="dialog-title">Delivery address</h2>
+      </DxcDialog>
+    );
+    expect(getByRole("dialog", { name: "Delivery address" })).toBeTruthy();
+    expect(getByRole("dialog").getAttribute("aria-label")).toBeNull();
+  });
   test("Calls correct function onCloseClick", () => {
     const onCloseClick = jest.fn();
     const { getByRole } = render(<DxcDialog onCloseClick={onCloseClick}>dialog-text</DxcDialog>);

packages/lib/src/dialog/Dialog.tsx

@@ -58,6 +58,7 @@ const CloseIconActionContainer = styled.div`
 `;
 
 const DxcDialog = ({
+  ariaLabelledBy,
   children,
   // Will have sense to be closable if onCloseClick is passed?
   closable = true,
@@ -97,7 +98,13 @@ const DxcDialog = ({
         createPortal(
           <DialogContainer>
             {overlay && <Overlay onClick={onBackgroundClick} />}
-            <Dialog aria-label="Dialog" aria-modal={overlay} closable={closable} role="dialog">
+            <Dialog
+              aria-label={ariaLabelledBy ? undefined : "Dialog"}
+              aria-labelledby={ariaLabelledBy}
+              aria-modal={overlay}
+              closable={closable}
+              role="dialog"
+            >
               {!disableFocusLock ? (
                 <FocusLock>
                   {children}

packages/lib/src/dialog/types.ts

@@ -1,6 +1,10 @@
 import { ReactNode } from "react";
 
 type Props = {
+  /**
+   * Id of the element (usually the title of the dialog) that labels the dialog.
+   */
+  ariaLabelledBy?: string;
   /**
    * If true, the close button will be visible.
    */