From 7cf89e71e050a278ec3c367236c8cb12e86be89e Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Wed, 4 Oct 2023 12:10:54 +0300
Subject: [PATCH 1/9] chore(clerk-js): Improve accessibility in UserButton and
 OrganizationSwitcher

---
 .../OrganizationSwitcher/OrganizationSwitcher.tsx           | 6 ++++++
 .../OrganizationSwitcher/OrganizationSwitcherPopover.tsx    | 1 +
 .../OrganizationSwitcher/OrganizationSwitcherTrigger.tsx    | 3 +++
 .../components/OrganizationSwitcher/UserMembershipList.tsx  | 4 ++++
 .../clerk-js/src/ui/components/UserButton/UserButton.tsx    | 6 ++++++
 .../src/ui/components/UserButton/UserButtonPopover.tsx      | 1 +
 .../src/ui/components/UserButton/UserButtonTrigger.tsx      | 3 +++
 packages/clerk-js/src/ui/elements/Actions.tsx               | 1 +
 8 files changed, 25 insertions(+)

diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcher.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcher.tsx
index f2dc5c28a22..34843fd80d4 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcher.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcher.tsx
@@ -1,3 +1,5 @@
+import { useId } from 'react';
+
 import { withOrganizationsEnabledGuard } from '../../common';
 import { withCoreUserGuard } from '../../contexts';
 import { Flow } from '../../customizables';
@@ -12,12 +14,15 @@ const _OrganizationSwitcher = withFloatingTree(() => {
     offset: 8,
   });
 
