Documentation Footer Block for React

The page's title is the link, and its box is stretched over the whole cell with an ::after pseudo-element, so a click or tap anywhere in the cell follows it while a screen reader meets one link per cell, named by the page title. The keyboard focus ring is drawn on that box, inside the cell. Previous sits at the start of the row and Next at the end, and their arrows mirror in a right-to-left layout.

Edit the PREVIOUS and NEXT constants at the top of the file: each has a title, a one-line detail and an href. On the first page of a guide there is no previous page: delete the Previous cell and give the Next cell md:col-start-2, so it keeps its place at the end.

Point its href at the page's source in your repository (the URL that opens the file in an editor). It sits in its own ruled row so it reads as an action on this page, apart from the site-wide links under it.

A footer keeps one navigation landmark, labelled Footer, for the site's links. The two cells are a short list named "Neighbouring pages" under a heading that only screen readers see ("Keep reading"), so they are announced as part of the footer without adding a landmark.

The two cells stack, the groups sit two by two under the wordmark, and the legal row stacks. The cells are kept apart (1.5 rem, 2 rem from md) so their overshoot lines never touch, and nothing scrolls sideways at 320 pixels.