CivicTheme 1.10 - March 25, 2025

Changelog notes on the 1.10 release

We’re excited to announce the release of CivicTheme v1.10! This update focuses on accessibility improvements and Storybook upgrade.

New features

• [#459] & [#3506586] Implement a search link on mobile devices. Option to display in header or in mobile menu. (#477)

---

Improvements

• [#469] Added brand colours to css variable output (#460)

• Updated CivicTheme development to develop on Drupal 11 - (#1341)

• Storybook upgrade:

  • [#3504424] Remove storybook from theme settings and reduce the number of files committed to repository

  • [#3505934] Update storybook and overhaul build system

  • [#3506586] Create update script to assist with storybook update

---

Bug fixes

• [#228] Fixed unwanted cascading styles when toggling collapsible. (#495)

• [#294] Slider is broken when large images are used (#430)

• [#468] Slider resize is incorrect if the fonts are slow to load. (#466)

• [#3468226] Wrong view mode for field Reference in paragraph Civictheme navigation card ref

• [#3475695] civictheme_media_get_variables not returning anything for civictheme_remote_video media type

• [#3505673 ] ArgumentCountError when using content provisioning functiong

• [#3503929] Colour generator is not working on Drupal 10.4

---

Webform fixes

• [#378] WCAG 1.3.1 A: Error messages not programmatically associated with input (#439)

• [#356] WCAG 4.1.3 AA: Success message not announced by screen readers (#429)

• [#361] WCAG 3.3.2 A: Required fields not indicated (#486)

• [#3478484] Webform's 'Advanced HTML/Text' not displaying properly

• [#3495607] Checkbox and Radio Inputs not retaining selected state after form error

• [#3505451 ] Errors are not linking to error messages in radios and checkboxes

---

WCAG 2.2 accessibility fixes

• [#389] Removed aria-label from button with 'is_new_window (#390)

• [#376] WCAG 1.3.1 A: Current page shown with presentation alone (#434)

• [#374] WCAG 1.4.4 AA: Loss of carousel content when text resized (#432)

• [#424] User cannot scroll page with down and up arrows (#454)

• [#357] WCAG 4.1.2 A: Link has invalid state (#445)

• [#355] WCAG: Skip link targets empty anchor element (#470)

• [#368] WCAG 2.4.3 A: Visually hidden navigation elements in keyboard focus order (#462)

• [#367] WCAG 2.4.3 A: Visually hidden carousel elements in mobile focus order (#457)

• [#365] WCAG 2.4.7 AA: Focused element not visible and has no visible focus indicator (#462)

• [#360] WCAG 4.1.2 A: Element with aria-hidden attribute contains focusable descendants (#462)

• [#354] WCAG 4.1.3 AA: JAWS includes breadcrumb separator in list item count (#484)

---

Dependency updates

• Removed many webpack development dependencies to improve build time (internal Salsa Digital ticket)

• Upgraded storybook to v8.5 and moved from knobs to supported controls to improve build time (internal Salsa Digital ticket)

---

Storybook update

We have undertaken an upgrade process to Storybook and its dependencies. We have removed many of the Webpack dependencies that we relied upon almost four years ago.

Storybook has been upgraded to its latest major release and we envisage being able to keep this updated regularly.

We have updated from using the deprecated Storybook Knobs for our stories to using controls.

We are now using Vite and the Drupal Twig Vite Plugin for building storybook.

Our build script is now a Node JS script with only two developer dependencies - sass-embedded and glob.

What this means is recompiling CSS is done in ~2 seconds, storybook is built in ~8seconds and changes to twig files are almost shown instantaneously (and style changes in the time it takes to recompile styles):

Our goal with this reduction in dependencies is to make it easier for projects to keep their sub-theme dependencies updated without having to update CivicTheme to do so.

Existing sites

If this is the first version of CivicTheme you are installing or you are creating a new site then you do not need to update anything.

Part of the Storybook update you are required to update your existing sub-theme build system and update any existing stories from using knobs to controls.

Update the build system

To assist with the updating of the storybook / front-end build system we have developed a CLI application to guide you through the process.

This CLI Tool can be found in CivicTheme Upgrade Tools repository (see: storybook-v8-upgrade directory for this tool).

We highly recommend that you use a version control system to ensure that any changes this tool makes can be rolled back and reviewed.

The CLI tools consists of two parts:

1. Build System Update: Replaces package.json dependencies, updates configuration files, and modifies build scripts to be compatible with Storybook v8.

2. Story File Conversion: Uses the Claude AI API to convert story files from the deprecated knobs API to the modern controls API.

The first part runs a bash script against your sub-theme directory replacing the old build system and creating the new build system.

If you have modified your sub-theme’s build system this may not be appropriate for you - but for most site’s this will update all your scripts that compile CSS, JS and storybook.

The second part integrates with Claude AI and requires an API key. It sends each story file to Claude AI API and converts it to be compatible with storybook v8.

You need to assess whether it is appropriate for your project to be doing this. No other files get sent to the API just the storybook files.

The stories in CivicTheme can be used to manually guide you on what is needed to update storybook.

Finally, if development has finished on your project removing all of your custom stories is another option to update to the latest build system.

Using the new system

The new commands for building theme styles and assets can be found by running npm run in your sub-theme directory.

---

Drupal 10 / 11

Don't forget to read the CivicTheme Drupal installation guide to learn how to get started.

If you encounter any issues with installing a new site we can be contacted via civictheme-designsystem Slack channel (within the main Drupal Slack channel).

---

Drupal 11

CivicTheme is compatible with Drupal 11 and Drupal CMS.

CivicTheme development is now being undertaken on Drupal 11.

However, the modules that CivicTheme depends on do not all have Drupal 11 releases. We are using the following patches for incompatible modules. To install these module dependencies on Drupal 11 add these patches to your composer.json:

        "drupal/simple_sitemap": {
            "Error on installing / enabling simple_sitemap in D11: https://www.drupal.org/project/simple_sitemap/issues/3507718": "./patches/modules/simple_sitemap/fix-error-on-install.patch"
        },
        "drupal/styleguide": {
            "Create Drupal 11 test release: https://www.drupal.org/project/styleguide/issues/3505640": "https://git.drupalcode.org/project/styleguide/-/merge_requests/23.patch"
        }

When new releases created for these modules are created these patches should be no longer required.

---

Drupal CMS

CivicTheme is compatible with Drupal CMS (and Drupal 11) but for it to interact with the Drupal CMS module ecosystem we have had to create a recipe to set it up. Find the recipe in GitHub CivicTheme upgrade tools.

We have instructions in the drupal-cms-recipes directory on how to install and run the recipes. This recipe is under development and there are instructions on how to run within the repository.

We are looking for early adopters to use this recipe and give their feedback.

Upcoming

We are currently undertaking a Single Directory Component conversion project moving CivicTheme from using the Components module to using core’s Single Directory Component

Special mentions

• Thanks to richardgaunt , alan.cole, febdao, joshua1234511, @alanrako, fionamorrison23, dhruv.mittal, jezrsh, danielgry, sime, and all contributors for their hard work on this release.

• Shout out to the Digital Transformation Agency (DTA) for WCAG UI Kit ticket contributions.