Segmented Accordion Mockup Features Block for React

Edit JOBS at the top of the file: each job has a label and four rows, and each row has a title, a sentence, a place for the caption and a region. The region is one of the ids in RegionId, and the part of the screen drawn inside the matching Region gets the ring when that row is open. To add a part, add an id, wrap the new piece of the drawing in a Region with it, and point a row at it.

Every part of the screen is wrapped in a Region. The open row's region gets an outline ring; every other region is covered by a translucent scrim that fades in over it. Both are drawn with a ring and a pseudo-element, so no part changes size or position and nothing shifts when you open a row.

Each job remembers its own open row; a job you have not touched is open on its first row. The accordion always has one row open, because the screen always highlights something, so you cannot close it. Closing the open row is ignored: the change handler keeps the previous row when it receives none.

The screen is a drawing, so it is hidden from assistive technology and has nothing to focus. What it shows is in the text: each row says what the feature does, and a caption under the accordion names the part that is highlighted ("Slash menu, under the last block"). The segmented control and the accordion are real controls with visible focus. Tab moves between the accordion rows; the arrow keys move between the jobs.

The header and the band fade up once when the page loads, the open row's panel slides open, and the ring and the scrim fade in about a third of a second. With reduced motion the fade-up and those fades are off, and the highlight changes at once.

The accordion comes first and the screen follows under a hairline. The screen reflows at its own width: the page tree becomes a strip above the document and the comment rail a strip below it, so every part you can highlight is still there. Below the large breakpoint the screen is not cropped by a mask.