Tabs Layout Blog Block for React

Edit POSTS at the top of the file: a title, a one-line dek, an author, a date as an ISO string, minutes of reading, example reads and an href. The three tabs are derived from that one list: Latest is the six newest by date, Popular the five with the most reads, and Editor's picks the posts that carry a note. Read counts are example data; replace them with your analytics.

Each panel is drawn twice. The live panel sits in a grid cell, and an unseen copy of all three panels (hidden from assistive technology and the keyboard) sits in the same cell, so the cell is always as tall as the tallest panel. Switching tabs only changes what shows on top; the page below never moves.

So that the tabs are worth having. The same list in three orders is a sort; here each tab answers a different question. Latest is for dates, so the date has its own column. Popular is a ranking, so the numeral leads and the read count ends the row. Editor's picks is a recommendation, so the editor's note sits beside the post, behind a hairline from md up.

The tabs are a labelled tab list: Tab reaches the selected tab, the arrow keys move between tabs, and the panel under it is the next stop. Each row is one link, its title, whose focus ring is drawn around the whole row; the Popular rank is spoken before the title ("1. The slow zoom is back"), and an editor's note is spoken with its author. Selecting follows focus, so an arrow key both moves to a tab and opens it, and Home and End jump to the first and last tab.

The three tabs fit one line, and the list scrolls sideways if a longer label ever needs more room. The rows stack: the date over the title, dek and byline for Latest; the numeral at the start of the title for Popular; the post over the editor's note for Editor's picks. Nothing scrolls the page sideways at 320 pixels.

Yes. The tabs, the rows and the hairline beside the editor's note mirror, and dates, reading times and read counts are isolated with bdi, so "48.2K reads" keeps its order. The quotation mark flips.