MWPW-163845: Merch-card a11y fix for CTAs

libs/blocks/merch/merch.js

@@ -478,9 +478,7 @@ async function openExternalModal(url, getModal, extraOptions) {
 
 const isInternalModal = (url) => /\/fragments\//.test(url);
 
-export async function openModal(e, url, offerType, hash, extraOptions) {
-  e.preventDefault();
-  e.stopImmediatePropagation();
+export async function openModal(url, offerType, hash, extraOptions) {
   const { getModal } = await import('../modal/modal.js');
   await import('../modal/modal.merch.js');
   const offerTypeClass = offerType === OFFER_TYPE_TRIAL ? 'twp' : 'crm';
@@ -539,7 +537,7 @@ export async function getModalAction(offers, options, el) {
   if (!url) return undefined;
   url = isInternalModal(url) || isProdModal(url)
     ? localizeLink(checkoutLinkConfig[columnName]) : checkoutLinkConfig[columnName];
-  return { url, handler: (e) => openModal(e, url, offerType, hash, options.extraOptions) };
+  return { url, handler: () => openModal(url, offerType, hash, options.extraOptions) };
 }
 
 export async function getCheckoutAction(offers, options, imsSignedInPromise, el) {

libs/deps/mas/merch-sidenav.js

@@ -1,4 +1,4 @@
-var M=Object.defineProperty;var g=o=>{throw TypeError(o)};var V=(o,e,t)=>e in o?M(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var i=(o,e,t)=>V(o,typeof e!="symbol"?e+"":e,t),v=(o,e,t)=>e.has(o)||g("Cannot "+t);var S=(o,e,t)=>(v(o,e,"read from private field"),t?t.call(o):e.get(o)),b=(o,e,t)=>e.has(o)?g("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(o):e.set(o,t),C=(o,e,t,s)=>(v(o,e,"write to private field"),s?s.call(o,t):e.set(o,t),t);import{html as I,css as K,LitElement as W}from"/libs/deps/lit-all.min.js";var c=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};import{css as P}from"/libs/deps/lit-all.min.js";var u=P`
+var M=Object.defineProperty;var v=o=>{throw TypeError(o)};var V=(o,e,t)=>e in o?M(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var i=(o,e,t)=>V(o,typeof e!="symbol"?e+"":e,t),g=(o,e,t)=>e.has(o)||v("Cannot "+t);var S=(o,e,t)=>(g(o,e,"read from private field"),t?t.call(o):e.get(o)),b=(o,e,t)=>e.has(o)?v("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(o):e.set(o,t),C=(o,e,t,s)=>(g(o,e,"write to private field"),s?s.call(o,t):e.set(o,t),t);import{html as I,css as K,LitElement as W}from"/libs/deps/lit-all.min.js";var c=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};import{css as P}from"/libs/deps/lit-all.min.js";var u=P`
     h2 {
         font-size: 11px;
         font-style: normal;

libs/features/mas/docs/ccd.html

@@ -55,10 +55,10 @@
   <main>
       <div class="gallery-content">
 
-        <h1 id="ccd-gallery" tabindex="-1">CCD Gallery <a class="header-anchor" href="#ccd-gallery" href="#ccd-gallery" title="Permalink to this heading">#</a></h1>
+        <h1 id="ccd-gallery">CCD Gallery <a class="header-anchor" href="#ccd-gallery" href="#ccd-gallery" title="Permalink to this heading">#</a></h1>
         Switch Theme: <a class="spectrum-Link pectrum-Link--secondary" href="javascript:toggleTheme('darkest');">Darkest</a> OR <a class="spectrum-Link pectrum-Link--secondary" href="javascript:toggleTheme('light');">Light</a>
 
-        <h2 id="ccd-slice-card" tabindex="-1">CCD Slice Cards <a class="header-anchor" href="#ccd-slice-card" title="Permalink to this heading">#</a></h2>
+        <h2 id="ccd-slice-card">CCD Slice Cards <a class="header-anchor" href="#ccd-slice-card" title="Permalink to this heading">#</a></h2>
         <div class="three-merch-cards ccd-slice">
             <merch-card><aem-fragment fragment="0ef2a804-e788-4959-abb8-b4d96a18b0ef"></aem-fragment></merch-card>
             <merch-card><aem-fragment fragment="c13897c7-de77-4e45-b23b-eec9fd66cad1"></aem-fragment></merch-card>  
@@ -73,7 +73,7 @@ <h2 id="ccd-slice-card" tabindex="-1">CCD Slice Cards <a class="header-anchor" h
           <merch-card><aem-fragment fragment="6b3c6c4e-e19f-4d08-914f-fcfd9f77ca14"></aem-fragment></merch-card>
         </div>
 
-        <h2 id="ccd-suggested-card" tabindex="-1">CCD Suggested Cards <a class="header-anchor" href="#ccd-suggested-card" title="Permalink to this heading">#</a></h2>
+        <h2 id="ccd-suggested-card">CCD Suggested Cards <a class="header-anchor" href="#ccd-suggested-card" title="Permalink to this heading">#</a></h2>
         <div class="three-merch-cards ccd-suggested">
             <merch-card><aem-fragment fragment="0a2ac7c9-1965-488e-beca-856849305313"></aem-fragment></merch-card>
             <merch-card><aem-fragment fragment="549f6981-f5c8-4512-b41c-313d60f375b2"></aem-fragment></merch-card>
@@ -85,7 +85,7 @@ <h2 id="ccd-suggested-card" tabindex="-1">CCD Suggested Cards <a class="header-a
             <merch-card><aem-fragment fragment="d23182d8-fc92-483d-bcfe-d1fe3d3ce737"></aem-fragment></merch-card>
       </div>
 
-        <h2 id="various-cards" tabindex="-1">Free to update cards <a class="header-anchor" href="#various-cards" title="Permalink to this heading">#</a></h2>
+        <h2 id="various-cards">Free to update cards <a class="header-anchor" href="#various-cards" title="Permalink to this heading">#</a></h2>
         <div class="flex-cards">
           <merch-card><aem-fragment fragment="42e9a6bf-3b94-4b13-a2ba-184591308096"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="9744936c-94e4-4e78-806b-58dd63d02fd7"></aem-fragment></merch-card>