Accordion Footer Block for React

Edit GROUPS at the top of the file: each group is an id, a title and its links (an href and a label); the count beside the title is the number of links, so it never needs editing. defaultValue on the Accordion names the group that is open on load. Every link is an anchor with href="#": point each at its page or use your router's link.

It keeps the footer short: whichever group you open pushes the others down by one row, never by five. To let several stay open: add multiple to the Accordion.

Yes. The Accordion takes hiddenUntilFound, so closed groups stay in the markup as hidden="until-found" and the browser's find in page opens the one that holds a match.

Each row is a button inside its own heading, in a nav labelled Footer under the footer landmark. Tab moves from row to row and into the open group's links, Enter or Space opens and closes a row, and the button says whether it is expanded.

A group eases open under its row while the chevron turns over. With reduced motion the chevron turns without a transition. The group also opens and closes at once, with no height animation.

Below lg the halves stack: the brand, then the rows from rail to rail under a rule with + marks, with the copyright above the rows. Nothing scrolls sideways at 320 pixels.