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 rating. %2 out of %3 stars
%1 rating. %2 out of %3 stars. Click to go to reviews.
Add %1 to Cart
Add to Cart %1
Add to cart selected products from list
Back to main categories
Cart is empty
Click to view image in fullscreen
Confirm password hidden
Display slide %1
Edit Address - billing default
Edit Address - shipping default
Edit contact information
"Edit product ""%0"""
Filter %1 %2
Final product price
Gallery modal fullscreen
Go to Home page
Go to Wish List page
Hyva twitter profile
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.
Open %1 subcategories
Press to go to carousel navigation
Press to skip carousel
"Product ""%1"" is not salable"
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 links
Skip to product list
Toggle search form
"Unable to find the SVG icon ""%1"
View all orders
View all recent orders
confirm password shown
form appears when field is selected
opens in new window
Changelogs are available from the CHANGELOG.md in the codebase, or here: