diff --git a/.changeset/fast-rocks-repeat.md b/.changeset/fast-rocks-repeat.md
new file mode 100644
index 00000000000..9fa64a7f745
--- /dev/null
+++ b/.changeset/fast-rocks-repeat.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Default `` to `alertdialog` role.
diff --git a/packages/clerk-js/src/ui/elements/Drawer.tsx b/packages/clerk-js/src/ui/elements/Drawer.tsx
index 1616200d74d..17629525c66 100644
--- a/packages/clerk-js/src/ui/elements/Drawer.tsx
+++ b/packages/clerk-js/src/ui/elements/Drawer.tsx
@@ -1,5 +1,5 @@
import { useSafeLayoutEffect } from '@clerk/shared/react/index';
-import type { UseDismissProps, UseFloatingOptions } from '@floating-ui/react';
+import type { UseDismissProps, UseFloatingOptions, UseRoleProps } from '@floating-ui/react';
import {
FloatingFocusManager,
FloatingPortal,
@@ -411,10 +411,11 @@ interface ConfirmationProps {
onOpenChange: (open: boolean) => void;
children: React.ReactNode;
actionsSlot: React.ReactNode;
+ roleProps?: UseRoleProps;
}
const Confirmation = React.forwardRef(
- ({ open, onOpenChange, children, actionsSlot }, ref) => {
+ ({ open, onOpenChange, children, actionsSlot, roleProps }, ref) => {
const prefersReducedMotion = usePrefersReducedMotion();
const { animations: layoutAnimations } = useAppearance().parsedLayout;
const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;
@@ -425,6 +426,11 @@ const Confirmation = React.forwardRef(
transform: false,
strategy: 'absolute',
});
+ const { getFloatingProps } = useInteractions([
+ useClick(context),
+ useDismiss(context),
+ useRole(context, { role: 'alertdialog', ...roleProps }),
+ ]);
const mergedRefs = useMergeRefs([ref, refs.setFloating]);
@@ -450,8 +456,6 @@ const Confirmation = React.forwardRef(
duration: isMotionSafe ? transitionDurationValues.drawer : 0,
});
- const { getFloatingProps } = useInteractions([useClick(context), useDismiss(context), useRole(context)]);
-
if (!isMounted) return null;
return (
@@ -471,7 +475,6 @@ const Confirmation = React.forwardRef(
modal
outsideElementsInert
initialFocus={refs.floating}
- visuallyHiddenDismiss
>