Merge branch 'release/2.20.0'

CHANGELOG.md

@@ -7,7 +7,16 @@ All notable changes to this project will be documented in this file.
 ### Updated
 ### Removed
 
+
 ## [Released]
+
+## [2.20.0] - 2021-05-24
+### Fixed
+- duplicated ids for msrp price popup (#78814)
+### Added
+- margin top to quote button in cart (#78684)
+### Updated
+- tabs component accessibility
 ## [2.19.3] - 2021-05-18
 ### Fixed
 - fix product display with long names in minicart (#78748)

Magento_GiftRegistry/templates/cart/link.phtml

@@ -43,6 +43,7 @@ $entityValues = $block->getEntityValues()
                     add
                     button
                     button--fluid
+                    margin-bottom-m
                 "
             >
                 <?= $block->escapeHtml(__('Add All To Gift Registry')) ?>

Magento_Msrp/templates/product/price/msrp.phtml

@@ -76,7 +76,7 @@ $priceElementIdPrefix = $block->getPriceElementIdPrefix() ? $block->getPriceElem
         $popupId = 'msrp-popup-' . $productId . $block->getRandomString(20);
         $data = [
             'origin' => 'msrp',
-            'popupId' => '#' . $popupId,
+            'popupId' => $popupId,
             'productName' => $block->escapeJs($block->escapeHtml($product->getName())),
             'productId' => $productId,
             'productIdInput' => 'input[type="hidden"][name="product"]',

Magento_Msrp/web/js/msrp-mixin.js

@@ -13,10 +13,14 @@ define(['jquery'], function ($) {
 
     initMsrpPopup: function () {
       var popupDOM = $(this.options.popUpAttr)[0],
+        popupButton = $('#' + this.options.popupId),
         $msrpPopup = $(popupDOM.innerHTML.trim()),
+        popupButtonId = this.options.popupId + Math.random().toString(16).slice(2),
         self = this;
 
-      $msrpPopup.find(this.options.productIdInput).val(this.options.productId);
+      popupButton.attr('id', popupButtonId)
+
+      $msrpPopup.find(this.options.productIdInput).val(popupButtonId);
       $('body').append($msrpPopup);
       $msrpPopup.trigger('contentUpdated');
 
@@ -30,7 +34,7 @@ define(['jquery'], function ($) {
         .find(this.options.paypalCheckoutButons)
         .on('click', this.handleMsrpPaypalCheckout.bind(this));
 
-      $(this.options.popupId).on('click', this.openPopup.bind(this));
+      $('#' + popupButtonId).on('click', this.openPopup.bind(this));
 
       this.$popup = $msrpPopup;
 

Snowdog_Components/components/Molecules/tab/README.md

@@ -2,7 +2,9 @@
 
 ## Accessibility in tabs
 Our components is accordion on mobile and tabs on wider screens, so we have to implement a11y feature to be used in both cases:
-* use `role="widget"` on tab element
+* use `role="tablist"` on the element that serves as the container for the set of tabs
+* use `role="tab"` on tab element
+* use `role="tabpanel"` on tab content
 * use `buttons` elements as a labels/headings of tabs
 * Buttons should have following aria attributes:
     * `aria-expanded` - set to `true` if tab is open, to `false` when it's closed
@@ -12,7 +14,7 @@ Our components is accordion on mobile and tabs on wider screens, so we have to i
 * Tab content element should:
     * have an id to be bound to tab title
     * have `aria-hidden` attribute set to `true` if tab is closed and to `false` if it's open
-    * aria-labelledby with value of tab title id
+    * `aria-labelledby` with value of tab title id
 * Keyboard support:
     * accordions - on mobile, down & up arrow keys should move cursor between tab's titles, from first tab title up arrow should move a user to the last tab title, from last tab title down arrow should move user to first tab title.
     * tabs = on desktop - right & left arrow keys should move cursor between tab's titles, from first tab title left arrow should move a user to the last tab title, from last tab title right arrow should move user to first tab title.

Snowdog_Components/components/Molecules/tab/_tab.scss

@@ -75,7 +75,6 @@
         }
     }
 
-
     &__icon {
         display: $tab__icon-display;
         position: $tab__icon-position;

Snowdog_Components/components/Molecules/tab/tab.config.js

@@ -4,7 +4,7 @@ module.exports = {
     icon: {
       class: 'tab__icon',
       id: 'angle-down',
-      iconTitle: 'Angle Down'
+      hidden: true
     },
     tabs: [
       {