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/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index 3b5b3e1bc61..c42355f4fab 100644
--- a/packages/localizations/src/en-US.ts
+++ b/packages/localizations/src/en-US.ts
@@ -1131,11 +1131,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 222509565bb..aa96f8e0166 100644
--- a/packages/shared/src/types/localization.ts
+++ b/packages/shared/src/types/localization.ts
@@ -62,9 +62,8 @@ type DeepLocalizationWithoutObjects<T> = {
  * as a starting point.
  */
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type -- Needs to be an interface for typedoc to link correctly
-export interface LocalizationResource extends DeepPartial<
-  DeepLocalizationWithoutObjects<__internal_LocalizationResource>
-> {}
+export interface LocalizationResource
+  extends DeepPartial<DeepLocalizationWithoutObjects<__internal_LocalizationResource>> {}
 
 export type __internal_LocalizationResource = {
   locale: string;
@@ -995,8 +994,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/ui/src/components/UserButton/SessionActions.tsx b/packages/ui/src/components/UserButton/SessionActions.tsx
index 2947759741e..a1cc4aed4b4 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 => ({
@@ -102,6 +104,7 @@ export const SingleSessionActions = (props: SingleSessionActionsProps) => {
                 ? handleSignOutSessionClicked(session)
                 : () => handleActionClick(item)
             }
+            role={undefined}
             sx={commonActionSx}
             iconSx={t => ({
               width: t.sizes.$4,
@@ -138,6 +141,7 @@ export const MultiSessionActions = (props: MultiSessionActionsProps) => {
   } = props;
 
   const { menutItems } = useUserButtonContext();
+  const { t } = useLocalizations();
 
   const handleActionClick = async (route: MenuItem) => {
     if (route?.path) {
@@ -164,7 +168,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')}
         >
@@ -183,6 +188,7 @@ export const MultiSessionActions = (props: MultiSessionActionsProps) => {
               label={localizationKeys('userButton.action__manageAccount')}
               onClick={handleManageAccountClicked}
               focusRing
+              role={undefined}
             />
             <SmallAction
               elementDescriptor={descriptors.userButtonPopoverActionButton}
@@ -195,12 +201,14 @@ export const MultiSessionActions = (props: MultiSessionActionsProps) => {
               label={localizationKeys('userButton.action__signOut')}
               onClick={handleSignOutSessionClicked(session)}
               focusRing
+              role={undefined}
             />
           </Flex>
         </SmallActions>
       ) : (
         <SmallActions
-          role='menu'
+          role='group'
+          aria-label={t(localizationKeys('userButton.label__accountActions'))}
           elementDescriptor={descriptors.userButtonPopoverActions}
           elementId={descriptors.userButtonPopoverActions.setId('multiSession')}
           sx={t => ({
@@ -246,6 +254,7 @@ export const MultiSessionActions = (props: MultiSessionActionsProps) => {
                     ? handleSignOutSessionClicked(session)
                     : () => handleActionClick(item)
                 }
+                role={undefined}
                 sx={t => ({
                   border: 0,
                   padding: `${t.space.$2} ${t.space.$5}`,
@@ -267,7 +276,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 +289,6 @@ export const MultiSessionActions = (props: MultiSessionActionsProps) => {
             key={session.id}
             icon={SwitchArrowRight}
             onClick={handleSessionClicked(session)}
-            role='menuitem'
           >
             <UserPreview user={session.user} />
           </PreviewButton>
@@ -294,6 +303,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 +346,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 +370,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..4a8801d9b80 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(trigger).not.toHaveFocus();
+      }
+
+      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..a9bc2998e98 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,34 +12,49 @@ 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);
+  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,
-          close: toggle,
-          ref: floating,
-          style: styles,
-        })}
+        {cloneElement(
+          children,
+          getFloatingProps({
+            id: userButtonMenuId,
+            close: toggle,
+            tabIndex: -1,
+            ref: floatingRef,
+            style: styles,
+          }),
+        )}
       </Popover>
     </>
   );
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 79e265b86a2..89e28974705 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, 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: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
+  getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
 };
 
 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();
@@ -69,11 +85,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) {
@@ -95,5 +115,7 @@ export const usePopover = (props: UsePopoverProps = {}): UsePopoverReturn => {
     isOpen,
     styles: { position: strategy, top: y ?? 0, left: x ?? 0 },
     context,
+    getReferenceProps,
+    getFloatingProps,
   };
 };