add enableScrollLock prop to dialog component

[ryan-mahoney]

Support an additional property to the Dialog component named enableScrollLock. If this property is not set, it will default to true (maintaining backward compatibility), but if it is set to false, it will inhibit changing the overflow and paddingRight settings on the of the body tag's style.

This has been the number one requested user-experience change to my application which utilizes the Dialog component. In some cases, it is helpful to be able to scroll the page below the dialog.

[vercel]

@ryan-mahoney is attempting to deploy a commit to the Tailwind Labs Team on Vercel.

A member of the Team first needs to authorize it.

[ryan-mahoney]

👋 @RobinMalfait can you authorize?

[nicokant]

Hi, is there any plan on the release of this feature?

[mikkelwf]

Any update on this?

[RobinMalfait]

Hey! Thank you for your PR!
Much appreciated! 🙏

I'm going to close it for now and revisit it in the future if we ever want to expose an option like this or not.

You should think of a Dialog as a separate page and you should not be able to interact with the contents behind the modal. You could consider it progressive enhancement, but if you rely on the user to be able to scroll the page in the background then this could cause accessibility issues for non-sighted people.

WAI-ARIA best practices state (https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal):

A dialog is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert. That is, users cannot interact with content outside an active dialog window. Inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern, and in some implementations, attempts to interact with the inert content cause the dialog to close.

Therefore going to close this PR for now. Thanks for your work!