diff --git a/.changeset/user-button-a11y.md b/.changeset/user-button-a11y.md
new file mode 100644
index 00000000000..39b9a4cb99c
--- /dev/null
+++ b/.changeset/user-button-a11y.md
@@ -0,0 +1,7 @@
+---
+'@clerk/ui': patch
+'@clerk/shared': patch
+'@clerk/localizations': patch
+---
+
+Fix UserButton popover accessibility: use `role="dialog"` with grouped actions instead of `role="menu"` with `menuitem` children, fix focus management via floating-ui's interaction system, and add identity-first trigger labels
diff --git a/integration/tests/astro/components.test.ts b/integration/tests/astro/components.test.ts
index 4919fa96ec8..17f87251d2e 100644
--- a/integration/tests/astro/components.test.ts
+++ b/integration/tests/astro/components.test.ts
@@ -93,7 +93,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     await u.po.userButton.toHaveVisibleMenuItems([/Custom link/i, /Custom action/i, /Custom click/i]);
 
     // Click custom action and check for custom page availbility
-    await u.page.getByRole('menuitem', { name: /Custom action/i }).click();
+    await u.page.getByRole('button', { name: /Custom action/i }).click();
     await u.po.userProfile.waitForUserProfileModal();
     await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
 
@@ -114,7 +114,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
         );
       });
     });
-    await u.page.getByRole('menuitem', { name: /Custom click/i }).click();
+    await u.page.getByRole('button', { name: /Custom click/i }).click();
     expect(await eventPromise).toBe('custom_click');
 
     // Trigger the popover again
@@ -122,7 +122,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     await u.po.userButton.waitForPopover();
 
     // Click custom link and check navigation
-    await u.page.getByRole('menuitem', { name: /Custom link/i }).click();
+    await u.page.getByRole('button', { name: /Custom link/i }).click();
     await u.page.waitForAppUrl('/user');
   });
 
@@ -139,7 +139,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     await u.po.userButton.waitForPopover();
 
     // First item should now be the sign out button
-    await u.page.getByRole('menuitem').first().click();
+    await u.page.getByRole('button').first().click();
     await u.po.expect.toBeSignedOut();
   });
 
diff --git a/integration/tests/sign-out-smoke.test.ts b/integration/tests/sign-out-smoke.test.ts
index 6b040080bd5..df5624c3fe4 100644
--- a/integration/tests/sign-out-smoke.test.ts
+++ b/integration/tests/sign-out-smoke.test.ts
@@ -86,7 +86,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('sign out
     await u.page.getByRole('link', { name: 'Home' }).click();
     await u.page.getByRole('button', { name: 'Open user menu' }).click();
 
-    await u.page.getByRole('menuitem', { name: 'Sign out' }).click();
+    await u.page.getByRole('button', { name: 'Sign out' }).click();
     await u.po.expect.toBeSignedOut();
     await u.page.getByRole('link', { name: 'Protected', exact: true }).click();
     await u.page.waitForURL(url => url.href.includes('/sign-in?redirect_url'));
diff --git a/integration/tests/vue/components.test.ts b/integration/tests/vue/components.test.ts
index c7966a53d34..7e3b9844f18 100644
--- a/integration/tests/vue/components.test.ts
+++ b/integration/tests/vue/components.test.ts
@@ -80,7 +80,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withCustomRoles] })('basic te
     await u.po.userButton.toHaveVisibleMenuItems([/Custom link/i, /Custom page/i, /Custom action/i]);
 
     // Click custom action
-    await u.page.getByRole('menuitem', { name: /Custom action/i }).click();
+    await u.page.getByRole('button', { name: /Custom action/i }).click();
     await expect(u.page.getByText('Is action clicked: true')).toBeVisible();
 
     // Trigger the popover again
@@ -88,7 +88,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withCustomRoles] })('basic te
     await u.po.userButton.waitForPopover();
 
     // Click custom action and check for custom page availbility
-    await u.page.getByRole('menuitem', { name: /Custom page/i }).click();
+    await u.page.getByRole('button', { name: /Custom page/i }).click();
     await u.po.userProfile.waitForUserProfileModal();
     await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
 
@@ -98,7 +98,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withCustomRoles] })('basic te
     await u.po.userButton.waitForPopover();
 
     // Click custom link and check navigation
-    await u.page.getByRole('menuitem', { name: /Custom link/i }).click();
+    await u.page.getByRole('button', { name: /Custom link/i }).click();
     await u.page.waitForAppUrl('/profile');
   });
 
@@ -115,7 +115,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withCustomRoles] })('basic te
     await u.po.userButton.waitForPopover();
 
     // First item should now be the sign out button
-    await u.page.getByRole('menuitem').first().click();
+    await u.page.getByRole('button').first().click();
     await u.po.expect.toBeSignedOut();
   });
 
