diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
index da1bd2e771d..476a74dd329 100644
--- a/packages/calcite-components/src/components/dialog/dialog.e2e.ts
+++ b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
@@ -728,6 +728,18 @@ describe("calcite-dialog", () => {
     });
   });
 
+  it("content with visibility: visible should not be focusable when closed", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`
+      <calcite-dialog>
+        <button id="should-not-be-keyboard-focusable" style="visibility: visible">hi</button>
+      </calcite-dialog>
+    `);
+
+    await page.keyboard.press("Tab");
+    expect(await isElementFocused(page, "#should-not-be-keyboard-focusable")).toBe(false);
+  });
+
   it("has correct aria role/attribute", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-dialog open>Hello world!</calcite-dialog>`);
diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
index 7a27d258fd4..06a6c636572 100644
--- a/packages/calcite-components/src/components/dialog/dialog.tsx
+++ b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -786,6 +786,7 @@ export class Dialog extends LitElement implements OpenCloseComponent {
                 description={description}
                 heading={heading}
                 headingLevel={this.headingLevel}
+                hidden={!this.opened}
                 icon={icon}
                 iconFlipRtl={iconFlipRtl}
                 loading={this.loading}