Vertical Tabs Lessons Learned Block for React

Edit LESSONS at the top of the file: each has a title, a when label and the three texts, situation, learned and changed. A new lesson becomes a new row in the list and a new panel with no other change. Keep when relative ("Year 3", "Since our first customer") so the page doesn't age.

The list is a vertical tab list: the Up and Down arrow keys move between the lessons, Home and End jump to the first and last, and Tab moves into the open lesson. The open one is marked by a bar at the start of its row and by the row's selected state, so it's not shown by colour alone.

The lessons differ in length. An unseen, inert copy of every panel sits in the same grid cell as the open one, so the cell keeps the height of the tallest, and the hidden copies are out of the accessibility tree and the tab order.

As a definition list: "What happened", "What we learned" and "What changed" are terms, and each text is its description, so a screen reader announces them as pairs. The rows are separated by hairlines drawn by the list itself.

The list becomes a single row of chips that scrolls sideways inside its own band, with the open chip filled in your foreground colour; the year moves out of the chips and stays in the lesson's badge. The lesson sits under the chips. Nothing else scrolls sideways at 320 pixels.

The header and the tabs fade up once when the page loads, and the lesson's text fades in when you choose another. With reduced motion the entrances are off and the lesson swaps at once.