Vertical Tab Accordion Preview Features Block for React

Edit GROUPS at the top of the file. Each category has a label, an icon, a footer line and three features; each feature has a title, a sentence, three bullets and a row, the line of the console screen it is. The screen is drawn from the same data, so a new feature needs no extra markup: its row appears in the screen and is outlined when the feature opens.

The open feature is plain state shared by the accordion and the screen. Each row in the screen belongs to one feature, and the row whose feature is open gets the outline. Choosing another category resets the open feature to that category's first one, so a row is always outlined.

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

The rail is one tab stop. Use the up and down arrow keys to move between categories, and Tab to reach the accordion in the panel. The features are real accordion buttons: Enter or Space opens one. Tab moves between the features.

The rail becomes a row of tabs that scrolls sideways, with the accordion under it. The console screen moves inside the open feature, under its bullets, and shows the same outlined row; the pane on the end side is hidden below the large breakpoint.

The header and the band fade up once when the page loads, the open feature's panel slides open, and the outline on a screen row eases in. With reduced motion the fade-up and the outline's easing are off.