Social Icons Footer Block for React

Edit the SOCIAL array: each entry is an icon, a label and an href. The label is both the tooltip and the accessible name, so keep it as the network's name. To use the networks' own logos, swap the icon for your brand icons. Five fit comfortably beside the wordmark; add more and they wrap.

Each icon opens a tooltip with its name on hover and on keyboard focus, using the library's own tooltip. The tooltip trigger renders the icon link itself, so there is no wrapper element. On touch screens the tooltip does not open, but the name is also in the link's hidden text, so screen readers and voice control still find it.

The block is a footer, the page's content-info landmark when placed outside main. The social links are a list named Follow Quirk, and the policy links sit in a nav named Footer. Every icon is a link in the tab order and shows the theme's focus ring.

The footer uses the spine every block shares, so its top rule is the only line between it and the block above. The band's rule is drawn by Guides inside the page column, and nothing is drawn under the band because the footer is the end of the page.

The wordmark and tagline come first, then the five icons in a row, then the band with the copyright above the policy links. Nothing scrolls sideways at 320 pixels.