From 8b882a8ee86b09d356c7c9318d5b03ab7aec21df Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Mon, 17 Mar 2025 20:16:57 -0400
Subject: [PATCH 1/2] refactor(clerk-js): Default `<Drawer.Confirmation />` to
 `alertdialog`

---
 packages/clerk-js/src/ui/elements/Drawer.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

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<HTMLDivElement, ConfirmationProps>(
-  ({ 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<HTMLDivElement, ConfirmationProps>(
       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<HTMLDivElement, ConfirmationProps>(
       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<HTMLDivElement, ConfirmationProps>(
           modal
           outsideElementsInert
           initialFocus={refs.floating}
-          visuallyHiddenDismiss
         >
           <Box
             ref={mergedRefs}

From 0d221a56e964e639f72b5d32e18afd98c1e2c0eb Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Mon, 17 Mar 2025 20:17:26 -0400
Subject: [PATCH 2/2] add changeset

---
 .changeset/fast-rocks-repeat.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fast-rocks-repeat.md

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 `<Drawer.Confirmation />` to `alertdialog` role.