From 0a406e168f5ca67d05cdf4d99ffa76f2fed8a40f Mon Sep 17 00:00:00 2001
From: Stefanos Anagnostou <stefanos@clerk.dev>
Date: Thu, 29 Feb 2024 15:35:32 +0200
Subject: [PATCH 1/9] fix(clerk-js): Convert nested div to span inside button
 elements

---
 .changeset/lucky-bees-whisper.md                             | 5 +++++
 .../src/ui/components/UserButton/UserButtonTrigger.tsx       | 1 +
 packages/clerk-js/src/ui/elements/Actions.tsx                | 2 ++
 3 files changed, 8 insertions(+)
 create mode 100644 .changeset/lucky-bees-whisper.md

diff --git a/.changeset/lucky-bees-whisper.md b/.changeset/lucky-bees-whisper.md
new file mode 100644
index 00000000000..8b57d7b5403
--- /dev/null
+++ b/.changeset/lucky-bees-whisper.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Convert nested div to span inside button elements
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
index 40defd3dfe9..eff7c9251c3 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
@@ -32,6 +32,7 @@ export const UserButtonTrigger = withAvatarShimmer(
           elementDescriptor={descriptors.userButtonBox}
           isOpen={props.isOpen}
           align='center'
+          as='span'
           gap={2}
         >
           <UserButtonTopLevelIdentifier showName={showName} />
diff --git a/packages/clerk-js/src/ui/elements/Actions.tsx b/packages/clerk-js/src/ui/elements/Actions.tsx
index e6a4f9b6a49..cdda572b774 100644
--- a/packages/clerk-js/src/ui/elements/Actions.tsx
+++ b/packages/clerk-js/src/ui/elements/Actions.tsx
@@ -95,6 +95,7 @@ export const ExtraSmallAction = (props: Omit<ActionProps, 'label'>) => {
         elementDescriptor={iconBoxElementDescriptor}
         elementId={iconBoxElementId}
         justify='center'
+        as='span'
       >
         {status.isLoading ? (
           <Spinner
@@ -208,6 +209,7 @@ export const Action = (props: ActionProps) => {
         elementDescriptor={iconBoxElementDescriptor}
         elementId={iconBoxElementId}
         justify='center'
+        as='span'
         sx={[t => ({ flex: `0 0 ${t.sizes.$9}`, gap: t.space.$2, alignItems: 'center' }), iconBoxSx]}
       >
         {status.isLoading ? (

From 7e06c2ce4a1f9d5c7435999e80fd8b804bc18520 Mon Sep 17 00:00:00 2001
From: Stefanos Anagnostou <stefanos@clerk.dev>
Date: Fri, 1 Mar 2024 19:58:54 +0200
Subject: [PATCH 2/9] fix(clerk-js): Fix UserButton to use valid HTML

---
 .../clerk-js/src/ui/components/UserButton/UserButton.tsx    | 2 +-
 .../components/UserButton/UserButtonTopLevelIdentifier.tsx  | 1 +
 packages/clerk-js/src/ui/elements/Avatar.tsx                | 6 +++---
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx
index 9def175f7e9..ec2065d22f5 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx
@@ -26,7 +26,7 @@ const _UserButton = withFloatingTree(() => {
         ref={reference}
         onClick={toggle}
         isOpen={isOpen}
-        aria-controls={userButtonMenuId}
+        aria-controls={isOpen ? userButtonMenuId : undefined}
       />
       <Popover
         nodeId={nodeId}
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonTopLevelIdentifier.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonTopLevelIdentifier.tsx
index 9d67107d530..a48c5ad40ee 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButtonTopLevelIdentifier.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButtonTopLevelIdentifier.tsx
@@ -16,6 +16,7 @@ export const UserButtonTopLevelIdentifier = ({ showName }: UserButtonTopLevelIde
   return (
     <Text
       variant='subtitle'
+      as='span'
       elementDescriptor={descriptors.userButtonOuterIdentifier}
       sx={[
         t => ({
diff --git a/packages/clerk-js/src/ui/elements/Avatar.tsx b/packages/clerk-js/src/ui/elements/Avatar.tsx
index ca5417e8b03..558de60fd01 100644
--- a/packages/clerk-js/src/ui/elements/Avatar.tsx
+++ b/packages/clerk-js/src/ui/elements/Avatar.tsx
@@ -40,9 +40,7 @@ export const Avatar = (props: AvatarProps) => {
         title={title}
         alt={title}
         src={imageUrl || ''}
-        width='100%'
-        height='100%'
-        sx={{ objectFit: 'cover' }}
+        sx={{ objectFit: 'cover', width: '100%', height: '100%' }}
         onError={() => setError(true)}
         size={imageFetchSize}
       />
@@ -51,6 +49,7 @@ export const Avatar = (props: AvatarProps) => {
   // TODO: Revise size handling. Do we need to be this dynamic or should we use the theme instead?
   return (
     <Flex
+      as='span'
       elementDescriptor={[boxElementDescriptor, descriptors.avatarBox]}
       sx={[
         t => ({
@@ -73,6 +72,7 @@ export const Avatar = (props: AvatarProps) => {
        * The ":after" selector is responsible for the border shimmer animation.
        */}
       <Box
+        as='span'
         sx={t => ({
           overflow: 'hidden',
           background: t.colors.$colorShimmer,

From 3dc36b921dc44064ba67c4476dd426d82a2097b3 Mon Sep 17 00:00:00 2001
From: Stefanos Anagnostou <stefanos@clerk.dev>
Date: Mon, 4 Mar 2024 22:00:38 +0200
Subject: [PATCH 3/9] fix(clerk-js): Fix OrganizationSwitcher to use valid HTML

---
 packages/clerk-js/src/ui/common/NotificationCountBadge.tsx | 1 +
 .../OrganizationSwitcher/OrganizationSwitcher.tsx          | 2 +-
 packages/clerk-js/src/ui/elements/OrganizationPreview.tsx  | 5 +++++
 packages/clerk-js/src/ui/elements/UserPreview.tsx          | 7 +++++++
 4 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/clerk-js/src/ui/common/NotificationCountBadge.tsx b/packages/clerk-js/src/ui/common/NotificationCountBadge.tsx
index d562feebe89..271ae6c62ea 100644
--- a/packages/clerk-js/src/ui/common/NotificationCountBadge.tsx
+++ b/packages/clerk-js/src/ui/common/NotificationCountBadge.tsx
@@ -35,6 +35,7 @@ export const NotificationCountBadge = (props: NotificationCountBadgeProps) => {
     <Flex
       justify='center'
       align='center'
+      as='span'
       sx={[
         t => ({
           marginLeft: t.space.$1x5,
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcher.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcher.tsx
index b35a75414af..50349116a73 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcher.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcher.tsx
@@ -26,7 +26,7 @@ const _OrganizationSwitcher = withFloatingTree(() => {
           ref={reference}
           onClick={toggle}
           isOpen={isOpen}
-          aria-controls={switcherButtonMenuId}
+          aria-controls={isOpen ? switcherButtonMenuId : undefined}
         />
         <Popover
           nodeId={nodeId}
diff --git a/packages/clerk-js/src/ui/elements/OrganizationPreview.tsx b/packages/clerk-js/src/ui/elements/OrganizationPreview.tsx
index 974a7cbde8f..43e97d32f1c 100644
--- a/packages/clerk-js/src/ui/elements/OrganizationPreview.tsx
+++ b/packages/clerk-js/src/ui/elements/OrganizationPreview.tsx
@@ -52,6 +52,7 @@ export const OrganizationPreview = (props: OrganizationPreviewProps) => {
       elementId={descriptors.organizationPreview.setId(elementId)}
       gap={3}
       align='center'
+      as='span'
       sx={[{ minWidth: '0' }, sx]}
       {...rest}
     >
@@ -59,6 +60,7 @@ export const OrganizationPreview = (props: OrganizationPreviewProps) => {
         elementDescriptor={descriptors.organizationPreviewAvatarContainer}
         elementId={descriptors.organizationPreviewAvatarContainer.setId(elementId)}
         justify='center'
+        as='span'
         sx={{ position: 'relative' }}
       >
         <OrganizationAvatar
@@ -76,12 +78,14 @@ export const OrganizationPreview = (props: OrganizationPreviewProps) => {
         elementId={descriptors.organizationPreviewTextContainer.setId(elementId)}
         direction='col'
         justify='center'
+        as='span'
         sx={{ minWidth: '0px', textAlign: 'left' }}
       >
         <Text
           elementDescriptor={descriptors.organizationPreviewMainIdentifier}
           elementId={descriptors.organizationPreviewMainIdentifier.setId(elementId)}
           variant={mainTextSize}
+          as='span'
           truncate
           sx={mainIdentifierSx}
         >
@@ -92,6 +96,7 @@ export const OrganizationPreview = (props: OrganizationPreviewProps) => {
             elementDescriptor={descriptors.organizationPreviewSecondaryIdentifier}
             elementId={descriptors.organizationPreviewSecondaryIdentifier.setId(elementId)}
             localizationKey={localizeCustomRole(membership?.role) || unlocalizedRoleLabel}
+            as='span'
             truncate
           />
         )}
diff --git a/packages/clerk-js/src/ui/elements/UserPreview.tsx b/packages/clerk-js/src/ui/elements/UserPreview.tsx
index b1c516d1fc0..9c7ca839088 100644
--- a/packages/clerk-js/src/ui/elements/UserPreview.tsx
+++ b/packages/clerk-js/src/ui/elements/UserPreview.tsx
@@ -85,6 +85,7 @@ export const UserPreview = (props: UserPreviewProps) => {
       elementDescriptor={descriptors.userPreview}
       elementId={descriptors.userPreview.setId(elementId)}
       align='center'
+      as='span'
       sx={[t => ({ minWidth: '0px', width: 'fit-content', gap: t.space.$4 }), sx]}
       {...rest}
     >
@@ -95,6 +96,7 @@ export const UserPreview = (props: UserPreviewProps) => {
             elementDescriptor={descriptors.userPreviewAvatarContainer}
             elementId={descriptors.userPreviewAvatarContainer.setId(elementId)}
             justify='center'
+            as='span'
             sx={{ position: 'relative' }}
           >
             <UserAvatar
@@ -114,6 +116,7 @@ export const UserPreview = (props: UserPreviewProps) => {
               <Flex
                 elementDescriptor={descriptors.userPreviewAvatarIcon}
                 sx={[{ position: 'absolute', left: 0, bottom: 0 }, iconSx]}
+                as='span'
               >
                 {icon}
               </Flex>
@@ -125,6 +128,7 @@ export const UserPreview = (props: UserPreviewProps) => {
             elementDescriptor={descriptors.userPreviewAvatarContainer}
             elementId={descriptors.userPreviewAvatarContainer.setId(elementId)}
             justify='center'
+            as='span'
             sx={t => ({
               height: getAvatarSizes(t),
             })}
@@ -137,12 +141,14 @@ export const UserPreview = (props: UserPreviewProps) => {
         elementId={descriptors.userPreviewTextContainer.setId(elementId)}
         direction='col'
         justify='center'
+        as='span'
         sx={{ minWidth: '0px', textAlign: 'left' }}
       >
         <Text
           elementDescriptor={descriptors.userPreviewMainIdentifier}
           elementId={descriptors.userPreviewMainIdentifier.setId(elementId)}
           variant={mainIdentifierSize}
+          as='span'
           sx={[theme => ({ display: 'flex', gap: theme.sizes.$1, alignItems: 'center' }), mainIdentifierSx]}
         >
           {previewTitle && (
@@ -163,6 +169,7 @@ export const UserPreview = (props: UserPreviewProps) => {
             elementDescriptor={descriptors.userPreviewSecondaryIdentifier}
             elementId={descriptors.userPreviewSecondaryIdentifier.setId(elementId)}
             truncate
+            as='span'
             localizationKey={subtitle || identifier}
           />
         )}

From c1acd0e9d63b87581f52d4df31aef66333af2a0e Mon Sep 17 00:00:00 2001
From: Stefanos Anagnostou <stefanos@clerk.dev>
Date: Mon, 4 Mar 2024 23:51:43 +0200
Subject: [PATCH 4/9] fix(clerk-js): Fix SignIn/SignUp to use valid HTML

---
 packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx      | 1 +
 packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx | 1 +
 packages/clerk-js/src/ui/elements/SocialButtons.tsx         | 1 +
 packages/clerk-js/src/ui/primitives/Input.tsx               | 2 +-
 4 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx b/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
index 4c7543c622a..05bcfecd09b 100644
--- a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
+++ b/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
@@ -103,6 +103,7 @@ export const ArrowBlockButton = React.forwardRef<HTMLButtonElement, ArrowBlockBu
       )}
       <Flex
         gap={2}
+        as='span'
         sx={[
           {
             overflow: 'hidden',
diff --git a/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx b/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx
index ccaa8f896ce..754c5a9ca7b 100644
--- a/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx
+++ b/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx
@@ -135,6 +135,7 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps & { feedback
         >
           <Text
             colorScheme='primary'
+            as='span'
             sx={{
               textTransform: 'uppercase',
             }}
diff --git a/packages/clerk-js/src/ui/elements/SocialButtons.tsx b/packages/clerk-js/src/ui/elements/SocialButtons.tsx
index 8ef60940551..7163d4dbc32 100644
--- a/packages/clerk-js/src/ui/elements/SocialButtons.tsx
+++ b/packages/clerk-js/src/ui/elements/SocialButtons.tsx
@@ -207,6 +207,7 @@ const SocialButtonBlock = (props: SocialButtonProps): JSX.Element => {
       <Flex
         justify='center'
         align='center'
+        as='span'
         gap={3}
         sx={{
           width: '100%',
diff --git a/packages/clerk-js/src/ui/primitives/Input.tsx b/packages/clerk-js/src/ui/primitives/Input.tsx
index 36978317e90..3c005475a07 100644
--- a/packages/clerk-js/src/ui/primitives/Input.tsx
+++ b/packages/clerk-js/src/ui/primitives/Input.tsx
@@ -95,7 +95,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref)
       required={_required}
       id={props.id || fieldControlProps.id}
       aria-invalid={_hasError}
-      aria-describedby={errorMessageId}
+      aria-describedby={errorMessageId ? errorMessageId : undefined}
       aria-required={_required}
       aria-disabled={_disabled}
       data-feedback={feedbackType}

From c7f811b68a02ffdd8aa152f8ce191764b184ae07 Mon Sep 17 00:00:00 2001
From: Stefanos Anagnostou <stefanos@clerk.dev>
Date: Tue, 5 Mar 2024 00:22:32 +0200
Subject: [PATCH 5/9] fix(clerk-js): Fix UserProfile/OrganizationProfile to use
 valid HTML

---
 .../ui/components/UserProfile/ConnectedAccountsSection.tsx | 1 -
 .../src/ui/components/UserProfile/EmailsSection.tsx        | 5 +----
 .../components/UserProfile/EnterpriseAccountsSection.tsx   | 1 -
 .../clerk-js/src/ui/components/UserProfile/Web3Section.tsx | 1 -
 packages/clerk-js/src/ui/elements/Select.tsx               | 7 ++++++-
 packages/clerk-js/src/ui/elements/Tabs.tsx                 | 1 +
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
index 1ce07a35a19..7dc30f5468a 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
@@ -75,7 +75,6 @@ export const ConnectedAccountsSection = withCardStateProvider(() => {
                     />
                     <Box sx={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
                       <Flex
-                        as={'span'}
                         gap={2}
                         center
                       >
diff --git a/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx
index f248ef3da1e..f061a467c90 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx
@@ -52,10 +52,7 @@ export const EmailsSection = () => {
                 id='emailAddresses'
                 hoverable
               >
-                <Flex
-                  as='span'
-                  sx={t => ({ overflow: 'hidden', gap: t.space.$1 })}
-                >
+                <Flex sx={t => ({ overflow: 'hidden', gap: t.space.$1 })}>
                   <Text
                     sx={t => ({ color: t.colors.$colorText })}
                     truncate
diff --git a/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx
index 9ea9e0215b7..fbf5ad08b3e 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx
@@ -40,7 +40,6 @@ export const EnterpriseAccountsSection = () => {
               />
               <Box sx={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
                 <Flex
-                  as={'span'}
                   gap={2}
                   center
                 >
diff --git a/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx b/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx
index c23c316b76f..e013a0031ca 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx
@@ -57,7 +57,6 @@ export const Web3Section = withCardStateProvider(() => {
                         )}
                         <Box sx={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
                           <Flex
-                            as={'span'}
                             gap={2}
                             justify='start'
                           >
diff --git a/packages/clerk-js/src/ui/elements/Select.tsx b/packages/clerk-js/src/ui/elements/Select.tsx
index 3eac05b154e..d0151873fa0 100644
--- a/packages/clerk-js/src/ui/elements/Select.tsx
+++ b/packages/clerk-js/src/ui/elements/Select.tsx
@@ -391,7 +391,12 @@ export const SelectButton = (
     show = selectedOption ? (
       buttonRenderOption(selectedOption)
     ) : (
-      <Text sx={t => ({ opacity: t.opacity.$inactive })}>{placeholder}</Text>
+      <Text
+        as='span'
+        sx={t => ({ opacity: t.opacity.$inactive })}
+      >
+        {placeholder}
+      </Text>
     );
   }
 
diff --git a/packages/clerk-js/src/ui/elements/Tabs.tsx b/packages/clerk-js/src/ui/elements/Tabs.tsx
index 990705fd281..3db31f0c511 100644
--- a/packages/clerk-js/src/ui/elements/Tabs.tsx
+++ b/packages/clerk-js/src/ui/elements/Tabs.tsx
@@ -75,6 +75,7 @@ export const TabsList = (props: TabsListProps) => {
     <Flex
       elementDescriptor={descriptors.tabListContainer}
       onKeyDown={onKeyDown}
+      role='tablist'
       sx={[
         t => ({
           borderBottomStyle: t.borderStyles.$solid,

From c44504cf186a2c691a29dba0fc4e59ce8b7feb49 Mon Sep 17 00:00:00 2001
From: Stefanos Anagnostou <stefanos@clerk.dev>
Date: Tue, 5 Mar 2024 00:30:36 +0200
Subject: [PATCH 6/9] fix(clerk-js): Fix OrganizationList to use valid HTML

---
 .../OrganizationList/OrganizationListPage.tsx | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx b/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx
index 973b112e1d7..73b92f0a46e 100644
--- a/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx
@@ -180,25 +180,25 @@ const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void
               })}
 
             {(hasNextPage || isLoading) && <PreviewListSpinner ref={ref} />}
+
+            <Action
+              elementDescriptor={descriptors.organizationListCreateOrganizationActionButton}
+              icon={Add}
+              label={localizationKeys('organizationList.action__createOrganization')}
+              onClick={handleCreateOrganizationClicked}
+              sx={t => ({
+                borderTopWidth: t.borderWidths.$normal,
+                borderTopStyle: t.borderStyles.$solid,
+                borderTopColor: t.colors.$neutralAlpha100,
+                padding: `${t.space.$5} ${t.space.$5}`,
+              })}
+              iconSx={t => ({
+                width: t.sizes.$9,
+                height: t.sizes.$6,
+              })}
+            />
           </Actions>
         </PreviewListItems>
-
-        <Action
-          elementDescriptor={descriptors.organizationListCreateOrganizationActionButton}
-          icon={Add}
-          label={localizationKeys('organizationList.action__createOrganization')}
-          onClick={handleCreateOrganizationClicked}
-          sx={t => ({
-            borderTopWidth: t.borderWidths.$normal,
-            borderTopStyle: t.borderStyles.$solid,
-            borderTopColor: t.colors.$neutralAlpha100,
-            padding: `${t.space.$5} ${t.space.$5}`,
-          })}
-          iconSx={t => ({
-            width: t.sizes.$9,
-            height: t.sizes.$6,
-          })}
-        />
       </Col>
     </>
   );

From fb8291f710740fd094b164b92f58562019cfb84c Mon Sep 17 00:00:00 2001
From: Stefanos Anagnostou <stefanos@clerk.dev>
Date: Tue, 5 Mar 2024 00:34:38 +0200
Subject: [PATCH 7/9] fix(clerk-js): Alter the changeset message

---
 .changeset/lucky-bees-whisper.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/lucky-bees-whisper.md b/.changeset/lucky-bees-whisper.md
index 8b57d7b5403..ae9d9dea4c3 100644
--- a/.changeset/lucky-bees-whisper.md
+++ b/.changeset/lucky-bees-whisper.md
@@ -2,4 +2,4 @@
 '@clerk/clerk-js': patch
 ---
 
-Convert nested div to span inside button elements
+Correct the HTML structure of the UI components to ensure validity

From 47e56a5630f431c631c857f3e762c8378095cd09 Mon Sep 17 00:00:00 2001
From: Stefanos Anagnostou <stefanos@clerk.dev>
Date: Tue, 5 Mar 2024 11:31:24 +0200
Subject: [PATCH 8/9] fix(clerk-js): Fix tests

---
 packages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsx b/packages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsx
index 219e4867d3a..67f2aff11f7 100644
--- a/packages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsx
+++ b/packages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsx
@@ -47,7 +47,6 @@ describe('PlainInput', () => {
     expect(getByLabelText('some label')).not.toHaveAttribute('disabled');
     expect(getByLabelText('some label')).not.toHaveAttribute('required');
     expect(getByLabelText('some label')).toHaveAttribute('aria-invalid', 'false');
-    expect(getByLabelText('some label')).toHaveAttribute('aria-describedby', '');
     expect(getByLabelText('some label')).toHaveAttribute('aria-required', 'false');
     expect(getByLabelText('some label')).toHaveAttribute('aria-disabled', 'false');
   });

From 5cf9a2a4d5f7f0441906d118b894ac8e9f28d20b Mon Sep 17 00:00:00 2001
From: Stefanos Anagnostou <stefanos@clerk.dev>
Date: Tue, 5 Mar 2024 13:08:39 +0200
Subject: [PATCH 9/9] fix(clerk-js): Add `aria-expanded` attribute on
 UserButton/OrganizationSwitcher

---
 .../ui/components/OrganizationSwitcher/OrganizationSwitcher.tsx  | 1 +
 packages/clerk-js/src/ui/components/UserButton/UserButton.tsx    | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcher.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcher.tsx
index 50349116a73..bf29de404ab 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcher.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcher.tsx
@@ -27,6 +27,7 @@ const _OrganizationSwitcher = withFloatingTree(() => {
           onClick={toggle}
           isOpen={isOpen}
           aria-controls={isOpen ? switcherButtonMenuId : undefined}
+          aria-expanded={isOpen}
         />
         <Popover
           nodeId={nodeId}
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx
index ec2065d22f5..941d8fa1da6 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButton.tsx
@@ -27,6 +27,7 @@ const _UserButton = withFloatingTree(() => {
         onClick={toggle}
         isOpen={isOpen}
         aria-controls={isOpen ? userButtonMenuId : undefined}
+        aria-expanded={isOpen}
       />
       <Popover
         nodeId={nodeId}