Hover Accordion Mockup Split Features Block for React

Edit FEATURES at the top of the file for the rows (a title, an icon, a sentence and two badges) and write each screen as a small component beside it: QueuesScreen, IncidentScreen, RunbookScreen and RotaScreen. A screen shows when the open row's id matches the Layer it sits in, so a new feature needs a row, a screen and a layer with the same id.

No. Pointing at a row opens it, but so does focusing it with Tab or the arrow keys and so does a tap or a click, because the open row is plain state shared by the accordion and the figure. The rows are real accordion buttons, so a screen reader hears the row that is open.

One row is always open, because the figure always shows a screen. Opening another row closes the first. Closing the open row is ignored: the change handler keeps the previous row when it receives none.

They are drawings, built from the page's own tokens in greyscale and hidden from assistive technology, so everything they say is also in the row's sentence. They never change the layout: all four sit in one grid cell and only the open one is visible.

The header and the band fade up once when the page loads, the open row's panel slides open, the screens cross-fade, and the live dot in the queues screen pulses. With reduced motion the fade-up, the cross-fade and the pulse are off and the screens swap instantly.

The accordion comes first and the figure follows under a hairline, at a shorter height, still showing the open row's screen. Tapping a row changes it.