diff --git a/packages/dialog/src/Dialog.ts b/packages/dialog/src/Dialog.ts
index 6befd575f4..21365e88c2 100644
--- a/packages/dialog/src/Dialog.ts
+++ b/packages/dialog/src/Dialog.ts
@@ -250,6 +250,10 @@ export class Dialog extends FocusVisiblePolyfillMixin(
protected onContentSlotChange({
target,
}: Event & { target: HTMLSlotElement }): void {
+ requestAnimationFrame(() => {
+ // Content must be available _AND_ styles must be applied.
+ this.shouldManageTabOrderForScrolling();
+ });
if (this.conditionDescribedby) {
this.conditionDescribedby();
delete this.conditionDescribedby;
diff --git a/packages/dialog/stories/dialog.stories.ts b/packages/dialog/stories/dialog.stories.ts
index 70a4b11d22..a6932bea58 100644
--- a/packages/dialog/stories/dialog.stories.ts
+++ b/packages/dialog/stories/dialog.stories.ts
@@ -493,3 +493,44 @@ export const fullscreenTakeover = (): TemplateResult => {
`;
};
+
+export const forcedScrolling = (): TemplateResult => html`
+
+
+
+ Disclaimer
+
+ The contents of this dialog is specifically prepared to force
+ scrolling, allowing us to test whether the scroll bar is
+ appopriately activated in this context.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+ do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Auctor augue mauris augue neque gravida. Libero
+ volutpat sed ornare arcu. Quisque egestas diam in arcu
+ cursus euismod quis viverra.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+ do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Auctor augue mauris augue neque gravida. Libero
+ volutpat sed ornare arcu. Quisque egestas diam in arcu
+ cursus euismod quis viverra.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+ do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Auctor augue mauris augue neque gravida. Libero
+ volutpat sed ornare arcu. Quisque egestas diam in arcu
+ cursus euismod quis viverra.
+
+
+ Footer button
+
+
+`;