Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(clerk-js): Improve accessibility in UserButton and OrganizationSwitcher #1826

Merged
merged 9 commits into from
Oct 12, 2023
Prev Previous commit
Next Next commit
chore(clerk-js): More descriptive aria labels
panteliselef committed Oct 12, 2023
commit ac5fbb8c55b0bde731a4b3c8e782e79636b412e0
Original file line number Diff line number Diff line change
@@ -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'
LekoArts marked this conversation as resolved.
Show resolved Hide resolved
{...rest}
Original file line number Diff line number Diff line change
@@ -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();
});

Original file line number Diff line number Diff line change
@@ -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}
Original file line number Diff line number Diff line change
@@ -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' });
});