Roster Wall About Block for React

The people are PEOPLE: a first name, a last name (used for the initials and the button's name), a short role and a since such as 2 for "Since Year 2". The header count and the button label both use the length of the list. PHONE_COUNT is four rows of three, the number a phone shows before the button. Keep the list a multiple of six if you want every desktop row full.

The heading is the section's only h2. The wall is a list of buttons. Each button's name is the full name, the function and "since Year N", so the year does not depend on it being visible. The initials avatar is decorative, because the name is in the button. The lines are drawn by a layer hidden from assistive technology.

Hover and keyboard focus swap the function line for "Since Year N" in the same spot, so the cell does not grow. A tap presses the cell and the year stays; press it again, or press another cell, and the function comes back. The button's name always includes both, whether or not the year is on screen.

The first twelve people are visible. The rest stay in the page, hidden with CSS, until the button is pressed. The button is "Show all 24" both before and after, and aria-expanded tells the state. Pressing it again hides the extra rows. From md the button is gone and all twenty-four are shown. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the cells follow the reading direction.

The header fades up once on load. With reduced motion it simply appears. The year swaps with no animation, and the chevron on the button turns without animation when reduced motion is on. Nothing plays by itself.

One cell is held at a time. Hover and focus still reveal a year on whatever cell you are on, and that reveal goes away when you leave. Only the pressed cell keeps its year.