Regional Offices Footer Block for React

Edit REGIONS. Each region is an id, a name and an offices array. Each office is a city, a street, a phone (the visible text) and an href such as tel:+14155550148. Two offices per region fill the cell; the grid is one column on a phone and three from md. The numbers in the file are fictional. Keep the phone on dir="ltr" so a right-to-left page doesn’t reorder it.

Edit GROUPS. Each group is an id, a title and four links. The id is the accordion value. Five groups become five columns from lg and an accordion of five on a phone. A sixth group still stacks in the accordion; change lg:grid-cols-5 if the desktop row should hold it.

Yes. The markup holds the desktop columns and the phone accordion as two navs, each labelled Footer, and CSS shows one at a time (max-md:hidden and md:hidden). The hidden one is display: none, so it is out of the accessibility tree and the tab order. The cost is the links once more in the HTML.

Each group is a heading with a button. One group is open at a time, opening another closes it, and Product starts open. The open group’s four links are a single column. 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. Base UI moves between headings with Tab, not the arrow keys.

The icon set has no brand logos, and an unlabelled glyph doesn’t say where it goes. Each link in SOCIAL is an icon, a label and an href, and the label is visible. That label is the accessible name. Replace the icon and keep the label.

It is the current year, read when the footer renders, so it never goes stale. The block is a server component. The accordion is a client component it renders, and the year does not depend on it. On a server-rendered site the year is the server’s when the page was built or rendered.