v1.10.7

1.10.7 - 2024-12-13

v1.10.6

1.10.6 - 2024-12-12

v1.10.5

1.10.5 - 2024-12-11

v1.10.4

1.10.4 - 2024-12-11

v1.10.3

1.10.3 - 2024-12-11

v1.10.2

1.10.2 - 2024-12-09

Design System v1.10.1

Released on 28 Nov 2024

This patch release includes changes to the src/components/card_multi_action/html/component.hbs file to improve the structure and styling of the card component. #202

The most important changes are:

Structural improvements:

• Added a div with the class container-fluid to wrap the card content, which helps in managing the layout and responsiveness of the card.

Styling adjustments:

• Removed unnecessary whitespace at the end of the </div> tag to clean up the code.

Design System v1.10.0

Released on 28 Nov 2024

This release includes several updates to the CSS and HTML components to improve accessibility and layout consistency. The key changes involve adding ARIA attributes for better accessibility, enhancing the layout of tags, and updating the accordion component to support dynamic title levels. #

Improvements and Fixes #201

Basic Search

• The visible label was different from the label in the code. The existing code was simplified by using a visible label of "Sort by:" for the select element. The label and select were programmatically associated by using a for attribute on the label element and an id on the select element. [QHWT-1117]

Banner

• A meaningful image had no alternative text. An aria-label and role="img" were added to improve accessibility for screen readers. [QHWT-1079]

Main Navigation

• Focus moved to the first interactive element in the main navigation on smaller viewports. Focus was set on the heading instead of the Close button. The heading text (.qld__main-nav__menu-heading) was ensured to be marked up as an h1 or h2. The heading was given the attribute and value tabindex="-1". When the modal opened, focus was set on the modal heading using the JavaScript focus() method. [QHWT-1086]

Cards

• An interactive element was not keyboard accessible. An aria-label and role="img" were added to the cards. All interactive elements were ensured to be keyboard operable, and the missing href attribute was added to the element. [QHWT-1087]

Cards

• The aria-label attribute was placed on static elements. The aria-label attribute was removed to treat the icons on the cards as decorative. [QHWT-1088]

Pagination

• The active page in pagination could not be programmatically determined. For the li list item element with the active class denoting the current page, aria-current="page" was added to the child link element. [QHWT-1210]

Pagination Text

• Text on the children’s pagination did not meet minimum contrast requirements. The contrast between text and background colors was increased to meet the minimum contrast requirement. Text was ensured to have a contrast ratio of at least 4.5:1 unless it was large text. Large text (larger than 24px or 18.5px in bold weight) was allowed to have a lower contrast ratio of at least 3:1. [QHWT-1213]

Accordion

• A custom metadata field was added for accordion headings. [QHWT-1214]

Tags

• An interactive element did not have a visible focus indicator. A clearly visible focus indicator, such as an outline or highlight, was ensured for all keyboard-operable user interface components. Focus indicators were made to have a minimum contrast ratio of 3:1 against the background. [QHWT-1215]

Internal reference - QHWT-1206

Design System v1.9.0

Released on 19 Nov 2024

This release includes various changes across multiple components to improve accessibility, layout, and functionality. The most important changes include adding ARIA attributes for better accessibility, modifying HTML structures for semantic correctness, and updating CSS for consistent styling.

Improvements and Fixes #188

• Back to Top Widget
  • Skip link issue: Fixed the skip link so that it moves keyboard focus to the target destination, ensuring users navigating via keyboard can efficiently reach the content. (QHWT-1076)
  • Decorative icon image visibility: Ensured that decorative images are properly hidden from assistive technologies by using aria-hidden="true", reducing unnecessary noise for screen readers. (QHWT-1078)
• Accordion
  • ARIA design pattern: Completed the ARIA design pattern implementation to include proper roles and properties (aria-expanded, aria-controls), ensuring screen readers provide accurate information about the state of the Accordion. (QHWT-1075, QHWT-1082)
  • Button state communication: Fixed the issue where the expanded/collapsed state was not communicated correctly to assistive technologies by updating the aria-expanded attribute dynamically. (QHWT-1082)
• Footer
  • Heading structure: Updated footer headings to better reflect the content structure by applying appropriate heading levels and improving semantic HTML. (QHWT-1085)
• Feature Card
  • List accessibility: Resolved the issue where a single card was incorrectly marked as a list. Adjusted the structure to remove unnecessary list markup. (QHWT-1078)
• Icon Updates
  • Header linked image: Provided accessible names for linked header images using alt attributes to ensure screen readers announce their purpose. (QHWT-1082)
• Main nav icon
  • Fixed missing accessible names for main navigation icons by adding descriptive aria-label attributes.
• In-page Alert
  • Text as heading: Ensured that alert text is marked up as a heading, improving navigation and accessibility for users relying on screen readers. (QHWT-1085)
• Global Alert
  • Section identification: Updated the markup to include landmarks (section with aria-labelledby) for better section identification by assistive technologies. (QHWT-1082)
• Banner
  • Visited link color: Updated the visited link color on the hospital menu anchor links to ensure sufficient contrast for users with visual impairments.
• Form Elements
  • Date select fields: Standardised the width of date select fields in Squiz Matrix forms for consistent alignment and usability across devices. (QHWT-1085)
• In-page Navigation
  • Heading level exclusion: Simplified the markup by removing unnecessary heading levels, ensuring the navigation component adheres to semantic HTML and is easier for assistive technologies to parse. (QHWT-1082)
• Horizontal Rule
  • Contrast requirements: Updated horizontal rules as decorative element to the screen readers. (QHWT-1076)
• Breadcrumbs
  • Ordered list markup: Reformatted breadcrumbs as an ordered list ol to accurately represent their sequential nature and improve navigation for screen reader users. (QHWT-1085)
• Tabs
  • ARIA design pattern: Fully implemented the ARIA design pattern for tabs, including roles (tablist, tab, tabpanel) and properties (aria-selected, aria-controls), to enhance keyboard navigation and screen reader support. (QHWT-1085)
• Core Repository
  • Leaflet.js removal: Removed Leaflet.js from the core repository to streamline the codebase and reduce unused dependencies. (QHWT-1085)
• File Upload
  • XSS vulnerability: Addressed a potential Stored Cross-Site Scripting (XSS) vulnerability by sanitising input and improving server-side validation for uploaded files. (QHWT-1085)

Internal reference - QHWT-1134

Design System v1.8.5

Released on 11 Sept 2024

• Added new sprite sheets to support material icons #162