Card Stack Team Block for React

Edit PEOPLE at the top of the file: a person is a name, a role, an ask sentence (it follows "Ask me about") and a city. The counter and the buttons' wrap-around come from the array's length. Cards are a fixed height, so keep each ask to about two lines.

The cards underneath are covered, so a link in one would take focus to something nobody can see. They are marked inert, which takes them out of the tab order and the accessibility tree; Previous and Next bring each one to the top. The counter is a polite live region that reads the name and position ("Tariq Mansour, 2 of 6") when the deck changes, so a screen reader user hears who is on top without leaving the button.

Tab to Previous or Next and press Enter or Space; the focus stays on the button, so you can press it again. The deck wraps in both directions. The top card's "Say hello" link is the first Tab stop in the block, before the buttons.

Every card sits in the same place and is moved by its depth: the card below the top is lowered by 16 px and narrowed slightly from its bottom edge, so exactly 16 px of it shows; the third and fourth step down again, and the rest wait behind the fourth, hidden. When the top card goes to the back it slides down behind the others.

The cards still change places, but without sliding: the transition is removed, so the new top card appears at once. Nothing else on the block moves.

Below lg the figure is a full-width frame under the heading, with the deck centred at a comfortable card width, and the buttons sit under the frame on one line with the counter between them. The deck's height is fixed, so pressing a button never shifts the page.