From 7fcb410be487017cde3b02c19adc7815a35b8ed9 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 22 May 2024 14:57:57 +0200 Subject: [PATCH] do not apply `aria-modal` in demo mode (#3227) When you have a `role="dialog"` and an `aria-modal="true"` at the same time, then Safari will focus the first focusable element inside the dialog. This is not ideal, because in demo mode this means that the focus is moved around to various DOM elements. This commit ensures that the `aria-modal` is not applied when demo mode is enabled to prevent that behavior in Safari. --- packages/@headlessui-react/src/components/dialog/dialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@headlessui-react/src/components/dialog/dialog.tsx b/packages/@headlessui-react/src/components/dialog/dialog.tsx index 3032001..f940253 100644 --- a/packages/@headlessui-react/src/components/dialog/dialog.tsx +++ b/packages/@headlessui-react/src/components/dialog/dialog.tsx @@ -357,7 +357,7 @@ function DialogFn( id, role, tabIndex: -1, - 'aria-modal': dialogState === DialogStates.Open ? true : undefined, + 'aria-modal': __demoMode ? undefined : dialogState === DialogStates.Open ? true : undefined, 'aria-labelledby': state.titleId, 'aria-describedby': describedby, }