fix(dialog): ensure enableBackgroundUI is passed to Modal

fix #6023
Sage · Jan 31, 2025 · 9605627 · 9605627
1 parent 433f4a6
commit 9605627
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/src/components/dialog/dialog.component.tsx b/src/components/dialog/dialog.component.tsx
@@ -128,6 +128,9 @@ export const Dialog = forwardRef<DialogHandle, DialogProps>(
       topModalOverride,
       closeButtonDataProps,
       restoreFocusOnClose = true,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-label": ariaLabel,
       ...rest
     },
     ref,
@@ -197,12 +200,10 @@ export const Dialog = forwardRef<DialogHandle, DialogProps>(
       size,
       dialogHeight,
       "aria-labelledby":
-        title && typeof title === "string" ? titleId : rest["aria-labelledby"],
+        title && typeof title === "string" ? titleId : ariaLabelledBy,
       "aria-describedby":
-        subtitle && typeof subtitle === "string"
-          ? subtitleId
-          : rest["aria-describedby"],
-      "aria-label": rest["aria-label"],
+        subtitle && typeof subtitle === "string" ? subtitleId : ariaDescribedBy,
+      "aria-label": ariaLabel,
     };
 
     return (
@@ -214,6 +215,7 @@ export const Dialog = forwardRef<DialogHandle, DialogProps>(
         className={className ? `${className} carbon-dialog` : "carbon-dialog"}
         topModalOverride={topModalOverride}
         restoreFocusOnClose={restoreFocusOnClose}
+        {...rest}
       >
         <FocusTrap
           autoFocus={!disableAutoFocus}

diff --git a/src/components/dialog/dialog.pw.tsx b/src/components/dialog/dialog.pw.tsx
@@ -29,7 +29,10 @@ import {
   waitForElementFocus,
 } from "../../../playwright/support/helper";
 import { CHARACTERS, SIZE } from "../../../playwright/support/constants";
-import { getDataElementByValue } from "../../../playwright/components";
+import {
+  getDataElementByValue,
+  backgroundUILocator,
+} from "../../../playwright/components";
 
 const specialCharacters = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
 
@@ -102,6 +105,25 @@ test.describe("Testing Dialog component properties", () => {
     });
   });
 
+  [true, false].forEach((enableBackgroundUIValue) => {
+    test(`verify visibility of backgroundUILocatorElement when enableBackgroundUI prop is set to ${enableBackgroundUIValue}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <DialogComponent enableBackgroundUI={enableBackgroundUIValue} />,
+      );
+
+      const backgroundUILocatorElement = backgroundUILocator(page);
+
+      if (enableBackgroundUIValue) {
+        await expect(backgroundUILocatorElement).not.toBeVisible();
+      } else {
+        await expect(backgroundUILocatorElement).toBeVisible();
+      }
+    });
+  });
+
   test("when showCloseIcon prop is false, should not render close icon", async ({
     mount,
     page,