Leaderboard Podium Features Block for React

Edit SERVERS at the top of the file: each entry has a name, adoption (installs a week, in thousands), speed (thousands of requests a second) and a trend (up, steady or down). Ranks come from sorting on the chosen measure, never from typed numbers, so adding a measure means adding a field and an entry in METRICS. The podium always shows the first three.

The two choices are a Segment Group, so one is always selected: arrow keys move between them and the order changes as you choose. A polite status line says who is now first, for screen readers, and the podium and the table list the same ranking.

It's an ordered list named "Top three by adoption" (or speed), in rank order, so a screen reader hears the winner first even though the first place is drawn in the middle. The big numerals are decoration, because the list already announces its position. The full standings are a real table with column headers and a name for the table.

Each row has an arrow (up, down) or a dash, in the text colour, and a screen reader hears the word: Rising, Falling or Steady. Nothing depends on a green or a red, so it reads in any theme.

The header fades up once when the page loads, with a CSS transition. Re-ranking reorders the rows and the podium at once. With reduced motion the transition is off and the section simply appears.

The podium stays three across with shorter plinths and names that truncate, and the table drops its trend column so the rank, name and both measures fit. The segmented control sits under the header text. Nothing scrolls sideways at 320 pixels.