chore(clerk-js,localizations,types): Localize UserButton and OrgSwitcher triggers (#7086)

Author: alexcarpenter

.changeset/pretty-walls-burn.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Localize aria-labels within `UserButton` and `OrganizationSwitcher` triggers.

integration/tests/next-quickstart.test.ts

@@ -48,7 +48,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodesQuickstart] })(
     await u.po.expect.toBeSignedIn();
     await u.po.userButton.waitForMounted();
 
-    await expect(u.page.getByRole('button', { name: /Open user button/i })).toBeVisible();
+    await expect(u.page.getByRole('button', { name: /Open user menu/i })).toBeVisible();
   });
 
   test('user button is functional after sign in', async ({ page, context }) => {

integration/tests/sign-out-smoke.test.ts

@@ -84,7 +84,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('sign out
     await u.page.getByRole('link', { name: 'Protected', exact: true }).click();
     await u.page.getByTestId('protected').waitFor();
     await u.page.getByRole('link', { name: 'Home' }).click();
-    await u.page.getByRole('button', { name: 'Open user button' }).click();
+    await u.page.getByRole('button', { name: 'Open user menu' }).click();
 
     await u.page.getByRole('menuitem', { name: 'Sign out' }).click();
     await u.page.getByRole('link', { name: 'Protected', exact: true }).click();

integration/tests/user-profile.test.ts

@@ -127,7 +127,7 @@ export default function Page() {
     await u.page.goToRelative('/');
     await u.page.waitForClerkComponentMounted();
 
-    await u.page.getByRole('button', { name: 'Open user button' }).click();
+    await u.page.getByRole('button', { name: 'Open user menu' }).click();
 
     await u.page.getByText(/Manage account/).click();
 

packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx

@@ -1,13 +1,12 @@
 import { useOrganization, useOrganizationList, useUser } from '@clerk/shared/react';
 import { forwardRef } from 'react';
 
-import { OrganizationPreview } from '@/ui/elements/OrganizationPreview';
 import { PersonalWorkspacePreview } from '@/ui/elements/PersonalWorkspacePreview';
 import { withAvatarShimmer } from '@/ui/elements/withAvatarShimmer';
 
 import { NotificationCountBadge, useProtect } from '../../common';
 import { useEnvironment, useOrganizationSwitcherContext } from '../../contexts';
-import { Button, descriptors, Icon, localizationKeys } from '../../customizables';
+import { Button, descriptors, Icon, localizationKeys, useLocalizations } from '../../customizables';
 import { ChevronDown } from '../../icons';
 import type { PropsOfComponent } from '../../styledSystem';
 import { organizationListParams } from './utils';
@@ -23,6 +22,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
     const { user } = useUser();
     const { organization } = useOrganization();
     const { hidePersonal } = useOrganizationSwitcherContext();
+    const { t } = useLocalizations();
 
     if (!user) {
       return null;
@@ -46,20 +46,11 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
           sx,
         ]}
         ref={ref}
-        aria-label={`${props.isOpen ? 'Close' : 'Open'} organization switcher`}
+        aria-label={`${props.isOpen ? t(localizationKeys('organizationSwitcher.action__closeOrganizationSwitcher')) : t(localizationKeys('organizationSwitcher.action__openOrganizationSwitcher'))}`}
         aria-expanded={props.isOpen}
         aria-haspopup='dialog'
         {...rest}
       >
-        {organization && (
-          <OrganizationPreview
-            elementId={'organizationSwitcherTrigger'}
-            gap={3}
-            size='xs'
-            organization={organization}
-            sx={{ maxWidth: '30ch' }}
-          />
-        )}
         {!organization && (
           <PersonalWorkspacePreview
             size='xs'

packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx

@@ -5,7 +5,7 @@ import { UserAvatar } from '@/ui/elements/UserAvatar';
 import { withAvatarShimmer } from '@/ui/elements/withAvatarShimmer';
 
 import { useUserButtonContext } from '../../contexts';
-import { Button, descriptors, Flex } from '../../customizables';
+import { Button, descriptors, Flex, localizationKeys, useLocalizations } from '../../customizables';
 import type { PropsOfComponent } from '../../styledSystem';
 import { UserButtonTopLevelIdentifier } from './UserButtonTopLevelIdentifier';
 
@@ -18,14 +18,15 @@ export const UserButtonTrigger = withAvatarShimmer(
     const { sx, ...rest } = props;
     const { user } = useUser();
     const { showName } = useUserButtonContext();
+    const { t } = useLocalizations();
 
     return (
       <Button
         elementDescriptor={descriptors.userButtonTrigger}
         variant='roundWrapper'
         sx={[t => ({ borderRadius: showName ? t.radii.$md : t.radii.$circle, color: t.colors.$colorForeground }), sx]}
         ref={ref}
-        aria-label={`${props.isOpen ? 'Close' : 'Open'} user button`}
+        aria-label={`${props.isOpen ? t(localizationKeys('userButton.action__closeUserMenu')) : t(localizationKeys('userButton.action__openUserMenu'))}`}
         aria-expanded={props.isOpen}
         aria-haspopup='dialog'
         {...rest}

packages/clerk-js/src/ui/components/UserButton/__tests__/UserButton.test.tsx

@@ -30,7 +30,7 @@ describe('UserButton', () => {
       __experimental_asStandalone: true,
     });
     const { getByText, queryByRole } = render(<UserButton />, { wrapper });
-    expect(queryByRole('button', { name: 'Open user button' })).toBeNull();
+    expect(queryByRole('button', { name: 'Open user menu' })).toBeNull();
     getByText('Manage account');
   });
 
@@ -44,7 +44,7 @@ describe('UserButton', () => {
       });
     });
     const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
-    await userEvent.click(getByRole('button', { name: 'Open user button' }));
+    await userEvent.click(getByRole('button', { name: 'Open user menu' }));
     expect(getByText('Manage account')).not.toBeNull();
   });
 
@@ -58,7 +58,7 @@ describe('UserButton', () => {
       });
     });
     const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
-    await userEvent.click(getByRole('button', { name: 'Open user button' }));
+    await userEvent.click(getByRole('button', { name: 'Open user menu' }));
     await userEvent.click(getByText('Manage account'));
     expect(fixtures.clerk.openUserProfile).toHaveBeenCalled();
   });
@@ -76,7 +76,7 @@ describe('UserButton', () => {
     fixtures.clerk.signOut.mockImplementationOnce(callback => callback());
 
     const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
-    await userEvent.click(getByRole('button', { name: 'Open user button' }));
+    await userEvent.click(getByRole('button', { name: 'Open user menu' }));
     await userEvent.click(getByText('Sign out'));
 
     expect(fixtures.router.navigate).toHaveBeenCalledWith('/');
@@ -96,7 +96,7 @@ describe('UserButton', () => {
     props.setProps({ afterSignOutUrl: '/after-sign-out' });
 
     const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
-    await userEvent.click(getByRole('button', { name: 'Open user button' }));
+    await userEvent.click(getByRole('button', { name: 'Open user menu' }));
     await userEvent.click(getByText('Sign out'));
 
     expect(fixtures.router.navigate).toHaveBeenCalledWith('/after-sign-out');
@@ -133,7 +133,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 button' }));
+      await userEvent.click(getByRole('button', { name: 'Open user menu' }));
       expect(getByText('First1 Last1')).toBeDefined();
       expect(getByText('First2 Last2')).toBeDefined();
       expect(getByText('First3 Last3')).toBeDefined();
@@ -143,7 +143,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 button' }));
+      await userEvent.click(getByRole('button', { name: 'Open user menu' }));
       await userEvent.click(getByText('First3 Last3'));
       expect(fixtures.clerk.setActive).toHaveBeenCalledWith(
         expect.objectContaining({ session: expect.objectContaining({ user: expect.objectContaining({ id: '3' }) }) }),
@@ -156,7 +156,7 @@ describe('UserButton', () => {
         return Promise.resolve(callback());
       });
       const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
-      await userEvent.click(getByRole('button', { name: 'Open user button' }));
+      await userEvent.click(getByRole('button', { name: 'Open user menu' }));
       await userEvent.click(getByText('Sign out'));
       await waitFor(() => {
         expect(fixtures.clerk.signOut).toHaveBeenCalledWith(expect.any(Function), { sessionId: '0' });
@@ -170,7 +170,7 @@ describe('UserButton', () => {
         return Promise.resolve(callback());
       });
       const { getByText, getByRole, userEvent } = render(<UserButton />, { wrapper });
-      await userEvent.click(getByRole('button', { name: 'Open user button' }));
+      await userEvent.click(getByRole('button', { name: 'Open user menu' }));
       await userEvent.click(getByText('Sign out of all accounts'));
       await waitFor(() => {
         expect(fixtures.clerk.signOut).toHaveBeenCalledWith(expect.any(Function));

packages/localizations/src/ar-SA.ts

@@ -487,9 +487,11 @@ export const arSA: LocalizationResource = {
     },
   },
   organizationSwitcher: {
+    action__closeOrganizationSwitcher: undefined,
     action__createOrganization: 'أنشاء منظمة',
     action__invitationAccept: 'أنضمام',
     action__manageOrganization: 'أدارة المنظمة',
+    action__openOrganizationSwitcher: undefined,
     action__suggestionsAccept: 'طلب أنضمام',
     notSelected: 'لم يتم أختيار منظمة',
     personalWorkspace: 'الحساب الشخصي',
@@ -938,7 +940,9 @@ export const arSA: LocalizationResource = {
   },
   userButton: {
     action__addAccount: 'إضافة حساب',
+    action__closeUserMenu: 'إغلاق قائمة المستخدم',
     action__manageAccount: 'إدارة الحساب',
+    action__openUserMenu: 'فتح قائمة المستخدم',
     action__signOut: 'تسجيل الخروج',
     action__signOutAll: 'تسجيل الخروج من جميع الحسابات',
   },

packages/localizations/src/be-BY.ts

@@ -493,9 +493,11 @@ export const beBY: LocalizationResource = {
     },
   },
   organizationSwitcher: {
+    action__closeOrganizationSwitcher: undefined,
     action__createOrganization: 'Стварыць арганізацыю',
     action__invitationAccept: 'Join',
     action__manageOrganization: 'Кіраванне арганізацыяй',
+    action__openOrganizationSwitcher: undefined,
     action__suggestionsAccept: 'Request to join',
     notSelected: 'Арганізацыя не выбрана',
     personalWorkspace: 'Асабістае працоўнае прастора',
@@ -947,7 +949,9 @@ export const beBY: LocalizationResource = {
   },
   userButton: {
     action__addAccount: 'Дадаць уліковы запіс',
+    action__closeUserMenu: undefined,
     action__manageAccount: 'Кіраванне ўліковым запісам',
+    action__openUserMenu: undefined,
     action__signOut: 'Выйсці',
     action__signOutAll: 'Выйсці з усіх уліковых запісаў',
   },

packages/localizations/src/bg-BG.ts

@@ -490,9 +490,11 @@ export const bgBG: LocalizationResource = {
     },
   },
   organizationSwitcher: {
+    action__closeOrganizationSwitcher: undefined,
     action__createOrganization: 'Създаване на организация',
     action__invitationAccept: 'Присъединяване',
     action__manageOrganization: 'Управление',
+    action__openOrganizationSwitcher: undefined,
     action__suggestionsAccept: 'Заявка за присъединяване',
     notSelected: 'Няма избрана организация',
     personalWorkspace: 'Личен акаунт',
@@ -939,7 +941,9 @@ export const bgBG: LocalizationResource = {
   },
   userButton: {
     action__addAccount: 'Добавяне на акаунт',
+    action__closeUserMenu: undefined,
     action__manageAccount: 'Управление на акаунта',
+    action__openUserMenu: undefined,
     action__signOut: 'Изход',
     action__signOutAll: 'Изход от всички акаунти',
   },