@@ -132,7 +132,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withCustomRoles] })('basic te
     // Open UserProfile modal through UserButton
     await u.po.userButton.toggleTrigger();
     await u.po.userButton.waitForPopover();
-    await u.page.getByRole('menuitem', { name: /Manage account/i }).click();
+    await u.page.getByRole('button', { name: /Manage account/i }).click();
     await u.po.userProfile.waitForUserProfileModal();
 
     // Verify custom pages and links are visible in the UserProfile
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index a9a83381088..6dfac4082ef 100644
--- a/packages/localizations/src/en-US.ts
+++ b/packages/localizations/src/en-US.ts
@@ -1454,11 +1454,14 @@ export const enUS: LocalizationResource = {
   },
   userButton: {
     action__addAccount: 'Add account',
-    action__closeUserMenu: 'Close user menu',
+    action__closeUserMenu: '{{name}} - Close account panel',
     action__manageAccount: 'Manage account',
-    action__openUserMenu: 'Open user menu',
+    action__openUserMenu: '{{name}} - Open account panel',
     action__signOut: 'Sign out',
     action__signOutAll: 'Sign out of all accounts',
+    label__userButtonPopover: 'Account panel',
+    label__accountActions: 'Account actions',
+    label__activeSessions: 'Active sessions',
   },
   userProfile: {
     apiKeysPage: {
diff --git a/packages/shared/src/types/localization.ts b/packages/shared/src/types/localization.ts
index db7df988428..9077f4c7d5d 100644
--- a/packages/shared/src/types/localization.ts
+++ b/packages/shared/src/types/localization.ts
@@ -995,8 +995,11 @@ export type __internal_LocalizationResource = {
     action__signOut: LocalizationValue;
     action__signOutAll: LocalizationValue;
     action__addAccount: LocalizationValue;
-    action__openUserMenu: LocalizationValue;
-    action__closeUserMenu: LocalizationValue;
+    action__openUserMenu: LocalizationValue<'name'>;
+    action__closeUserMenu: LocalizationValue<'name'>;
+    label__userButtonPopover?: LocalizationValue;
+    label__accountActions?: LocalizationValue;
+    label__activeSessions?: LocalizationValue;
   };
   organizationSwitcher: {
     personalWorkspace: LocalizationValue;
diff --git a/packages/testing/src/playwright/unstable/page-objects/userButton.ts b/packages/testing/src/playwright/unstable/page-objects/userButton.ts
index 69804cc4ef3..e64acd36edf 100644
--- a/packages/testing/src/playwright/unstable/page-objects/userButton.ts
+++ b/packages/testing/src/playwright/unstable/page-objects/userButton.ts
@@ -23,14 +23,14 @@ export const createUserButtonPageObject = (testArgs: { page: EnhancedPage }) =>
         menuItems = [menuItems];
       }
       for (const menuItem of menuItems) {
-        await expect(page.getByRole('menuitem', { name: menuItem })).toBeVisible();
+        await expect(page.getByRole('button', { name: menuItem })).toBeVisible();
       }
     },
     triggerSignOut: () => {
-      return page.getByRole('menuitem', { name: /Sign out$/i }).click();
+      return page.getByRole('button', { name: /Sign out$/i }).click();
     },
     triggerManageAccount: () => {
-      return page.getByRole('menuitem', { name: /Manage account/i }).click();
+      return page.getByRole('button', { name: /Manage account/i }).click();
     },
     switchAccount: (emailAddress: string) => {
       return page.getByText(emailAddress).click();
diff --git a/packages/ui/src/components/OrganizationList/OrganizationListPage.tsx b/packages/ui/src/components/OrganizationList/OrganizationListPage.tsx
index db8937232d2..0efb4ec7e23 100644
--- a/packages/ui/src/components/OrganizationList/OrganizationListPage.tsx
+++ b/packages/ui/src/components/OrganizationList/OrganizationListPage.tsx
@@ -155,7 +155,7 @@ export const OrganizationListPageList = (props: { onCreateOrganizationClick: ()
       <Card.Alert sx={t => ({ margin: `${t.space.$none} ${t.space.$5}` })}>{card.error}</Card.Alert>
       <Col elementDescriptor={descriptors.main}>
         <PreviewListItems>
-          <Actions role='menu'>
+          <Actions>
             <PersonalAccountPreview />
             {(userMemberships.count || 0) > 0 &&
               userMemberships.data?.map(inv => {
diff --git a/packages/ui/src/components/OrganizationList/__tests__/OrganizationList.test.tsx b/packages/ui/src/components/OrganizationList/__tests__/OrganizationList.test.tsx
index 78356967931..a355535300b 100644
--- a/packages/ui/src/components/OrganizationList/__tests__/OrganizationList.test.tsx
+++ b/packages/ui/src/components/OrganizationList/__tests__/OrganizationList.test.tsx
@@ -31,7 +31,7 @@ describe('OrganizationList', () => {
       expect(queryByText('to continue to TestApp')).toBeInTheDocument();
       //
       expect(queryByText('Personal account')).toBeInTheDocument();
-      expect(queryByRole('menuitem', { name: 'Create organization' })).toBeInTheDocument();
+      expect(queryByRole('button', { name: 'Create organization' })).toBeInTheDocument();
     });
   });
 
@@ -78,7 +78,7 @@ describe('OrganizationList', () => {
         // Display membership
         expect(queryByText('Org1')).toBeInTheDocument();
 
-        expect(queryByRole('menuitem', { name: 'Create organization' })).toBeInTheDocument();
+        expect(queryByRole('button', { name: 'Create organization' })).toBeInTheDocument();
       });
     });
 
@@ -236,7 +236,7 @@ describe('OrganizationList', () => {
       expect(queryByRole('button', { name: 'Upload' })).not.toBeInTheDocument();
       expect(queryByLabelText(/name/i)).not.toBeInTheDocument();
       expect(queryByLabelText(/slug/i)).not.toBeInTheDocument();
-      await userEvent.click(getByRole('menuitem', { name: 'Create organization' }));
+      await userEvent.click(getByRole('button', { name: 'Create organization' }));
       // Header
       expect(queryByRole('heading', { name: /Create organization/i })).toBeInTheDocument();
       // Form fields of CreateOrganizationForm
@@ -266,9 +266,9 @@ describe('OrganizationList', () => {
         },
       );
       await waitFor(async () =>
-        expect(await findByRole('menuitem', { name: 'Create organization' })).toBeInTheDocument(),
+        expect(await findByRole('button', { name: 'Create organization' })).toBeInTheDocument(),
       );
-      await userEvent.click(getByRole('menuitem', { name: 'Create organization' }));
+      await userEvent.click(getByRole('button', { name: 'Create organization' }));
       await waitFor(async () => expect(await findByLabelText(/name/i)).toBeInTheDocument());
       await userEvent.type(getByLabelText(/name/i), 'new org');
       await userEvent.click(getByRole('button', { name: /create organization/i }));
@@ -290,9 +290,9 @@ describe('OrganizationList', () => {
       const { findByRole, getByRole, userEvent, queryByLabelText } = render(<OrganizationList />, { wrapper });
 
       await waitFor(async () =>
-        expect(await findByRole('menuitem', { name: 'Create organization' })).toBeInTheDocument(),
+        expect(await findByRole('button', { name: 'Create organization' })).toBeInTheDocument(),
       );
-      await userEvent.click(getByRole('menuitem', { name: 'Create organization' }));
+      await userEvent.click(getByRole('button', { name: 'Create organization' }));
       expect(queryByLabelText(/Name/i)).toBeInTheDocument();
       expect(queryByLabelText(/Slug/i)).not.toBeInTheDocument();
     });
@@ -310,9 +310,9 @@ describe('OrganizationList', () => {
       const { findByRole, getByRole, userEvent, queryByLabelText } = render(<OrganizationList />, { wrapper });
 
       await waitFor(async () =>
-        expect(await findByRole('menuitem', { name: 'Create organization' })).toBeInTheDocument(),
+        expect(await findByRole('button', { name: 'Create organization' })).toBeInTheDocument(),
       );
-      await userEvent.click(getByRole('menuitem', { name: 'Create organization' }));
+      await userEvent.click(getByRole('button', { name: 'Create organization' }));
       expect(queryByLabelText(/Name/i)).toBeInTheDocument();
       expect(queryByLabelText(/Slug/i)).toBeInTheDocument();
     });
@@ -445,9 +445,9 @@ describe('OrganizationList', () => {
 
         fixtures.clerk.setActive.mockReturnValue(Promise.resolve());
         await waitFor(async () =>
-          expect(await findByRole('menuitem', { name: 'Create organization' })).toBeInTheDocument(),
+          expect(await findByRole('button', { name: 'Create organization' })).toBeInTheDocument(),
         );
-        await userEvent.click(getByRole('menuitem', { name: 'Create organization' }));
+        await userEvent.click(getByRole('button', { name: 'Create organization' }));
         await waitFor(async () => expect(await findByLabelText(/name/i)).toBeInTheDocument());
         await userEvent.type(getByLabelText(/name/i), 'new org');
         await userEvent.click(getByRole('button', { name: /create organization/i }));
diff --git a/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
index 52c43d01821..2f6aeeab5c0 100644
--- a/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
+++ b/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -127,7 +127,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
             padding: `${t.space.$4} ${t.space.$5}`,
           })}
         />
-        <Actions role='menu'>{manageOrganizationButton}</Actions>
+        <Actions>{manageOrganizationButton}</Actions>
       </Flex>
     );
 
@@ -142,10 +142,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
           {...rest}
         >
           <PopoverCard.Content elementDescriptor={descriptors.organizationSwitcherPopoverMain}>
-            <Actions
-              elementDescriptor={descriptors.organizationSwitcherPopoverActions}
-              role='menu'
-            >
+            <Actions elementDescriptor={descriptors.organizationSwitcherPopoverActions}>
               {currentOrg
                 ? selectedOrganizationPreview(currentOrg)
                 : !hidePersonal && (
diff --git a/packages/ui/src/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx b/packages/ui/src/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
index 337bd35c83d..b0e75dc3529 100644
--- a/packages/ui/src/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
+++ b/packages/ui/src/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
@@ -180,7 +180,6 @@ const InvitationPreview = withCardStateProvider(
           elementDescriptor={descriptors.organizationSwitcherPreviewButton}
           icon={SwitchArrowRight}
           onClick={acceptedOrganization ? () => onOrganizationClick(acceptedOrganization) : undefined}
-          role='menuitem'
         >
           <OrganizationPreview
             elementId='organizationSwitcherListedOrganization'
@@ -205,12 +204,7 @@ const InvitationPreview = withCardStateProvider(
 
 const SwitcherInvitationActions = (props: PropsOfComponent<typeof Flex> & { showBorder: boolean }) => {
   const { showBorder, ...restProps } = props;
-  return (
-    <Actions
-      role='menu'
-      {...restProps}
-    />
-  );
+  return <Actions {...restProps} />;
 };
 
 export const SuggestionPreview = withCardStateProvider((props: OrganizationSuggestionResource) => {
diff --git a/packages/ui/src/components/OrganizationSwitcher/UserMembershipList.tsx b/packages/ui/src/components/OrganizationSwitcher/UserMembershipList.tsx
index 35f814b4782..9dd88ab1aae 100644
--- a/packages/ui/src/components/OrganizationSwitcher/UserMembershipList.tsx
+++ b/packages/ui/src/components/OrganizationSwitcher/UserMembershipList.tsx
@@ -83,7 +83,6 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
           elementId={descriptors.organizationSwitcherPreviewButton.setId('personal')}
           icon={SwitchArrowRight}
           onClick={onPersonalWorkspaceClick}
-          role='menuitem'
         >
           <PersonalWorkspacePreview
             user={userWithoutIdentifiers}
@@ -99,7 +98,6 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
           elementId={descriptors.organizationSwitcherPreviewButton.setId('organization')}
           icon={SwitchArrowRight}
           onClick={() => onOrganizationClick(organization)}
-          role='menuitem'
           sx={t => ({
             border: `0 solid ${t.colors.$borderAlpha100}`,
           })}
diff --git a/packages/ui/src/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx b/packages/ui/src/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx
index 8e1009061d7..ffc55f53b79 100644
--- a/packages/ui/src/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx
+++ b/packages/ui/src/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx
@@ -358,7 +358,7 @@ describe('OrganizationSwitcher', () => {
       props.setProps({ hidePersonal: true });
       const { getByRole, userEvent } = render(<OrganizationSwitcher />, { wrapper });
       await userEvent.click(getByRole('button'));
-      await userEvent.click(getByRole('menuitem'));
+      await userEvent.click(getByRole('button', { name: /manage/i }));
       expect(fixtures.clerk.openOrganizationProfile).toHaveBeenCalled();
     });
 
@@ -375,7 +375,7 @@ describe('OrganizationSwitcher', () => {
       props.setProps({ hidePersonal: true });
       const { getByRole, userEvent } = render(<OrganizationSwitcher />, { wrapper });
       await userEvent.click(getByRole('button', { name: 'Open organization switcher' }));
-      await userEvent.click(getByRole('menuitem', { name: 'Create organization' }));
+      await userEvent.click(getByRole('button', { name: 'Create organization' }));
       expect(fixtures.clerk.openCreateOrganization).toHaveBeenCalled();
     });
 
@@ -391,7 +391,7 @@ describe('OrganizationSwitcher', () => {
 
       const { getByRole, queryByLabelText, userEvent } = render(<OrganizationSwitcher />, { wrapper });
       await userEvent.click(getByRole('button', { name: 'Open organization switcher' }));
-      await userEvent.click(getByRole('menuitem', { name: 'Create organization' }));
+      await userEvent.click(getByRole('button', { name: 'Create organization' }));
       expect(fixtures.clerk.openCreateOrganization).toHaveBeenCalled();
       expect(queryByLabelText(/Slug/i)).not.toBeInTheDocument();
     });
@@ -619,7 +619,7 @@ describe('OrganizationSwitcher', () => {
       );
 
       await userEvent.click(getByRole('button'));
-      const manageButton = await waitFor(() => screen.getByRole('menuitem', { name: /manage/i }));
+      const manageButton = await waitFor(() => screen.getByRole('button', { name: /manage/i }));
       await userEvent.click(manageButton);
 
       expect(fixtures.clerk.openOrganizationProfile).toHaveBeenCalledWith(expect.objectContaining({ getContainer }));
@@ -649,7 +649,7 @@ describe('OrganizationSwitcher', () => {
       );
 
       await userEvent.click(getByRole('button', { name: 'Open organization switcher' }));
-      const createButton = await waitFor(() => screen.getByRole('menuitem', { name: 'Create organization' }));
+      const createButton = await waitFor(() => screen.getByRole('button', { name: 'Create organization' }));
       await userEvent.click(createButton);
 
       expect(fixtures.clerk.openCreateOrganization).toHaveBeenCalledWith(expect.objectContaining({ getContainer }));
diff --git a/packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx b/packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx
index 972fb3682ed..3e4aed265ba 100644
--- a/packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx
+++ b/packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx
@@ -62,7 +62,7 @@ export const ChooseOrganizationScreen = (props: ChooseOrganizationScreenProps) =
       <Card.Alert sx={t => ({ margin: `${t.space.$none} ${t.space.$8}` })}>{card.error}</Card.Alert>
       <Col elementDescriptor={descriptors.main}>
         <OrganizationPreviewListItems elementDescriptor={descriptors.taskChooseOrganizationPreviewItems}>
-          <Actions role='menu'>
+          <Actions>
             {(userMemberships.count || 0) > 0 &&
               userMemberships.data?.map(inv => {
                 return (
diff --git a/packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SetupMfaStartScreen.tsx b/packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SetupMfaStartScreen.tsx
index 6d735baffdc..779819b5665 100644
--- a/packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SetupMfaStartScreen.tsx
+++ b/packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SetupMfaStartScreen.tsx
@@ -51,7 +51,6 @@ export const SetupMfaStartScreen = withCardStateProvider((props: SetupMfaStartSc
           </Flex>
         )}
         <Actions
-          role='menu'
           elementDescriptor={descriptors.taskSetupMfaMethodSelectionItems}
           sx={t => ({
             borderTopWidth: t.borderWidths.$normal,
diff --git a/packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx b/packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx
index f37c899cde5..a62f99e644f 100644
--- a/packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx
+++ b/packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx
@@ -299,7 +299,6 @@ const SmsCodeScreen = withCardStateProvider((props: SmsCodeScreenProps) => {
         )}
         <Col>
           <Actions
-            role='menu'
             elementDescriptor={descriptors.taskSetupMfaPhoneSelectionItems}
             sx={t => ({
               borderTopWidth: t.borderWidths.$normal,
diff --git a/packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/__tests__/TaskSetupMfa.test.tsx b/packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/__tests__/TaskSetupMfa.test.tsx
index 1323ae0e5d5..21cb1714c82 100644
--- a/packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/__tests__/TaskSetupMfa.test.tsx
+++ b/packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/__tests__/TaskSetupMfa.test.tsx
@@ -466,7 +466,7 @@ describe('TaskSetupMFA', () => {
       await findByText(/add sms code verification/i);
       await findByText(/choose phone number you want to use/i);
       await findByText(/\+30 691 1111111/i);
-      expect(getByRole('menuitem', { name: /add phone number/i })).toBeInTheDocument();
+      expect(getByRole('button', { name: /add phone number/i })).toBeInTheDocument();
     });
 
     it('should show add phone screen when no existing phone numbers', async () => {
@@ -511,7 +511,7 @@ describe('TaskSetupMFA', () => {
       await findByText(/add sms code verification/i);
 
       await act(async () => {
-        await userEvent.click(getByRole('menuitem', { name: /add phone number/i }));
+        await userEvent.click(getByRole('button', { name: /add phone number/i }));
       });
 
       await findByText(/add phone number/i);
diff --git a/packages/ui/src/components/SignIn/SignInAccountSwitcher.tsx b/packages/ui/src/components/SignIn/SignInAccountSwitcher.tsx
index 355cf79c9b0..f05028467d5 100644
--- a/packages/ui/src/components/SignIn/SignInAccountSwitcher.tsx
+++ b/packages/ui/src/components/SignIn/SignInAccountSwitcher.tsx
@@ -45,7 +45,7 @@ const SignInAccountSwitcherInternal = () => {
               borderTopColor: t.colors.$borderAlpha100,
             })}
           >
-            <Actions role='menu'>
+            <Actions>
               {signedInSessions.map(s => (
                 <PreviewButton
                   key={s.id}
diff --git a/packages/ui/src/components/UserButton/SessionActions.tsx b/packages/ui/src/components/UserButton/SessionActions.tsx
index 2947759741e..f36bab387d6 100644
--- a/packages/ui/src/components/UserButton/SessionActions.tsx
+++ b/packages/ui/src/components/UserButton/SessionActions.tsx
@@ -9,7 +9,7 @@ import { UserPreview } from '@/ui/elements/UserPreview';
 import { USER_BUTTON_ITEM_ID } from '../../constants';
 import { useUserButtonContext } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
-import { descriptors, Flex, localizationKeys } from '../../customizables';
+import { descriptors, Flex, localizationKeys, useLocalizations } from '../../customizables';
 import { Add, CogFilled, SignOut, SwitchArrowRight } from '../../icons';
 import type { ThemableCssProp } from '../../styledSystem';
 import type { DefaultItemIds, MenuItem } from '../../utils/createCustomMenuItems';
@@ -27,6 +27,7 @@ export const SingleSessionActions = (props: SingleSessionActionsProps) => {
   const { handleManageAccountClicked, handleSignOutSessionClicked, handleUserProfileActionClicked, session } = props;
 
   const { menutItems } = useUserButtonContext();
+  const { t } = useLocalizations();
 
   const commonActionSx: ThemableCssProp = t => ({
     borderTopWidth: t.borderWidths.$normal,
@@ -54,7 +55,8 @@ export const SingleSessionActions = (props: SingleSessionActionsProps) => {
 
   return (
     <Actions
-      role='menu'
+      role='group'
+      aria-label={t(localizationKeys('userButton.label__accountActions'))}
       elementDescriptor={descriptors.userButtonPopoverActions}
       elementId={descriptors.userButtonPopoverActions.setId('singleSession')}
       sx={t => ({
@@ -138,6 +140,7 @@ export const MultiSessionActions = (props: MultiSessionActionsProps) => {
   } = props;
 
   const { menutItems } = useUserButtonContext();
+  const { t } = useLocalizations();
 
   const handleActionClick = async (route: MenuItem) => {
     if (route?.path) {
@@ -164,7 +167,8 @@ export const MultiSessionActions = (props: MultiSessionActionsProps) => {
     <>
       {hasOnlyDefaultItems ? (
         <SmallActions
-          role='menu'
+          role='group'
+          aria-label={t(localizationKeys('userButton.label__accountActions'))}
           elementDescriptor={descriptors.userButtonPopoverActions}
           elementId={descriptors.userButtonPopoverActions.setId('multiSession')}
         >
@@ -200,7 +204,8 @@ export const MultiSessionActions = (props: MultiSessionActionsProps) => {
         </SmallActions>
       ) : (
         <SmallActions
-          role='menu'
+          role='group'
+          aria-label={t(localizationKeys('userButton.label__accountActions'))}
           elementDescriptor={descriptors.userButtonPopoverActions}
           elementId={descriptors.userButtonPopoverActions.setId('multiSession')}
           sx={t => ({
@@ -267,7 +272,8 @@ export const MultiSessionActions = (props: MultiSessionActionsProps) => {
       )}
 
       <Actions
-        role='menu'
+        role='group'
+        aria-label={t(localizationKeys('userButton.label__activeSessions'))}
         sx={t => ({
           borderTopStyle: t.borderStyles.$solid,
           borderTopWidth: t.borderWidths.$normal,
@@ -279,7 +285,6 @@ export const MultiSessionActions = (props: MultiSessionActionsProps) => {
             key={session.id}
             icon={SwitchArrowRight}
             onClick={handleSessionClicked(session)}
-            role='menuitem'
           >
             <UserPreview user={session.user} />
           </PreviewButton>
@@ -294,6 +299,7 @@ export const MultiSessionActions = (props: MultiSessionActionsProps) => {
           icon={Add}
           label={localizationKeys('userButton.action__addAccount')}
           onClick={handleAddAccountClicked}
+          role={undefined}
           iconSx={t => ({
             width: t.sizes.$9,
             height: t.sizes.$6,
@@ -336,9 +342,11 @@ export const SignOutAllActions = (props: SignOutAllActionsProps) => {
     sx,
     actionSx,
   } = props;
+  const { t } = useLocalizations();
   return (
     <Actions
-      role='menu'
+      role='group'
+      aria-label={t(label || localizationKeys('userButton.action__signOutAll'))}
       sx={[
         t => ({
           padding: t.space.$2,
@@ -358,6 +366,7 @@ export const SignOutAllActions = (props: SignOutAllActionsProps) => {
         onClick={handleSignOutAllClicked}
         variant='ghost'
         colorScheme='neutral'
+        role={undefined}
         sx={[
           t => ({
             backgroundColor: t.colors.$transparent,
diff --git a/packages/ui/src/components/UserButton/UserButtonPopover.tsx b/packages/ui/src/components/UserButton/UserButtonPopover.tsx
index 28aca51b525..6eab611bf1f 100644
--- a/packages/ui/src/components/UserButton/UserButtonPopover.tsx
+++ b/packages/ui/src/components/UserButton/UserButtonPopover.tsx
@@ -7,7 +7,7 @@ import { RootBox } from '@/ui/elements/RootBox';
 import { UserPreview } from '@/ui/elements/UserPreview';
 
 import { useEnvironment, useUserButtonContext } from '../../contexts';
-import { descriptors } from '../../customizables';
+import { descriptors, localizationKeys, useLocalizations } from '../../customizables';
 import type { PropsOfComponent } from '../../styledSystem';
 import { MultiSessionActions, SignOutAllActions, SingleSessionActions } from './SessionActions';
 import { useMultisessionActions } from './useMultisessionActions';
@@ -22,6 +22,7 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
   const { __experimental_asStandalone } = userButtonContext;
   const { authConfig } = useEnvironment();
   const { user } = useUser();
+  const { t } = useLocalizations();
   const {
     handleAddAccountClicked,
     handleManageAccountClicked,
@@ -38,7 +39,7 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
         elementDescriptor={descriptors.userButtonPopoverCard}
         ref={ref}
         role='dialog'
-        aria-label='User button popover'
+        aria-label={t(localizationKeys('userButton.label__userButtonPopover'))}
         shouldEntryAnimate={!__experimental_asStandalone}
         {...rest}
       >
diff --git a/packages/ui/src/components/UserButton/UserButtonTrigger.tsx b/packages/ui/src/components/UserButton/UserButtonTrigger.tsx
index 64463e0b7a5..5a6b50b4e88 100644
--- a/packages/ui/src/components/UserButton/UserButtonTrigger.tsx
+++ b/packages/ui/src/components/UserButton/UserButtonTrigger.tsx
@@ -1,3 +1,4 @@
+import { getFullName, getIdentifier } from '@clerk/shared/internal/clerk-js/user';
 import { useUser } from '@clerk/shared/react';
 import { forwardRef } from 'react';
 
@@ -19,6 +20,7 @@ export const UserButtonTrigger = withAvatarShimmer(
     const { user } = useUser();
     const { showName } = useUserButtonContext();
     const { t } = useLocalizations();
+    const userName = (user && (getFullName(user) || getIdentifier(user))) || '';
 
     return (
       <Button
@@ -26,7 +28,11 @@ export const UserButtonTrigger = withAvatarShimmer(
         variant='roundWrapper'
         sx={[t => ({ borderRadius: showName ? t.radii.$md : t.radii.$circle, color: t.colors.$colorForeground }), sx]}
         ref={ref}
-        aria-label={`${props.isOpen ? t(localizationKeys('userButton.action__closeUserMenu')) : t(localizationKeys('userButton.action__openUserMenu'))}`}
+        aria-label={t(
+          localizationKeys(props.isOpen ? 'userButton.action__closeUserMenu' : 'userButton.action__openUserMenu', {
+            name: userName,
+          }),
+        )}
         aria-expanded={props.isOpen}
         aria-haspopup='dialog'
         {...rest}
diff --git a/packages/ui/src/components/UserButton/__tests__/UserButton.test.tsx b/packages/ui/src/components/UserButton/__tests__/UserButton.test.tsx
index 50bc2f243b8..bb4ca24b0f1 100644
--- a/packages/ui/src/components/UserButton/__tests__/UserButton.test.tsx
+++ b/packages/ui/src/components/UserButton/__tests__/UserButton.test.tsx
@@ -8,6 +8,7 @@ import { render, screen, waitFor } from '@/test/utils';
 import { UserButton } from '../';
 
 const { createFixtures } = bindCreateFixtures('UserButton');
+const accountPanelButtonName = (name: string) => `${name} - Open account panel`;
 
 describe('UserButton', () => {
   it('renders no button when there is no logged in user', async () => {
@@ -32,7 +33,7 @@ describe('UserButton', () => {
       __experimental_asStandalone: true,
     });
     const { getByText, queryByRole } = render(<UserButton />, { wrapper });
-    expect(queryByRole('button', { name: 'Open user menu' })).toBeNull();
+    expect(queryByRole('button', { name: /Open user menu/i })).toBeNull();
     getByText('Manage account');
   });
 
@@ -46,7 +47,10 @@ describe('UserButton', () => {
       });
     });
     const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
-    await userEvent.click(getByRole('button', { name: 'Open user menu' }));
+    await userEvent.click(getByRole('button', { name: accountPanelButtonName('First Last') }));
+    expect(screen.getByRole('dialog', { name: 'Account panel' })).toBeInTheDocument();
+    expect(screen.queryByRole('menu')).toBeNull();
+    expect(screen.queryByRole('menuitem')).toBeNull();
     expect(getByText('Manage account')).not.toBeNull();
   });
 
@@ -60,7 +64,7 @@ describe('UserButton', () => {
       });
     });
     const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
-    await userEvent.click(getByRole('button', { name: 'Open user menu' }));
+    await userEvent.click(getByRole('button', { name: accountPanelButtonName('First Last') }));
     await userEvent.click(getByText('Manage account'));
     expect(fixtures.clerk.openUserProfile).toHaveBeenCalled();
   });
@@ -78,7 +82,7 @@ describe('UserButton', () => {
     fixtures.clerk.signOut.mockImplementationOnce(callback => callback());
 
     const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
-    await userEvent.click(getByRole('button', { name: 'Open user menu' }));
+    await userEvent.click(getByRole('button', { name: accountPanelButtonName('First Last') }));
     await userEvent.click(getByText('Sign out'));
 
     expect(fixtures.router.navigate).toHaveBeenCalledWith('/');
@@ -107,7 +111,7 @@ describe('UserButton', () => {
         { wrapper },
       );
 
-      await userEvent.click(getByRole('button', { name: 'Open user menu' }));
+      await userEvent.click(getByRole('button', { name: accountPanelButtonName('First Last') }));
       await waitFor(() => {
         expect(screen.getByText('Manage account')).toBeInTheDocument();
       });
@@ -148,7 +152,7 @@ describe('UserButton', () => {
     it('renders all sessions', async () => {
       const { wrapper } = await createFixtures(initConfig);
       const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
-      await userEvent.click(getByRole('button', { name: 'Open user menu' }));
+      await userEvent.click(getByRole('button', { name: accountPanelButtonName('First1 Last1') }));
       expect(getByText('First1 Last1')).toBeDefined();
       expect(getByText('First2 Last2')).toBeDefined();
       expect(getByText('First3 Last3')).toBeDefined();
@@ -158,7 +162,7 @@ describe('UserButton', () => {
       const { wrapper, fixtures } = await createFixtures(initConfig);
       fixtures.clerk.setActive.mockReturnValueOnce(Promise.resolve());
       const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
-      await userEvent.click(getByRole('button', { name: 'Open user menu' }));
+      await userEvent.click(getByRole('button', { name: accountPanelButtonName('First1 Last1') }));
       await userEvent.click(getByText('First3 Last3'));
       expect(fixtures.clerk.setActive).toHaveBeenCalledWith(
         expect.objectContaining({ session: expect.objectContaining({ user: expect.objectContaining({ id: '3' }) }) }),
@@ -171,7 +175,7 @@ describe('UserButton', () => {
         return Promise.resolve(callback());
       });
       const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
-      await userEvent.click(getByRole('button', { name: 'Open user menu' }));
+      await userEvent.click(getByRole('button', { name: accountPanelButtonName('First1 Last1') }));
       await userEvent.click(getByText('Sign out'));
       await waitFor(() => {
         expect(fixtures.clerk.signOut).toHaveBeenCalledWith(expect.any(Function), { sessionId: '0' });
@@ -185,7 +189,7 @@ describe('UserButton', () => {
         return Promise.resolve(callback());
       });
       const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
-      await userEvent.click(getByRole('button', { name: 'Open user menu' }));
+      await userEvent.click(getByRole('button', { name: accountPanelButtonName('First1 Last1') }));
       await userEvent.click(getByText('Sign out of all accounts'));
       await waitFor(() => {
         expect(fixtures.clerk.signOut).toHaveBeenCalledWith(expect.any(Function));
@@ -194,6 +198,125 @@ describe('UserButton', () => {
     });
   });
 
+  describe('Accessibility', () => {
+    it('uses dialog semantics with an identity-first trigger label', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withUser({
+          first_name: 'First',
+          last_name: 'Last',
+          username: 'username1',
+          email_addresses: ['test@clerk.com'],
+        });
+      });
+
+      const { getByRole, userEvent } = render(<UserButton />, { wrapper });
+      const trigger = getByRole('button', { name: accountPanelButtonName('First Last') });
+
+      expect(trigger).toHaveAttribute('aria-haspopup', 'dialog');
+      expect(screen.queryByRole('button', { name: 'Open user menu' })).toBeNull();
+      await userEvent.click(trigger);
+
+      expect(screen.getByRole('dialog', { name: 'Account panel' })).toBeInTheDocument();
+      expect(screen.queryByRole('menu')).toBeNull();
+      expect(screen.queryByRole('menuitem')).toBeNull();
+    });
+
+    it('focuses the dialog container on open, not the first interactive item', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withUser({
+          first_name: 'First',
+          last_name: 'Last',
+          username: 'username1',
+          email_addresses: ['test@clerk.com'],
+        });
+      });
+
+      const { getByRole, userEvent } = render(<UserButton />, { wrapper });
+      const trigger = getByRole('button', { name: accountPanelButtonName('First Last') });
+      await userEvent.click(trigger);
+
+      const dialog = screen.getByRole('dialog', { name: 'Account panel' });
+      expect(dialog).toBeInTheDocument();
+      expect(dialog).toHaveFocus();
+    });
+
+    it('traps focus within the popover when open', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withUser({
+          first_name: 'First',
+          last_name: 'Last',
+          username: 'username1',
+          email_addresses: ['test@clerk.com'],
+        });
+      });
+
+      const { getByRole, userEvent } = render(<UserButton />, { wrapper });
+      const trigger = getByRole('button', { name: accountPanelButtonName('First Last') });
+      await userEvent.click(trigger);
+
+      const dialog = screen.getByRole('dialog', { name: 'Account panel' });
+      expect(dialog).toBeInTheDocument();
+
+      for (let i = 0; i < 10; i++) {
+        await userEvent.tab();
+        expect(dialog.contains(document.activeElement)).toBe(true);
+      }
+
+      expect(screen.getByRole('dialog', { name: 'Account panel' })).toBeInTheDocument();
+    });
+
+    it('labels action groups for screen readers', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withUser({
+          first_name: 'First',
+          last_name: 'Last',
+          username: 'username1',
+          email_addresses: ['test@clerk.com'],
+        });
+      });
+
+      const { getByRole, userEvent } = render(<UserButton />, { wrapper });
+      await userEvent.click(getByRole('button', { name: accountPanelButtonName('First Last') }));
+
+      const dialog = screen.getByRole('dialog', { name: 'Account panel' });
+      const groups = dialog.querySelectorAll('[role="group"]');
+      expect(groups.length).toBeGreaterThan(0);
+      for (const group of groups) {
+        expect(group).toHaveAttribute('aria-label');
+        expect(group.getAttribute('aria-label')).not.toBe('');
+      }
+    });
+
+    it('closes on escape and restores focus to the trigger', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withUser({
+          first_name: 'First',
+          last_name: 'Last',
+          username: 'username1',
+          email_addresses: ['test@clerk.com'],
+        });
+      });
+
+      const { getByRole, userEvent } = render(<UserButton />, { wrapper });
+      const trigger = getByRole('button', { name: accountPanelButtonName('First Last') });
+
+      await userEvent.click(trigger);
+
+      const clerkLogoLink = await screen.findByRole('link', { name: 'Clerk logo' });
+      for (let i = 0; i < 4 && document.activeElement !== clerkLogoLink; i++) {
+        await userEvent.tab();
+      }
+      expect(clerkLogoLink).toHaveFocus();
+
+      await userEvent.keyboard('{Escape}');
+
+      await waitFor(() => {
+        expect(screen.queryByRole('dialog', { name: 'Account panel' })).not.toBeInTheDocument();
+      });
+      expect(trigger).toHaveFocus();
+    });
+  });
+
   describe('UserButtonTopLevelIdentifier', () => {
     it('gives priority to showing first and last name next to the button over username and email', async () => {
       const { wrapper, props } = await createFixtures(f => {
diff --git a/packages/ui/src/components/UserButton/index.tsx b/packages/ui/src/components/UserButton/index.tsx
index b7e17f76bed..ecab5631090 100644
--- a/packages/ui/src/components/UserButton/index.tsx
+++ b/packages/ui/src/components/UserButton/index.tsx
@@ -1,4 +1,4 @@
-import { cloneElement, type ReactElement, useId } from 'react';
+import { cloneElement, type ReactElement, useCallback, useId, useRef } from 'react';
 
 import { withCardStateProvider, withFloatingTree } from '@/ui/elements/contexts';
 import { Popover } from '@/ui/elements/Popover';
@@ -12,33 +12,47 @@ import { UserButtonTrigger } from './UserButtonTrigger';
 const UserButtonWithFloatingTree = withFloatingTree<{ children: ReactElement }>(({ children }) => {
   const { defaultOpen } = useUserButtonContext();
 
-  const { floating, reference, styles, toggle, isOpen, nodeId, context } = usePopover({
-    defaultOpen,
-    placement: 'bottom-end',
-    offset: 8,
-  });
+  const { floating, reference, styles, toggle, isOpen, nodeId, context, getReferenceProps, getFloatingProps } =
+    usePopover({
+      defaultOpen,
+      placement: 'bottom-end',
+      offset: 8,
+    });
 
   const userButtonMenuId = useId();
+  const popoverRef = useRef<HTMLElement | null>(null);
+  const floatingRef = useCallback(
+    (node: HTMLElement | null) => {
+      floating(node);
+      popoverRef.current = node;
+    },
+    [floating],
+  );
 
   return (
     <>
       <UserButtonTrigger
         ref={reference}
-        onClick={toggle}
         isOpen={isOpen}
-        aria-controls={isOpen ? userButtonMenuId : undefined}
-        aria-expanded={isOpen}
+        {...getReferenceProps({
+          'aria-controls': isOpen ? userButtonMenuId : undefined,
+        })}
       />
       <Popover
         nodeId={nodeId}
         context={context}
         isOpen={isOpen}
+        order={['content']}
+        initialFocus={popoverRef}
       >
         {cloneElement(children, {
-          id: userButtonMenuId,
+          ...getFloatingProps({
+            id: userButtonMenuId,
+            tabIndex: -1,
+            ref: floatingRef,
+            style: styles,
+          }),
           close: toggle,
-          ref: floating,
-          style: styles,
         })}
       </Popover>
     </>
diff --git a/packages/ui/src/elements/Actions.tsx b/packages/ui/src/elements/Actions.tsx
index b7ef9f0e7df..39fa68d32ac 100644
--- a/packages/ui/src/elements/Actions.tsx
+++ b/packages/ui/src/elements/Actions.tsx
@@ -88,7 +88,6 @@ export const ExtraSmallAction = (props: Omit<ActionProps, 'label'>) => {
       ]}
       isDisabled={card.isLoading}
       onClick={onClick}
-      role='menuitem'
       {...rest}
     >
       <Flex
@@ -202,7 +201,6 @@ export const Action = (props: ActionProps) => {
       ]}
       isDisabled={card.isLoading}
       onClick={onClick}
-      role='menuitem'
       {...rest}
     >
       <Flex
diff --git a/packages/ui/src/elements/Popover.tsx b/packages/ui/src/elements/Popover.tsx
index 770ca00a9dc..2865d364310 100644
--- a/packages/ui/src/elements/Popover.tsx
+++ b/packages/ui/src/elements/Popover.tsx
@@ -15,6 +15,12 @@ type PopoverProps = PropsWithChildren<{
    */
   outsideElementsInert?: boolean;
   order?: Array<'reference' | 'floating' | 'content'>;
+  /**
+   * Whether the floating element is modal. When `true`, focus is trapped inside and outside elements are inerted.
+   * When `false`, focus can leave the floating element and it closes on focus out.
+   * @default true (FloatingFocusManager default)
+   */
+  modal?: boolean;
   portal?: boolean;
   /**
    * The root element to render the portal into.
@@ -29,6 +35,7 @@ export const Popover = (props: PopoverProps) => {
     initialFocus,
     outsideElementsInert = false,
     order = ['reference', 'content'],
+    modal,
     nodeId,
     isOpen,
     portal = true,
@@ -49,6 +56,7 @@ export const Popover = (props: PopoverProps) => {
               initialFocus={initialFocus}
               outsideElementsInert={outsideElementsInert}
               order={order}
+              modal={modal}
             >
               <>{children}</>
             </FloatingFocusManager>
@@ -65,6 +73,7 @@ export const Popover = (props: PopoverProps) => {
           context={context}
           initialFocus={initialFocus}
           order={order}
+          modal={modal}
         >
           <>{children}</>
         </FloatingFocusManager>
diff --git a/packages/ui/src/hooks/usePopover.ts b/packages/ui/src/hooks/usePopover.ts
index 085f8a2834b..805559111ac 100644
--- a/packages/ui/src/hooks/usePopover.ts
+++ b/packages/ui/src/hooks/usePopover.ts
@@ -1,5 +1,17 @@
-import type { UseFloatingOptions, UseFloatingReturn } from '@floating-ui/react';
-import { autoUpdate, flip, offset, shift, size, useDismiss, useFloating, useFloatingNodeId } from '@floating-ui/react';
+import type { UseFloatingOptions, UseFloatingReturn, UseInteractionsReturn, UseRoleProps } from '@floating-ui/react';
+import {
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  size,
+  useClick,
+  useDismiss,
+  useFloating,
+  useFloatingNodeId,
+  useInteractions,
+  useRole,
+} from '@floating-ui/react';
 import React, { useEffect } from 'react';
 
 type UsePopoverProps = {
@@ -18,6 +30,7 @@ type UsePopoverProps = {
         escapeKey?: boolean;
         outsidePress?: boolean;
       };
+  role?: UseRoleProps['role'];
 };
 
 // Need to be explicitly defined to avoid type errors in the Popover component
@@ -32,6 +45,8 @@ export type UsePopoverReturn = {
   isOpen: boolean;
   styles: { position: React.CSSProperties['position']; top: number; left: number };
   context: UseFloatingReturn['context'];
+  getReferenceProps: UseInteractionsReturn['getReferenceProps'];
+  getFloatingProps: UseInteractionsReturn['getFloatingProps'];
 };
 
 export const usePopover = (props: UsePopoverProps = {}): UsePopoverReturn => {
@@ -42,6 +57,7 @@ export const usePopover = (props: UsePopoverProps = {}): UsePopoverReturn => {
     adjustToReferenceWidth = false,
     referenceElement,
     canCloseModal,
+    role: roleOption = 'dialog',
   } = props;
   const [isOpen, setIsOpen] = React.useState(props.defaultOpen || false);
   const nodeId = useFloatingNodeId();
@@ -70,11 +86,15 @@ export const usePopover = (props: UsePopoverProps = {}): UsePopoverReturn => {
     ],
   });
 
-  useDismiss(context, {
+  const click = useClick(context);
+  const dismiss = useDismiss(context, {
     enabled: canCloseModal !== false,
     bubbles,
     outsidePress,
   });
+  const role = useRole(context, { role: roleOption });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);
 
   useEffect(() => {
     if (props.defaultOpen) {
@@ -96,5 +116,7 @@ export const usePopover = (props: UsePopoverProps = {}): UsePopoverReturn => {
     isOpen,
     styles: { position: strategy, top: y ?? 0, left: x ?? 0 },
     context,
+    getReferenceProps,
+    getFloatingProps,
   };
 };