Sortable Media Mentions About Block for React

They are MENTIONS at the top of the file: an outlet, a headline, a kind, the day as month and day for the time element and the same day as read, and the reach as a number. The reach is formatted compactly (1.9M, 640K). Add more rows and keep the order of the data newest first; the sort does the rest.

The Select picks between Newest first and Largest reach and the rows are re-ordered in place from the same data; nothing is fetched. A polite status says how the list is sorted, so the change is announced. The Select opens with Enter or Space and moves with the arrow keys on every library.

A year goes stale the day the page ships. The days are month and day in time elements, and "newest" is worked out from them, so the list assumes one year of coverage. If you show older pieces, put the full date in the dateTime attribute and sort on that.

The block has an h2, and each mention is a list item with an h3 holding the link. The whole row is clickable through the link's stretched hit area, and its focus ring is drawn around the row. The kind and day are read before the headline, the reach after it.

The Select takes the full width under the header, and each row stacks: masthead, kind and day, then the headline, then the reach as a single line. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the figures stay in reading order.

The header and the list fade up once on load and the link's arrow nudges on hover, all with CSS. With reduced motion nothing moves. Sorting re-orders the rows without animation.