CivicTheme release 1.9

Last updated: 6 Dec 2024

CivicTheme v1.9 was released on 4 December, 2024. 1.9 features updates and enhancements to both our UIKit and Drupal theme, including form improvements and accessibility fixes in compliance with WCAG 2.2.

Form system and webform updates

An opt-in system has been introduced in CivicTheme to handle form elements not directly supported by the theme. Previously, this was an opt-out system. As part of this update, the form preprocessing system has been improved, allowing Drupal modules and form builder layers to correctly add attributes without restrictions.

This change prevents CivicTheme from rendering default textfield inputs for unsupported form elements, which previously occurred with non-standard elements on the front-end.

Additional webform fixes

  • Conditional elements in webforms have been fixed.
  • Padding and width of textfield inputs have been updated for consistency.
  • Labels are now properly supported within form elements.
  • is_required and is_disabled attributes are correctly applied in field controls.
  • Prefix and suffix variables have been added to form elements.
  • CivicTheme now handles prefixes and suffixes for form elements properly.
  • Resolved an issue where Advanced HTML elements failed to display content due to CivicTheme’s inability to process certain types of preprocessed text.

Accessibility fixes

  • The sub-navigation links in the left-side navigation have been fixed to ensure they are keyboard accessible. Additionally, the collapsed state is now marked as the default, making it compatible with assistive technologies.
  • The primary navigation, including its sub-navigation items, has been correctly marked up. Previously, it was visually styled to appear as global navigation but lacked the appropriate semantic markup as a navigation region.
  • Several updates were made to the "Back to Top" button. A default border and focus state were added, along with visually hidden text for screen readers to improve accessibility.
  • The skip link has been corrected to ensure it always has a valid target. Previously, on pages without a banner, the anchor was not rendered, causing the skip link to fail.
  • Lastly, the aria-label has been removed from buttons with the is_new_window attribute. The aria-label previously overrode the button's inner text, leading to a loss of context when used with screen readers.

Other updates and fixes

  • Button mixins have been relocated to the base directory. Previously, they were part of the button/chip component. This change also resolves a compilation issue when using a custom Sass toolkit.
  • New flags, icon_group_disabled and icon_single_only, have been added to the text-icon component. These allow grouping to be disabled and external links to replace icons. These updates have been applied to the navigation-card, next-step, publication-card, and subject-card components.
  • An ellipsis has been added to truncated card summaries for improved visual consistency.
  • Contextual links for authenticated users, which were previously rendering incorrectly at the top-right corner of the page, have been fixed.
  • A new layout setting has been introduced to control spacing around layouts. This replaces the algorithm in the \Drupal\civictheme\Plugin\Layout\ThreeColumnsLayout plugin, giving site builders direct control over spacing.
  • Additional fixes include updating the Node.js version to 18.14 for compatibility and resolving a SASS declaration error message.
  • Wokred on several inline CSS dependencies:
    • The ct-breakpoint now includes the media query, replacing the breakpoint-sass library without affecting the build output.
    • The normalize library has been removed, and its relevant parts were integrated into components, excluding outdated and IE-specific fixes, as CivicTheme no longer supports Internet Explorer.
    • Global styles, such as box-sizing: border-box, were moved into components to prevent conflicts and ensure easier packaging of standalone styles.
  • Storybook fix for sub-theme versions of Storybook. Sub-theme versions have often caused the JavaScript within a story to break, leading to issues with features like knobs and other functionalities. This has been a persistent issue since the inception of CivicTheme.

See the full list of work in GitHub CivicTheme UIKit(Opens in a new tab/window) and Drupal.org CivicTheme(Opens in a new tab/window).

 

  • Release notes

Help make government intuitive for all

CivicTheme is Australia’s government-first design system, empowering agencies, freelancers, and departments to create seamless experiences for every citizen.