An independent network for people who build public services with Drupal

  • Design systems

One accordion, many councils: the shared component library

Members are pooling the front-end components they keep rebuilding. The first release covers accordions, step-by-step navigation and contact panels.

A wall tiled with bright geometric triangles in many colours.
Photo: Illek Petr, CC BY-SA 2.0, via Wikimedia Commons

Every council website has an accordion. Most of them were built separately, tested separately and fixed separately when someone found they did not work with a screen reader. Multiply that by every component on every site and it is a lot of duplicated effort paid for out of public budgets.

The shared component library is our attempt to stop that. It is a small set of Single Directory Components for Drupal, each one built once, tested with assistive technology, and documented so a team can drop it into a LocalGov Drupal sub-theme without rewriting it.

What is in the first release

  • An accordion that follows the WAI-ARIA disclosure pattern and remembers nothing it should not.
  • Step-by-step navigation for longer journeys, based on the GOV.UK pattern.
  • A contact panel with opening times, phone, email and address in one consistent place.

Each component ships with its own CSS custom properties, so it takes on your brand colours and type without any overrides.

How decisions get made

Components are proposed in the Design systems group, built in pairs from different organisations, and reviewed by the accessibility working group before release. Nothing goes in because one supplier wants it to.

How to help

Use a component and tell us what broke. That is the most valuable thing you can do. If you have a component you have already built and tested, propose it in the group and we will look at it together.