fix(search): explicit label for users in search results

Author: kettanaito

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} notes`}
 									>
 										<Img
 											alt={user.name ?? user.username}

tests/e2e/search.test.ts

@@ -1,22 +1,23 @@
-import { invariant } from '@epic-web/invariant'
 import { expect, test } from '#tests/playwright-utils.ts'
 
 test('Search from home page', async ({ page, insertNewUser }) => {
 	const newUser = await insertNewUser()
 	await page.goto('/')
 
+	// 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} notes` }),
+	).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__`)