Awards Table Team Block for React

Edit AWARDS at the top of the file: each award has a category, a winner's name and role, a year (a number of the company's years), a citation and the shape of its mark. The tally in the header is counted from the list, so it stays right when you add or remove one. Awards are listed newest first, in the order you write them.

Each row's button has aria-expanded and aria-controls, and its name includes the winner ("Citation for Jun Watanabe"). The citation sits in a second row of the same table body. It folds to nothing and is unreachable (inert, hidden) until its button opens it, so keyboard and screen reader users never land in a closed citation. With reduced motion it opens without the height transition.

A recognition table needs a caption, column headers with scope and a second row that spans every column. A plain table gives all of that on every base, and it is the same markup on Base UI and on the others. The winner's cell is the row header, so a screen reader announces the winner with each cell.

Drawings, made of a few paths each in the foreground tone, and hidden from assistive technology: the category is written in text. Categories are told apart by shape and by their words, never by a metal colour, so the table looks right in every theme.

The Category and Given columns are dropped from view and their text moves under the winner's name ("Craft, year 3"), so each row stays two lines. The Citation button keeps its icon and its screen-reader name. Nothing scrolls sideways at 320 pixels.

Yes. The columns follow the page direction, the year is wrapped in bdi, and the chevron turns with the button's open state rather than with the direction.