Numbered Sidebar Benefit Panel Features Block for React

Edit the six capability objects at the top of the file: each has a number, a name, a sentence and three benefits. A drawing is a small component beside them (LiveEditingDrawing, CommentsDrawing, and so on) built from a few shared pieces, a drawn line, a page, a person and a named cursor; swap one for your own and pass it as the panel's child. The drawings are decoration, hidden from assistive technology, and the benefits say the same in text.

Tab enters the list on the open capability, the Up and Down arrows move between capabilities and open each as they go, and Tab again moves into the panel. Home and End jump to the first and last capability. The panel's drawing is hidden from the keyboard and screen readers on purpose. Base UI tabs open on focus here as well, so the arrow keys behave the same as on the other libraries.

No. Each panel's text is also drawn once, unseen, in the same grid cell as the open one, so the cell is as tall as the tallest panel; the drawing has a fixed height. Those copies are hidden from assistive technology and can't be focused.

The header and the list fade up once on load, and each panel fades up as it opens. With reduced motion all of it is off and the panel simply changes.

The list becomes a row of six numbered chips that scrolls sideways if the screen is narrower than the row, above the panel. The names stay in the markup for screen readers, and the panel's heading names the open capability. The benefits stack, and nothing scrolls the page sideways at 320 pixels.

Yes. Every colour comes from your theme's tokens; the selected row is a tint with a thin bar at its start, and the only filled chips in the drawings are the foreground colour, so your primary colour stays free for a button elsewhere on the page.