Pattern guide, accessibility updates and more in Compass 1.4.0
The July 2021 release of Compass – The University Web Framework introduces two new features: a patterns guide and the area component.
Compass 1.4.0 also includes updates to existing content types, with a strong focus on providing better accessibility to users who rely on assistive technology. With this release, Compass now meets most WCAG 2.1 AA accessibility requirements.
New features
Patterns
Patterns are new examples/guidelines on how to use multiple resets, utilities and components in tandem for a more specialized use case and to assist website developers and moderators in creating consistent, usable pages.
A pattern guide will be available at the production example site’s patterns page until proper documentation can be provided.
Area
Areas define where other components or content can be used outside of the main column or sidebar.
Areas are automatically included in the page layout to ensure header, feature or footer content is wrapped in an ARIA landmark to provide context to assistive technology users for better accessibility.
Component updates
Accordion
- Panel headings now tell assistive technologies that they’re an interactive button.
Card
- Cards with images will now have a .cwf-card–image class added to them automatically to make identifying/targeting them easier.
- Non-themed (or default) cards can be made borderless by adding a .cwf-card–borderless class to them.
- A prominent label can be added to a card to better highlight important information by adding a data-label=”$” attribute to it, where $ is the label message.
- Blockquotes used with a card’s body will now use the new simplified blockquote styles.
- Blockquotes used within accent cards will now have their accent color set to VCU gold to ensure legibility.
Footer
- The VCU link’s accessible label changed, so as not to confuse assistive technology users.
Form
- Checkbox groups now tell assistive technologies their purpose.
Grid
- You can now span items across multiple columns or set which column an item starts at, allowing for more creative ways to display your content.
Header
- The search submit button now has alternative text for better accessibility.
Hero
- Floating captions can now be aligned vertically to the top of a hero’s content, allowing for six distinct locations for captions to be presented.
- Caption backgrounds can now be blurred for better legibility.
Modal
- Focusable elements with hidden modal dialog boxes are now inaccessible to assistive technologies.
Navigation
- The dropdown toggle buttons now have alternative text for better accessibility.
Notification
- Notifications will now have bottom margins to better align it with other components, ensure consistent styling, and for usage outside of a Compass website.
Tabs
- Focusable elements within hidden panels are now inaccessible to assistive technologies.
Developer updates
Changes
- The recommended LTS version of Node.js has been bumped to v14.16.1.
- The recommended version of NPM has been bumped to v6.14.12.
- All dependencies have been updated to their latest versions.
- The hero component Twig has been fixed to allow for the alignment of captions.
- Shared SCSS modules are now utilized via @use instead of @import, allowing for namespaced and simpler variable, function, and mixin names.
- Most globally available SASS functions have been replaced with new SASS built-in modules.
- There are now new categories for code, including utilities (which are styles/functionality not tied to a specific component) and resets (which was previously its own component but is now a collection of modules).
- Dropped official Opera Mini support as it was previously being unsupported and there is no way to target the browser.
- The global lighten(…)/darken(…) color functions have been replaced with style.lighten(…)/style.darken(…), which uses color.scale(…) under the hood for more finite/accurate color brightness adjustments.
- The example site has been reorganized to make navigation of assets or auxiliary websites easier and more consistent.
- The general content component has been removed and instead has been modularized into different resets and utilities and is exemplified in a pattern.2
New
- Compass now meets most WCAG 2.1 AA accessibility requirements.
- Patterns are a new category for use case guidelines and specific examples of utilizing multiple resets, utilities, and components in tandem.
Release schedule
July 8
- Compass v1.4.0 NPM package publish
July 12
July 13
July 14
July 15
July 16
July 19– 23
- Component documentation site update
- Production example site update
Have questions about this release?
If you have questions about the Compass 1.4.0 release, or suggestions for a future release, message our team on the VCU digital community Slack channel or send us an email at compass@vcu.edu.
Categories Releases