fix: improve accessibility of UI elements (#1034)

Author: kettanaito

app/components/user-dropdown.tsx

@@ -25,13 +25,15 @@ export function UserDropdown() {
 						// this is for progressive enhancement
 						onClick={(e) => e.preventDefault()}
 						className="flex items-center gap-2"
+						aria-label="User menu"
 					>
 						<Img
 							className="size-8 rounded-full object-cover"
 							alt={user.name ?? user.username}
 							src={getUserImgSrc(user.image?.objectKey)}
 							width={256}
 							height={256}
+							aria-hidden="true"
 						/>
 						<span className="text-body-sm font-bold">
 							{user.name ?? user.username}

app/routes/users+/index.tsx

@@ -45,6 +45,7 @@ export default function UsersRoute({ loaderData }: Route.ComponentProps) {
 									<Link
 										to={user.username}
 										className="bg-muted flex h-36 w-44 flex-col items-center justify-center rounded-lg px-5 py-3"
+										aria-label={`${user.name || user.username} profile`}
 									>
 										<Img
 											alt={user.name ?? user.username}

tests/e2e/2fa.test.ts

@@ -37,7 +37,7 @@ test('Users can add 2FA to their account and use it when logging in', async ({
 	await expect(main).toHaveText(/You have enabled two-factor authentication./i)
 	await expect(main.getByRole('link', { name: /disable 2fa/i })).toBeVisible()
 
-	await page.getByRole('link', { name: user.name ?? user.username }).click()
+	await page.getByRole('link', { name: 'User menu' }).click()
 	await page.getByRole('menuitem', { name: /logout/i }).click()
 	await expect(page).toHaveURL(`/`)
 
@@ -59,7 +59,5 @@ test('Users can add 2FA to their account and use it when logging in', async ({
 
 	await page.getByRole('button', { name: /submit/i }).click()
 
-	await expect(
-		page.getByRole('link', { name: user.name ?? user.username }),
-	).toBeVisible()
+	await expect(page.getByRole('link', { name: 'User menu' })).toBeVisible()
 })

tests/e2e/onboarding.test.ts

@@ -104,12 +104,12 @@ test('onboarding with link', async ({ page, navigate, getOnboardingData }) => {
 
 	await expect(page).toHaveURL(`/`)
 
-	await page.getByRole('link', { name: onboardingData.name }).click()
+	await page.getByRole('link', { name: 'User menu' }).click()
 	await page.getByRole('menuitem', { name: /profile/i }).click()
 
 	await expect(page).toHaveURL(`/users/${onboardingData.username}`)
 
-	await page.getByRole('link', { name: onboardingData.name }).click()
+	await page.getByRole('link', { name: 'User menu' }).click()
 	await page.getByRole('menuitem', { name: /logout/i }).click()
 	await expect(page).toHaveURL(`/`)
 })
@@ -344,7 +344,7 @@ test('login as existing user', async ({ page, navigate, insertNewUser }) => {
 	await page.getByRole('button', { name: /log in/i }).click()
 	await expect(page).toHaveURL(`/`)
 
-	await expect(page.getByRole('link', { name: user.name })).toBeVisible()
+	await expect(page.getByRole('link', { name: 'User menu' })).toBeVisible()
 })
 
 test('reset password with a link', async ({
@@ -402,7 +402,7 @@ test('reset password with a link', async ({
 
 	await expect(page).toHaveURL(`/`)
 
-	await expect(page.getByRole('link', { name: user.name })).toBeVisible()
+	await expect(page.getByRole('link', { name: 'User menu' })).toBeVisible()
 })
 
 test('reset password with a short code', async ({

tests/e2e/passkey.test.ts

@@ -58,7 +58,7 @@ test('Users can register and use passkeys', async ({
 	).toHaveLength(1)
 
 	// Logout
-	await page.getByRole('link', { name: user.name ?? user.username }).click()
+	await page.getByRole('link', { name: 'User menu' }).click()
 	await page.getByRole('menuitem', { name: /logout/i }).click()
 	await expect(page).toHaveURL(`/`)
 
@@ -81,9 +81,7 @@ test('Users can register and use passkeys', async ({
 	await Promise.race([passkeyAssertedPromise, errorPromise])
 
 	// Verify successful login
-	await expect(
-		page.getByRole('link', { name: user.name ?? user.username }),
-	).toBeVisible()
+	await expect(page.getByRole('link', { name: 'User menu' })).toBeVisible()
 
 	// Verify the sign count increased
 	const afterLoginCredentials = await client.send('WebAuthn.getCredentials', {
@@ -109,7 +107,7 @@ test('Users can register and use passkeys', async ({
 	expect(afterDeletionCredentials.credentials).toHaveLength(1)
 
 	// Logout again to test deleted passkey
-	await page.getByRole('link', { name: user.name ?? user.username }).click()
+	await page.getByRole('link', { name: 'User menu' }).click()
 	await page.getByRole('menuitem', { name: /logout/i }).click()
 	await expect(page).toHaveURL(`/`)
 

tests/e2e/search.test.ts

@@ -1,22 +1,25 @@
-import { invariant } from '@epic-web/invariant'
 import { expect, test } from '#tests/playwright-utils.ts'
 
 test('Search from home page', async ({ page, navigate, insertNewUser }) => {
 	const newUser = await insertNewUser()
 	await navigate('/')
 
+	// Search for an existing user.
 	await page.getByRole('searchbox', { name: /search/i }).fill(newUser.username)
 	await page.getByRole('button', { name: /search/i }).click()
 
-	await page.waitForURL(
-		`/users?${new URLSearchParams({ search: newUser.username })}`,
-	)
 	await expect(page.getByText('Epic Notes Users')).toBeVisible()
 	const userList = page.getByRole('main').getByRole('list')
 	await expect(userList.getByRole('listitem')).toHaveCount(1)
-	invariant(newUser.name, 'User name not found')
-	await expect(page.getByAltText(newUser.name)).toBeVisible()
+	await expect(
+		userList
+			.getByRole('listitem')
+			.getByRole('link', {
+				name: `${newUser.name || newUser.username} profile`,
+			}),
+	).toBeVisible()
 
+	// Search for a non-existing user.
 	await page.getByRole('searchbox', { name: /search/i }).fill('__nonexistent__')
 	await page.getByRole('button', { name: /search/i }).click()
 	await page.waitForURL(`/users?search=__nonexistent__`)