Scrolling lists on the page don't have accessible names

[eatyourgreens]

Package

• app-root?
• lib-user?

Describe the bug

The new home page and user stats use horizontal scrolling lists, styled with overflow-x: auto, to show project cards. Scrolling regions of the page must have accessible names and roles, but these lists aren't labelled in the accessibility tree.

To Reproduce

Navigate the new pages in a screen reader, and verify that none of the scrolling regions have accessible names.

Alternatively, examine each scrolling region's name and role in the browser accessibility tree.

Expected behavior

Regions styled with overflow: auto must have the following, in order to be accessible to screen readers:

• an accessible role.
• an accessible name.
• be able to receive keyboard focus.

Additional context

Keyboard only scrolling areas by Adrian Roselli (2022.)

Where a list has a heading, the easiest way to give it an accessible name is to link the list to the heading.

<h2 id="my-projects">My projects</h2>
<ul aria-labelledby="my-projects">
<!-- …some project cards -->
</ul>