Peek Drawer Hover Reveal Row Features Block for Vue

Three things: a mouse over the cell, keyboard focus landing on the cell's plus button or on its link, and a press of the plus button, which is how touch and click reach it. The plus button is a real button with aria-expanded and aria-controls, and it turns into a cross while the drawer is open. Escape closes the drawer while the button has focus.

Edit CHANNELS at the top of the file: each cell has an icon, a title, a line, a metric value and label, three bullets and a link. Keep the title to a line or two and the bullets short (about 30 characters), because the drawer is a fixed-size panel at the cell's foot and the cell's height is h-72.

Only the drawer. It is positioned inside the cell, which has a fixed height and hides its overflow, so the cell, its neighbours and the page keep their size. The drawer covers the cell's metric while it is open.

Yes. Tab reaches each cell's plus button, which opens its drawer; the next Tab reaches the drawer's link, and Tab again moves on and closes the drawer. A closed drawer is inert, so its link can't take focus or be read until it is open.

The header fades up once on load and each drawer slides up over 300 milliseconds. With reduced motion both are off: the header simply appears and the drawer is shown or hidden at once.

The cells stack one per row, each still 288 pixels tall, and the drawer opens with a tap on the plus button. A touch doesn't count as a hover, so scrolling past a cell never opens it.