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 hyva-themes/magento2-theme-module).

Before upgrading

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.

Tooling

We recommend you familiarize yourself with tooling that can make upgrades a lot quicker.
In particular the following can be very helpful:

• Elgentos Magento2 Upgrade GUI.
• Ampersand Magento2 Upgrade Patch Helper

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 theme.extend.minHeight. The tailwind.config.js file in the hyva-themes/magento2-default-theme/web/tailwind/ can be used as a reference:

      minHeight: {
        14: spacing["14"],
        'a11y': '44px',
        'screen-25': '25vh',
        'screen-50': '50vh',
        'screen-75': '75vh'
      },

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.

Changed phrase

The phrase Sku was changed to match the Magento core SKU, so it is no longer included in the Hyvä i18n/en_US.csv file.

Added phrases

Unusual wording

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.

For example,

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

Changelogs are available from the CHANGELOG.md in the codebase, or here:

• Changelog Default Theme
• Changelog Theme Module

Known Issues

Please check the GitLab issue tracker for the default-theme and the theme-module for known issues.