fix: improve accessibility of UI elements

[kettanaito]

When testing the Epic Stack app as a part of my recent workshop, I've noticed that certain UI elements have poor accessibility, which resulted in them being rather difficult to properly target during the tests.

The user menu dropdown is one such example. Right now, it has an accessible name comprised of the username repeated twice:

This happens because the dropdown has two elements, each of which has user's username as the accessible text:

• the avatar img as alt={user.name}
• the dropdown button content is user.name.

That results into the element's accessible name being "Kody Kody", which looks broken, especially if you want to target this user dropdown in tests.

Instead, the element's accessible text should describe what that element is or does. In this case, I propose it should be something like "User menu".

There's a similar problem for the search results:

"Kody Kody Kody" isn't a very nice accessible name that describes what that link is/does. I propose {user.name || user.username} profile instead because that's what happens when you click on that link—it brings you to that user's profile page.

Test Plan

Checklist

• Tests updated
• Docs updated

Screenshots

Why wasn't this caught in tests?

Because the current tests target this element by inclusive name, not exact name:

await page.getByRole('link', { name: user.name ?? user.username }).click()

Saying { name: 'Kody' } will match Kody Kody without ever surfacing that the element's accessible name is problematic. This is a +1 for using exact: true as the default.

[kettanaito]

The user avatar is a decorative element in this context and should be disregarded accessibility-wise. Even its alt is not needed, but I fear to anger eslint at this point.

[kettanaito]

Using an explicit label will override whatever accessible text the element has inferred.

[kentcdodds]

Yes, this is definitely better. Thanks!