Layered Stack Diagram Features Block for React

Edit LAYERS at the top of the file: each layer has a name, a sentence, its parts and step, the bar's width from sm (one class per layer, widening by about a tenth each step). The bar's count of parts is the length of parts. Keep it to five or six layers: the frame is sized for them.

Pointing at a bar or tabbing to it makes it the active layer: the bar turns to the text colour and its group in the list gets a tint and a heavier title. Tapping a bar does the same on a touch screen. The state is plain useState, and the list shows every layer the whole time, so keyboard and screen reader users lose nothing.

The bars are real buttons in an ordered list, each named by its layer and count, with aria-pressed on the active one and a visible focus ring. The list is a second ordered list with a heading per layer. The frame's caption says which end is closest to users and which to hardware.

The bars lose their stepped widths and run the full width of the frame, so each one is an easy target, and the list sits under the ladder with a hairline between them. The keyboard order is the same: bars first, then the list.

A flat bar has room for a name and a count at every width, and a stack of trapezoids needs the text to fit its narrowest edge. The steps still read as layers resting on a wider base, without clipped labels.

The diagram and its list are the feature. Add a Shine Button under the list if the page needs a call to action here.