Avatar Podium Leaderboard Stats Block for React

Edit CONTRIBUTORS: a name, an area and the merged count. They are sorted and ranked when the module loads; the podium takes the first three and the rows the rest, and the headline total is summed from the same array. Initials come from the name (two words), so use AvatarImage inside each Avatar if you have photos; the initials stay as the fallback.

The document order is first, second, third, which is how a screen reader reads it. Each cell is placed on the grid by its rank (the leader in the middle column), so only the picture is rearranged. Each name is a heading that starts with a visually hidden place ("First place: Ines Varga"), because the outlined numeral is a picture and the place has to be in the text.

Medals need three colours that work in every theme and still read for people who can't tell them apart. The block uses height, a hairline stair, a filled avatar for the leader and the numeral instead, in the theme's own tones, so it looks the same in a lime, a stone or a mauve preset, light or dark.

The podium and the rows are ordered lists, each named, and the avatars are decorative: the name is text next to them. Counts are in bdi elements so right-to-left pages keep them intact, and each carries a visually hidden "merged". The initials and the outlined numeral are hidden from assistive technology because the names and places say the same in words.

The three podium cells share the width, with a smaller avatar and a name that wraps to two lines at most; the area badge disappears from the rows and the count stays. At 320 pixels nothing scrolls sideways.