Countries Table Team Block for React

Edit REGIONS at the top of the file. A region has an id, a label and its countries; a country has a name, its cities as one line, a count and three people. The tab counts, the captions and the header's totals are summed from the countries, and the bars are sized against the largest country in any region.

The number is the headcount and the avatars are only three of those people, followed by "+n" for everyone else. Their names are in the page for assistive technology ("Includes Devi Kapoor, Sven Aldous, Marta Kowalska").

Yes: a native table with a caption, th column headers with scope="col" and each country as a th with scope="row". It is a native table on every library, because the React Aria catalog's table is a grid without captions or scopes.

Tab moves into the tab list, the arrow keys move between regions and Home and End jump to the ends; the table is plain content, so there is nothing else to tab to.

It keeps two columns, so nothing scrolls sideways: the country with its cities and its people under it, and the headcount with its bar. The Cities and Who lives there columns come back from the medium breakpoint.

No. Every region's table is also drawn once, unseen and hidden from assistive technology, in the same grid cell, so the cell is as tall as the tallest table.