+  const switcherButtonMenuId = useId();
+
   return (
     <Flow.Root flow='organizationSwitcher'>
       <OrganizationSwitcherTrigger
         ref={reference}
         onClick={toggle}
         isOpen={isOpen}
+        aria-controls={switcherButtonMenuId}
       />
       <Popover
         nodeId={nodeId}
@@ -25,6 +30,7 @@ const _OrganizationSwitcher = withFloatingTree(() => {
         isOpen={isOpen}
       >
         <OrganizationSwitcherPopover
+          id={switcherButtonMenuId}
           close={toggle}
           ref={floating}
           style={{ ...styles }}
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
index bbf9d9e9df9..eafd17f0530 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -133,6 +133,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
         <PopoverCard.Root
           elementDescriptor={descriptors.organizationSwitcherPopoverCard}
           ref={ref}
+          role='menu'
           {...rest}
         >
           <PopoverCard.Main elementDescriptor={descriptors.organizationSwitcherPopoverMain}>
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
index d37adce2a3f..79907d85216 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
@@ -33,6 +33,9 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
         colorScheme='neutral'
         sx={[t => ({ minHeight: 0, padding: `0 ${t.space.$2} 0 0`, position: 'relative' }), sx]}
         ref={ref}
+        aria-label='organization-switcher-trigger'
+        aria-expanded={props.isOpen}
+        aria-haspopup='menu'
         {...rest}
       >
         {organization && (
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx
index d84b2f9291d..319f0392f43 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx
@@ -36,6 +36,8 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
         overflowY: 'auto',
         ...common.unstyledScrollbar(t),
       })}
+      role='group'
+      aria-label={hidePersonal ? 'memberships' : 'accounts'}
     >
       {currentOrg && !hidePersonal && (
         <PreviewButton
@@ -43,6 +45,7 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
           icon={SwitchArrows}
           sx={{ borderRadius: 0 }}
           onClick={onPersonalWorkspaceClick}
+          role='menuitem'
         >
           <PersonalWorkspacePreview
             user={userWithoutIdentifiers}
@@ -59,6 +62,7 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
           icon={SwitchArrows}
           sx={{ borderRadius: 0 }}
           onClick={() => onOrganizationClick(organization)}
+          role='menuitem'
         >
           <OrganizationPreview
             elementId='organizationSwitcher'
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx
index 3b17659c6de..53e56058ee4 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx
@@ -1,3 +1,5 @@
+import { useId } from 'react';
+
 import { getFullName, getIdentifier } from '../../../utils/user';
 import { useCoreUser, useUserButtonContext, withCoreUserGuard } from '../../contexts';
 import { descriptors, Flex, Flow, Text } from '../../customizables';
@@ -14,6 +16,8 @@ const _UserButton = withFloatingTree(() => {
     offset: 8,
   });
 
+  const userButtonMenuId = useId();
+
   return (
     <Flow.Root flow='userButton'>
       <Flex
@@ -27,6 +31,7 @@ const _UserButton = withFloatingTree(() => {
           ref={reference}
           onClick={toggle}
           isOpen={isOpen}
+          aria-controls={userButtonMenuId}
         />
         <Popover
           nodeId={nodeId}
@@ -34,6 +39,7 @@ const _UserButton = withFloatingTree(() => {
           isOpen={isOpen}
         >
           <UserButtonPopover
+            id={userButtonMenuId}
             close={toggle}
             ref={floating}
             style={{ ...styles }}
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx
index 94eb8f92212..bbcf882a09c 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx
@@ -69,6 +69,7 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
       <PopoverCard.Root
         elementDescriptor={descriptors.userButtonPopoverCard}
         ref={ref}
+        role='menu'
         {...rest}
       >
         <PopoverCard.Main elementDescriptor={descriptors.userButtonPopoverMain}>
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
index c381d413413..c7ac35107b4 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
@@ -20,6 +20,9 @@ export const UserButtonTrigger = withAvatarShimmer(
         variant='roundWrapper'
         sx={[theme => ({ borderRadius: theme.radii.$circle }), sx]}
         ref={ref}
+        aria-label='user-button-trigger'
+        aria-expanded={props.isOpen}
+        aria-haspopup='menu'
         {...rest}
       >
         <UserAvatar
diff --git a/packages/clerk-js/src/ui/elements/Actions.tsx b/packages/clerk-js/src/ui/elements/Actions.tsx
index fcb2d339f61..434b61f4faf 100644
--- a/packages/clerk-js/src/ui/elements/Actions.tsx
+++ b/packages/clerk-js/src/ui/elements/Actions.tsx
@@ -86,6 +86,7 @@ export const Action = (props: ActionProps) => {
       ]}
       isDisabled={card.isLoading}
       onClick={onClick}
+      role='menuitem'
       {...rest}
     >
       <Flex

From 08760b0e6c06990b27a746b7caeb77a9d302f642 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Wed, 4 Oct 2023 12:25:51 +0300
Subject: [PATCH 2/9] chore(clerk-js): Improve accessibility in UserButton and
 OrganizationSwitcher 2

---
 .../OrganizationSwitcher/OrganizationSwitcherPopover.tsx    | 6 ++++--
 .../OrganizationSwitcher/OrganizationSwitcherTrigger.tsx    | 2 +-
 .../OrganizationSwitcher/OtherOrganizationActions.tsx       | 5 ++++-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
index eafd17f0530..b8f8ac87f77 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -133,7 +133,8 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
         <PopoverCard.Root
           elementDescriptor={descriptors.organizationSwitcherPopoverCard}
           ref={ref}
-          role='menu'
+          role='dialog'
+          aria-label='organization switcher popover'
           {...rest}
         >
           <PopoverCard.Main elementDescriptor={descriptors.organizationSwitcherPopoverMain}>
@@ -145,8 +146,9 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
                   organization={currentOrg}
                   user={user}
                   sx={theme => t => ({ padding: `0 ${theme.space.$6}`, marginBottom: t.space.$2 })}
+                  aria-hidden='true'
                 />
-                <Actions>
+                <Actions role='menu'>
                   {manageOrganizationButton}
                   {__unstable_manageBillingUrl && billingOrganizationButton}
                 </Actions>
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
index 79907d85216..19c51ee457b 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
@@ -35,7 +35,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
         ref={ref}
         aria-label='organization-switcher-trigger'
         aria-expanded={props.isOpen}
-        aria-haspopup='menu'
+        aria-haspopup='dialog'
         {...rest}
       >
         {organization && (
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx
index 712ea0f1180..f2becc256e5 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx
@@ -44,7 +44,10 @@ export const OrganizationActionList = (props: OrganizationActionListProps) => {
   return (
     <>
       <UserInvitationSuggestionList />
-      <SecondaryActions elementDescriptor={descriptors.organizationSwitcherPopoverActions}>
+      <SecondaryActions
+        elementDescriptor={descriptors.organizationSwitcherPopoverActions}
+        role='menu'
+      >
         <UserMembershipList {...{ onPersonalWorkspaceClick, onOrganizationClick }} />
         <CreateOrganizationButton {...{ onCreateOrganizationClick }} />
       </SecondaryActions>

From 8bc4f823e782a41ea101df22836cad82fdf72132 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Wed, 4 Oct 2023 12:26:01 +0300
Subject: [PATCH 3/9] chore(clerk-js): Improve accessibility in UserButton and
 OrganizationSwitcher 3

---
 .changeset/afraid-bobcats-mate.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/afraid-bobcats-mate.md

diff --git a/.changeset/afraid-bobcats-mate.md b/.changeset/afraid-bobcats-mate.md
new file mode 100644
index 00000000000..b75a5d5e9e7
--- /dev/null
+++ b/.changeset/afraid-bobcats-mate.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Impove accessibility of UserButton and OrganizationSwitcher by using aria-\* attributes and roles like `menu` and `menuitems`.

From 1ce1022cbc22e7775ba7ee91f4287e566e02e4dd Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Wed, 4 Oct 2023 15:09:44 +0300
Subject: [PATCH 4/9] chore(clerk-js): Improve accessibility in UserButton and
 OrganizationSwitcher 4

---
 .../OrganizationSwitcher/OrganizationSwitcherPopover.tsx  | 7 +++++--
 .../OrganizationSwitcher/OtherOrganizationActions.tsx     | 2 +-
 .../src/ui/components/UserButton/UserButtonPopover.tsx    | 8 ++++++--
 .../src/ui/components/UserButton/UserButtonTrigger.tsx    | 2 +-
 packages/clerk-js/src/ui/elements/PoweredByClerk.tsx      | 1 +
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
index b8f8ac87f77..ef27d5c83f5 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -137,7 +137,10 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
           aria-label='organization switcher popover'
           {...rest}
         >
-          <PopoverCard.Main elementDescriptor={descriptors.organizationSwitcherPopoverMain}>
+          <PopoverCard.Main
+            elementDescriptor={descriptors.organizationSwitcherPopoverMain}
+            role='menu'
+          >
             {currentOrg ? (
               <>
                 <OrganizationPreview
@@ -148,7 +151,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
                   sx={theme => t => ({ padding: `0 ${theme.space.$6}`, marginBottom: t.space.$2 })}
                   aria-hidden='true'
                 />
-                <Actions role='menu'>
+                <Actions role='group'>
                   {manageOrganizationButton}
                   {__unstable_manageBillingUrl && billingOrganizationButton}
                 </Actions>
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx
index f2becc256e5..18b9f5155f9 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx
@@ -46,7 +46,7 @@ export const OrganizationActionList = (props: OrganizationActionListProps) => {
       <UserInvitationSuggestionList />
       <SecondaryActions
         elementDescriptor={descriptors.organizationSwitcherPopoverActions}
-        role='menu'
+        role='group'
       >
         <UserMembershipList {...{ onPersonalWorkspaceClick, onOrganizationClick }} />
         <CreateOrganizationButton {...{ onCreateOrganizationClick }} />
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx
index bbcf882a09c..8fcc616a296 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx
@@ -69,10 +69,14 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
       <PopoverCard.Root
         elementDescriptor={descriptors.userButtonPopoverCard}
         ref={ref}
-        role='menu'
+        role='dialog'
+        aria-label='user button popover'
         {...rest}
       >
-        <PopoverCard.Main elementDescriptor={descriptors.userButtonPopoverMain}>
+        <PopoverCard.Main
+          elementDescriptor={descriptors.userButtonPopoverMain}
+          role='menu'
+        >
           <UserPreview
             elementId={'userButton'}
             user={user}
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
index c7ac35107b4..7637933b1bc 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
@@ -22,7 +22,7 @@ export const UserButtonTrigger = withAvatarShimmer(
         ref={ref}
         aria-label='user-button-trigger'
         aria-expanded={props.isOpen}
-        aria-haspopup='menu'
+        aria-haspopup='dialog'
         {...rest}
       >
         <UserAvatar
diff --git a/packages/clerk-js/src/ui/elements/PoweredByClerk.tsx b/packages/clerk-js/src/ui/elements/PoweredByClerk.tsx
index 6409c22c892..6439846b6ff 100644
--- a/packages/clerk-js/src/ui/elements/PoweredByClerk.tsx
+++ b/packages/clerk-js/src/ui/elements/PoweredByClerk.tsx
@@ -94,6 +94,7 @@ const LogoMarkIconLink = () => {
         '&:hover': { color: 'inherit' },
       }}
       isExternal
+      aria-label='clerk-logo-url'
     >
       <Icon
         icon={LogoMark}

From 9d7ab6529aeac6b4c1ce60714f997bd32a7bdf62 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Wed, 11 Oct 2023 16:52:11 +0300
Subject: [PATCH 5/9] chore(clerk-js): Improve accessibility in UserButton and
 OrganizationSwitcher (pr comments)

---
 .../OrganizationSwitcher/OrganizationSwitcherPopover.tsx        | 2 +-
 .../ui/components/OrganizationSwitcher/UserMembershipList.tsx   | 2 +-
 .../clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx | 2 +-
 packages/clerk-js/src/ui/elements/PoweredByClerk.tsx            | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
index ef27d5c83f5..086e3b91cc2 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -134,7 +134,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
           elementDescriptor={descriptors.organizationSwitcherPopoverCard}
           ref={ref}
           role='dialog'
-          aria-label='organization switcher popover'
+          aria-label='Organization switcher popover'
           {...rest}
         >
           <PopoverCard.Main
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx
index 319f0392f43..e37d18a6f54 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx
@@ -37,7 +37,7 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
         ...common.unstyledScrollbar(t),
       })}
       role='group'
-      aria-label={hidePersonal ? 'memberships' : 'accounts'}
+      aria-label={hidePersonal ? 'List of all organization memberships' : 'List of all accounts'}
     >
       {currentOrg && !hidePersonal && (
         <PreviewButton
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx
index 8fcc616a296..04b99b45c3c 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx
@@ -70,7 +70,7 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
         elementDescriptor={descriptors.userButtonPopoverCard}
         ref={ref}
         role='dialog'
-        aria-label='user button popover'
+        aria-label='User button popover'
         {...rest}
       >
         <PopoverCard.Main
diff --git a/packages/clerk-js/src/ui/elements/PoweredByClerk.tsx b/packages/clerk-js/src/ui/elements/PoweredByClerk.tsx
index 6439846b6ff..8d1053e2b90 100644
--- a/packages/clerk-js/src/ui/elements/PoweredByClerk.tsx
+++ b/packages/clerk-js/src/ui/elements/PoweredByClerk.tsx
@@ -94,7 +94,7 @@ const LogoMarkIconLink = () => {
         '&:hover': { color: 'inherit' },
       }}
       isExternal
-      aria-label='clerk-logo-url'
+      aria-label='Clerk logo'
     >
       <Icon
         icon={LogoMark}

From 0d2591d1683216df1cfe4acf18611eaf8d32d92d Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Wed, 11 Oct 2023 16:53:34 +0300
Subject: [PATCH 6/9] chore(clerk-js): Add changeset

---
 .changeset/ten-wolves-cry.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/ten-wolves-cry.md

diff --git a/.changeset/ten-wolves-cry.md b/.changeset/ten-wolves-cry.md
new file mode 100644
index 00000000000..33c5c697341
--- /dev/null
+++ b/.changeset/ten-wolves-cry.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Improve accessibility in UserButton and OrganizationSwitcher.

From ac5fbb8c55b0bde731a4b3c8e782e79636b412e0 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 12 Oct 2023 10:18:14 +0300
Subject: [PATCH 7/9] chore(clerk-js): More descriptive aria labels

---
 .../OrganizationSwitcherTrigger.tsx                |  2 +-
 .../__tests__/OrganizationSwitcher.test.tsx        | 14 +++++++-------
 .../ui/components/UserButton/UserButtonTrigger.tsx |  2 +-
 .../UserButton/__tests__/UserButton.test.tsx       | 12 ++++++------
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
index 19c51ee457b..8575795b24e 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
@@ -33,7 +33,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
         colorScheme='neutral'
         sx={[t => ({ minHeight: 0, padding: `0 ${t.space.$2} 0 0`, position: 'relative' }), sx]}
         ref={ref}
-        aria-label='organization-switcher-trigger'
+        aria-label={`${props.isOpen ? 'Close' : 'Open'} organization switcher`}
         aria-expanded={props.isOpen}
         aria-haspopup='dialog'
         {...rest}
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx
index 99aac2ca42b..b1bf8f1a4a2 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx
@@ -1,7 +1,7 @@
 import type { MembershipRole } from '@clerk/types';
 import { describe } from '@jest/globals';
 
-import { render, runFakeTimers, waitFor } from '../../../../testUtils';
+import { act, render, runFakeTimers, waitFor } from '../../../../testUtils';
 import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { OrganizationSwitcher } from '../OrganizationSwitcher';
 import { createFakeUserOrganizationInvitation, createFakeUserOrganizationSuggestion } from './utlis';
@@ -14,7 +14,7 @@ describe('OrganizationSwitcher', () => {
       f.withOrganizations();
       f.withUser({ email_addresses: ['test@clerk.dev'] });
     });
-    const { queryByRole } = render(<OrganizationSwitcher />, { wrapper });
+    const { queryByRole } = await act(() => render(<OrganizationSwitcher />, { wrapper }));
     expect(queryByRole('button')).toBeDefined();
   });
 
@@ -25,7 +25,7 @@ describe('OrganizationSwitcher', () => {
         f.withUser({ email_addresses: ['test@clerk.dev'] });
       });
       props.setProps({ hidePersonal: false });
-      const { getByText } = render(<OrganizationSwitcher />, { wrapper });
+      const { getByText } = await act(() => render(<OrganizationSwitcher />, { wrapper }));
       expect(getByText('Personal account')).toBeDefined();
     });
 
@@ -168,7 +168,7 @@ describe('OrganizationSwitcher', () => {
       props.setProps({ hidePersonal: true });
       const { getByRole, userEvent } = render(<OrganizationSwitcher />, { wrapper });
       await userEvent.click(getByRole('button'));
-      await userEvent.click(getByRole('button', { name: 'Manage Organization' }));
+      await userEvent.click(getByRole('menuitem', { name: 'Manage Organization' }));
       expect(fixtures.clerk.openOrganizationProfile).toHaveBeenCalled();
     });
 
@@ -183,8 +183,8 @@ describe('OrganizationSwitcher', () => {
       });
       props.setProps({ hidePersonal: true });
       const { getByRole, userEvent } = render(<OrganizationSwitcher />, { wrapper });
-      await userEvent.click(getByRole('button'));
-      await userEvent.click(getByRole('button', { name: 'Create Organization' }));
+      await userEvent.click(getByRole('button', { name: 'Open organization switcher' }));
+      await userEvent.click(getByRole('menuitem', { name: 'Create Organization' }));
       expect(fixtures.clerk.openCreateOrganization).toHaveBeenCalled();
     });
 
@@ -198,7 +198,7 @@ describe('OrganizationSwitcher', () => {
         });
       });
       props.setProps({ hidePersonal: true });
-      const { queryByRole } = render(<OrganizationSwitcher />, { wrapper });
+      const { queryByRole } = await act(() => render(<OrganizationSwitcher />, { wrapper }));
       expect(queryByRole('button', { name: 'Create Organization' })).not.toBeInTheDocument();
     });
 
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
index 7637933b1bc..d4015199303 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
@@ -20,7 +20,7 @@ export const UserButtonTrigger = withAvatarShimmer(
         variant='roundWrapper'
         sx={[theme => ({ borderRadius: theme.radii.$circle }), sx]}
         ref={ref}
-        aria-label='user-button-trigger'
+        aria-label={`${props.isOpen ? 'Close' : 'Open'} user button`}
         aria-expanded={props.isOpen}
         aria-haspopup='dialog'
         {...rest}
diff --git a/packages/clerk-js/src/ui/components/UserButton/__tests__/UserButton.test.tsx b/packages/clerk-js/src/ui/components/UserButton/__tests__/UserButton.test.tsx
index f5a58f9e9d2..0d51d6b997a 100644
--- a/packages/clerk-js/src/ui/components/UserButton/__tests__/UserButton.test.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/__tests__/UserButton.test.tsx
@@ -31,7 +31,7 @@ describe('UserButton', () => {
       });
     });
     const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
-    await userEvent.click(getByRole('button', { name: 'FL' }));
+    await userEvent.click(getByRole('button', { name: 'Open user button' }));
     expect(getByText('Manage account')).not.toBeNull();
   });
 
@@ -45,7 +45,7 @@ describe('UserButton', () => {
       });
     });
     const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
