Upgrading to 1.3.0
1.3.0 is a feature release focused on accessibility.
When updating the Hyvä Theme to version 1.3.0, please note to always update the
hyva-themes/magento2-theme-module to the latest version as well.
Even if not updating the Default Theme to 1.3.0, it should always be safe to update
Hyva_Theme module to the latest version (package
With this release we also are publishing an introduction to customizing templates keeping accessibility in mind.
We recommend you familiarize yourself with this topic before upgrading.
To prepare further, we suggest starting by studying the principles and tools introduced by the three-part Hyvä Blog post series on accessibility.
The posts were written by subject-matter expert Anna Karoń from our agency partner Snowdog.
We recommend you familiarize yourself with tooling that can make upgrades a lot quicker.
In particular the following can be very helpful:
Making existing custom Hyvä themes accessible
This release contains changes that are likely not simple to apply to existing Hyvä themes.
Due to accessibility requirements, the DOM structure in many of the Hyvä templates has changed.
Transferring these changes to existing customized Hyvä templates automatically is not possible.
Instead, we recommend testing your existing theme with the tools introduced in the accessibility Blog post number two and applying the suggested improvements one by one.
This process should be repeated after every customization to ensure your shop remains accessible.
New tailwind.config.js entry
After the upgrade, the
web/tailwind/tailwind.config.js file needs to have a
a11y key in
tailwind.config.js file in the
hyva-themes/magento2-default-theme/web/tailwind/ can be used as a reference:
This value is used as the minimum height for textarea inputs.
Be sure to add this value to the
tailwind.config.js file in your theme after the upgrade before regenerating the styles.
Backward incompatible changes
DOM selector changes
Due to accessibility requirements, the DOM structure in many of the templates has changed.
This is likely to impact end-to-end tests using selectors that now no longer match, like for example the Elgentos Cypress Magento2 testing suite.
If you are using front-end tests, they likely will need to be adjusted to match the new templates.
Also, this might impact third party modules using DOM selectors. Please test frontend customizations after the upgrade.
New localization phrases
This release adds many new translation phrases used for accessibility labels.
Many of these phrases are hidden when visiting the store with a regular browser but are used for assistive technologies like screen readers and voice control.
When adding them to an existing theme, be sure to translate them, too. All Hyvä language packs will be updated for 1.3.0 will be soon after this release.
Sku was changed to match the Magento core
SKU, so it is no longer included in the Hyvä
Some of these new phrases might sound unusually, but the wording makes sense when keeping in mind they are used for interacting with the website using voice input.
Edit Address - billing default
In English this would commonly be written as
Edit default billing address
However, when controlling the browser using voice, the first form is more usable. This usage scenario should be kept in mind while adding new translations to existing localizations.
Compared to the 1.2.6 version of the file
i18n/en_US.csv, the following phrases were added:
%0 of %1 products in cart displayed %1 filter options "%1 filter, %2 available products" "%1 filter, 1 available product" %1 options %1 rating. %2 out of %3 stars %1 rating. %2 out of %3 stars. Click to go to reviews. %1 stars 1 star Add %1 to Cart Add to Cart %1 Add to cart selected products from list Back to main categories Carousel Carousel %1 Cart is empty Click to view image in fullscreen Close fullscreen Close menu Close message Close minicart Confirm password hidden Display slide %1 Edit %1 Edit Address - billing default Edit Address - shipping default Edit contact information Edit newsletters "Edit product ""%0""" Filter %1 %2 Final product price Gallery modal fullscreen Go to Home page Go to Wish List page Hyva twitter profile Item %1 Main image Main menu Navigating through the elements of the carousel is possible using the tab key. You can skip the carousel or go straight to carousel navigation using the skip links. Next slide Open %1 subcategories Open menu Password hidden Password shown Press to go to carousel navigation Press to skip carousel Previous slide "Product ""%0""" "Product ""%1"" is not salable" Product filters Product list Products view mode Products view mode - %1 Remove active %1 filter: %2 Remove item %1 "Remove product ""%0"" from cart" "Remove product ""%1"" from My Wish List" "Remove product ""%1"" from the comparison" "Select product ""%1"" to reorder" Show items per page Show submenu for %1 category Site navigation Site navigation links Skip to product list Store logo Subcategories Toggle minicart Toggle search form "Unable to find the SVG icon ""%1" View all orders View all recent orders View cart View order confirm password shown filter form appears when field is selected opens in new window
Changelogs are available from the CHANGELOG.md in the codebase, or here: