Comparison Table Footer Block for React

Edit the CAPABILITIES array at the top of the file: each row has a name and two booleans, ours and theirs. Keep four rows so the table stays beside the links, and compare against a tool you can describe fairly. Leave a tie in, because a table where you win every row is not believed.

No. A check and a minus differ in shape, not hue (both are in the foreground tone, the minus muted), and each has a hidden text name, "Included" or "Not included", so a screen reader reads the cell as a word. The column headers and the row names are real th cells with a scope.

A comparison is static, so it needs no grid behaviour. A plain table keeps its row and column semantics, takes a real caption and adds no tab stops. The caption names the table ("How we compare") and a muted line says what is compared.

The block is a footer element, so at the end of the page it is the content-info landmark. The link groups sit in one nav labelled Footer, each with an h2; the table is announced with its caption and its headers; the legal links are a labelled list.

The halves stack, the links first, then the table at the full width with the capability column taking about half. Nothing scrolls sideways at 320 pixels.

It is the current year, read when the footer renders, so it never goes stale. The block is a server component with no state, so on a server-rendered site the year is the server's when the page was built or rendered.