-    await userEvent.click(getByRole('button', { name: 'FL' }));
+    await userEvent.click(getByRole('button', { name: 'Open user button' }));
     await userEvent.click(getByText('Manage account'));
     expect(fixtures.clerk.openUserProfile).toHaveBeenCalled();
   });
@@ -60,7 +60,7 @@ describe('UserButton', () => {
       });
     });
     const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
-    await userEvent.click(getByRole('button', { name: 'FL' }));
+    await userEvent.click(getByRole('button', { name: 'Open user button' }));
     await userEvent.click(getByText('Sign out'));
     expect(fixtures.clerk.signOut).toHaveBeenCalled();
   });
@@ -96,7 +96,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: 'FL' }));
+      await userEvent.click(getByRole('button', { name: 'Open user button' }));
       expect(getByText('First1 Last1')).toBeDefined();
       expect(getByText('First2 Last2')).toBeDefined();
       expect(getByText('First3 Last3')).toBeDefined();
@@ -106,7 +106,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: 'FL' }));
+      await userEvent.click(getByRole('button', { name: 'Open user button' }));
       await userEvent.click(getByText('First3 Last3'));
       expect(fixtures.clerk.setActive).toHaveBeenCalledWith(
         expect.objectContaining({ session: expect.objectContaining({ user: expect.objectContaining({ id: '3' }) }) }),
@@ -117,7 +117,7 @@ describe('UserButton', () => {
       const { wrapper, fixtures } = await createFixtures(initConfig);
       fixtures.clerk.signOut.mockReturnValueOnce(Promise.resolve());
       const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
-      await userEvent.click(getByRole('button', { name: 'FL' }));
+      await userEvent.click(getByRole('button', { name: 'Open user button' }));
       await userEvent.click(getByText('Sign out'));
       expect(fixtures.clerk.signOut).toHaveBeenCalledWith(expect.any(Function), { sessionId: '0' });
     });

From 2c30e8f9a1d686ab43f3f6258ddcb560f1c6afc0 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 12 Oct 2023 10:37:54 +0300
Subject: [PATCH 8/9] chore(clerk-js): Better usage of 'menu' roles

---
 .../OrganizationSwitcherPopover.tsx             | 10 +++-------
 .../OtherOrganizationActions.tsx                |  2 +-
 .../UserInvitationSuggestionList.tsx            |  1 +
 .../components/UserButton/UserButtonPopover.tsx | 17 +++++++++--------
 4 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
index 086e3b91cc2..728ba9371cd 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -134,13 +134,10 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
           elementDescriptor={descriptors.organizationSwitcherPopoverCard}
           ref={ref}
           role='dialog'
-          aria-label='Organization switcher popover'
+          aria-label={`${currentOrg?.name} is active`}
           {...rest}
         >
-          <PopoverCard.Main
-            elementDescriptor={descriptors.organizationSwitcherPopoverMain}
-            role='menu'
-          >
+          <PopoverCard.Main elementDescriptor={descriptors.organizationSwitcherPopoverMain}>
             {currentOrg ? (
               <>
                 <OrganizationPreview
@@ -149,9 +146,8 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
                   organization={currentOrg}
                   user={user}
                   sx={theme => t => ({ padding: `0 ${theme.space.$6}`, marginBottom: t.space.$2 })}
-                  aria-hidden='true'
                 />
-                <Actions role='group'>
+                <Actions role='menu'>
                   {manageOrganizationButton}
                   {__unstable_manageBillingUrl && billingOrganizationButton}
                 </Actions>
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx
index 18b9f5155f9..f2becc256e5 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx
@@ -46,7 +46,7 @@ export const OrganizationActionList = (props: OrganizationActionListProps) => {
       <UserInvitationSuggestionList />
       <SecondaryActions
         elementDescriptor={descriptors.organizationSwitcherPopoverActions}
-        role='group'
+        role='menu'
       >
         <UserMembershipList {...{ onPersonalWorkspaceClick, onOrganizationClick }} />
         <CreateOrganizationButton {...{ onCreateOrganizationClick }} />
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
index 1d5eadcbc98..fac892d69cf 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
@@ -139,6 +139,7 @@ const SwitcherInvitationActions = (props: PropsOfComponent<typeof Flex> & { show
       sx={t => ({
         borderTop: showBorder ? `${t.borders.$normal} ${t.colors.$blackAlpha200}` : 'none',
       })}
+      role='menu'
       {...restProps}
     />
   );
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx
index 04b99b45c3c..8c2b71547dd 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx
@@ -35,13 +35,14 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
 
   const sessionActions = authConfig.singleSessionMode ? null : otherSessions.length > 0 ? (
     <>
-      <SecondaryActions>
+      <SecondaryActions role='menu'>
         {otherSessions.map(session => (
           <PreviewButton
             key={session.id}
             icon={SwitchArrows}
             sx={t => ({ height: t.sizes.$14, borderRadius: 0 })}
             onClick={handleSessionClicked(session)}
+            role='menuitem'
           >
             <UserPreview
               user={session.user}
@@ -52,7 +53,7 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
         ))}
         {addAccountButton}
       </SecondaryActions>
-      <Actions>
+      <Actions role='menu'>
         <Action
           icon={SignOutDouble}
           label={localizationKeys('userButton.action__signOutAll')}
@@ -61,7 +62,7 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
       </Actions>
     </>
   ) : (
-    <SecondaryActions>{addAccountButton}</SecondaryActions>
+    <SecondaryActions role='menu'>{addAccountButton}</SecondaryActions>
   );
 
   return (
@@ -73,16 +74,16 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
         aria-label='User button popover'
         {...rest}
       >
-        <PopoverCard.Main
-          elementDescriptor={descriptors.userButtonPopoverMain}
-          role='menu'
-        >
+        <PopoverCard.Main elementDescriptor={descriptors.userButtonPopoverMain}>
           <UserPreview
             elementId={'userButton'}
             user={user}
             sx={theme => ({ padding: `0 ${theme.space.$6}`, marginBottom: theme.space.$2 })}
           />
-          <Actions elementDescriptor={descriptors.userButtonPopoverActions}>
+          <Actions
+            role='menu'
+            elementDescriptor={descriptors.userButtonPopoverActions}
+          >
             <Action
               elementDescriptor={descriptors.userButtonPopoverActionButton}
               elementId={descriptors.userButtonPopoverActionButton.setId('manageAccount')}

From c84e4b0c556d06703b50fd7b7ff5d3793b65c802 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 12 Oct 2023 11:09:43 +0300
Subject: [PATCH 9/9] chore(clerk-js,types): Fix changesets

---
 .changeset/afraid-bobcats-mate.md | 2 +-
 .changeset/ten-wolves-cry.md      | 5 -----
 2 files changed, 1 insertion(+), 6 deletions(-)
 delete mode 100644 .changeset/ten-wolves-cry.md

diff --git a/.changeset/afraid-bobcats-mate.md b/.changeset/afraid-bobcats-mate.md
index b75a5d5e9e7..c13b79576fa 100644
--- a/.changeset/afraid-bobcats-mate.md
+++ b/.changeset/afraid-bobcats-mate.md
@@ -2,4 +2,4 @@
 '@clerk/clerk-js': patch
 ---
 
-Impove accessibility of UserButton and OrganizationSwitcher by using aria-\* attributes and roles like `menu` and `menuitems`.
+Improve accessibility of `<UserButton />` and `<OrganizationSwitcher />` by using `aria-*` attributes (where appropriate) and roles like `menu` and `menuitem`.
diff --git a/.changeset/ten-wolves-cry.md b/.changeset/ten-wolves-cry.md
deleted file mode 100644
index 33c5c697341..00000000000
--- a/.changeset/ten-wolves-cry.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@clerk/clerk-js': patch
----
-
-Improve accessibility in UserButton and OrganizationSwitcher.