v0.14.0

[0.14.0] - October 15, 2020

Core

Changed

• [Icons] Added role="img" to all icons. in (#268)
• [Notification] Changed wrapping HTML element from div to section. in (#273)
• [Notification] Added role="alert" for toast notifications. Removed role attribute from inline notifications. in (#273)
• [Notification] Added role="heading" and aria-level="2" to the notification label. in (#273)

Removed

• [Checkbox] Removed redundant aria-checked (already using type="checkbox"). in (#271)
• [Radio button] Removed redundant aria-checked (already using type="radio"). in (#271)

Design kit

Added

• New component: Footer
• New component: Tag (documentation coming soon)
• New component: Card (implementation coming soon)
  • Example card layouts (Card on top of a photo, Image card)
• New component: Placeholders
  • Image placeholder (e.g. for a blog post which is missing the thumbnail image)
  • Avatar placeholder (e.g. for a user that is missing an avatar)
• New version of Multiselect Dropdown component. The multiselect component was divided into two separate components; Select and Combobox. Select will act like the old implementation, but it does not offer filtering. Combobox will work similarly, but it will include filtering. This change was made for accessibility reasons. Separating the implementation was needed to make keyboard and screen reader use working well and according to standards.

Changed

• HDS Library symbol naming and structure standardized to follow new HDS Sketch guidelines. This includes naming changes to most symbols but below you can find a list of the most important changes.
  • Internal (only used in HDS libraries) symbols are now grouped in x_Parts symbol folder
  • Internal (only used in HDS libraries) section symbols are now grouped in x_Sections symbol folder
  • Renamed and rearranged multiple symbol showcase artboards
  • [Buttons] Changed local text style in Button 02 Secondary hover states to use shared style
  • [Navigation] Changed symbol folder hierarchy for easier symbol swapping
  • [Modals and Notifications] Changed layer order in symbols to match layout
  • [Modals and Notifications] Fixed sub-pixel positioning in Default Alert Toast
  • [Typography] Added text styles used in HDS Footer: Body S - Medium - 05 Link - Black and Body S - Medium - 05 Link - White
• Renamed "HDS Text and Photo" library to "HDS Cards"
• [Cards] Moved current "Text+Photo" symbols to new "Example card layouts" page
• [Cards] Converted current "Text+Photo" symbols to use new Card symbols
• [Cards] Renamed "Text+Photo" symbols to "Card on top of a photo"
• [Form Components] Replaced old checkbox symbols in Multiselect with current symbols
• [Form Components] Old Multiselect Dropdown symbols were moved to xx_Deprecated category. These will be removed in future updates, but you may continue to use them if you do not have time to upgrade to the new design.
• [Form Components] Updated Dropdown option hover style to use brand colours. Same style is also used when browsing the options with keyboard.
• [Form Components] Symbolized error text (was previously a styled Assistive text)
• [Form Components] Moved the error icon from inside the input to the front of the error text.
• [Form Components] Added assistive text below the error description in all related component error states. This change was made to increase accessibility in situations where assistive text is essential information to fix input errors.
• [Form Components] Updated Dropdown symbol showcase artboards to reflect new changes and features.
• [Navigation] Added 2 Rows variant to 02 Dark
• [Navigation] Added Mobile sizes open variant to 02 Dark
• [Navigation] Renamed some layers to better match their usage

Removed

• [Form Components] Unnecessary overrides from Dropdown option symbols
• [Navigation] Redundant folders from Navigation symbols

Documentation

Added

• Footer documentation
• [Icons] Added a recommendation to use aria-hidden="true" instead of role="presentation
• [Logo] Added guidelines for adding aria-labels for logos and service names

Changed

• Made improvements to focus colour guideline in Colour token page
• Made documentation page titles dynamic (now titles also feature page names)
• [Dropdown] Updated Dropdown documentation to reflect implementation changes
• [Dropdown] Made improvements and clarifications to the Dropdown accessibility documentation

Removed

• Broken mailto-link from the Support page

React

Added

• Footer component. in (#253)

Changed

• [Dropdown] The Dropdown component has gone through a complete overhaul, and the component was divided into two components; Select and Combobox. in (#258)
• [Icons] Added role="img" to all icons. in (#268)
• [Koros] Added aria-hidden="true" to the wave SVG. in (#269)
• [Logo] Added role="img" to logo SVG. in (#272)
• [Navigation] Added role="search to Navigation search wrapping div. in (#270)
• [Notification] Changed wrapping HTML element from div to section. in (#273)
• [Notification] Added role="alert" for toast notifications. Removed role attribute from inline notifications. in (#273)
• [Notification] Added role="heading" and aria-level="2" to the notification label. in (#273)

Fixed

• [Navigation] Fixed an issue where search appeared below navigation links in the mobile menu. in (#270)

Removed

• [Checkbox] Removed redundant aria-checked (already using type="checkbox"). in (#271)
• [Radio button] Removed redundant aria-checked (already using type="radio"). in (#271)

Deprecated

• [Dropdown] The Dropdown component has been deprecated and will be removed in a future release, please use Select or Combobox instead. in (#258)