[MWPW-157451] [Accessibility] Merch cards | Focus is lost on comparin…

…g plans section (#3103)

* remive tabindex=0 as the attributes from merchcard div

* fresh commit with same changes as commit 1 after resolving the merge conflict

* Redesign mini-compare chart. Added checkmarks for icons. Backward compatibility using "checkmark" class. Horizontal line added.

* Revert "Redesign mini-compare chart. Added checkmarks for icons. Backward compatibility using "checkmark" class. Horizontal line added."

This reverts commit 610807a.

* run build in mas

* run build

---------

Co-authored-by: Rohit Sahu <rosahu@adobe.com>

libs/blocks/tabs/tabs.js

@@ -254,7 +254,6 @@ const init = (block) => {
         id: `tab-panel-${tabId}-${tabName}`,
         role: 'tabpanel',
         class: 'tabpanel',
-        tabindex: '0',
         'aria-labelledby': `tab-${tabId}-${tabName}`,
         'data-block-id': `tabs-${tabId}`,
       };

libs/deps/mas/merch-card.js

@@ -1964,4 +1964,4 @@ body.merch-modal {
     scrollbar-gutter: stable;
     height: 100vh;
 }
-`;document.head.appendChild(St);var jt="#000000",Kt="#F8D904",Wt=/(accent|primary|secondary)(-(outline|link))?/;function Yt(r){return r.fields.reduce((t,{name:e,multiple:o,values:a})=>(t[e]=o?a:a[0],t),{id:r.id})}function Qt(r,t){let e=r.mnemonicIcon?.map((o,a)=>({icon:o,alt:r.mnemonicAlt[a]??"",link:r.mnemonicLink[a]??""}));return e?.forEach(({icon:o,alt:a,link:s})=>{if(!/^https?:/.test(s))try{s=new URL(`https://${s}`).href.toString()}catch{s="#"}let g=u("merch-icon",{slot:"icons",src:o,alt:a,href:s,size:"l"});t.append(g)}),e}function Zt(r,t){r.badge&&(t.setAttribute("badge-text",r.badge),t.setAttribute("badge-color",r.badgeColor||jt),t.setAttribute("badge-background-color",r.badgeBackgroundColor||Kt))}function Jt(r,t,e){e?.includes(r.size)&&t.setAttribute("size",r.size)}function Xt(r,t,e){r.cardTitle&&e&&t.append(u(e.tag,{slot:e.slot},r.cardTitle))}function te(r,t,e){r.subtitle&&e&&t.append(u(e.tag,{slot:e.slot},r.subtitle))}function ee(r,t,e,o){if(r.backgroundImage)switch(o){case"ccd-slice":e&&t.append(u(e.tag,{slot:e.slot},`<img loading="lazy" src="${r.backgroundImage}" />`));break;case"ccd-suggested":t.setAttribute("background-image",r.backgroundImage);break}}function re(r,t,e){if(r.prices&&e){let o=u(e.tag,{slot:e.slot},r.prices);t.append(o)}}function oe(r,t,e){if(r.description&&e){let o=u(e.tag,{slot:e.slot},r.description);t.append(o)}}function ae(r,t,e,o){o==="ccd-suggested"&&!r.className&&(r.className="primary-link");let a=Wt.exec(r.className)?.[0]??"accent",s=a.includes("accent"),g=a.includes("primary"),x=a.includes("secondary"),T=a.includes("-outline");if(a.includes("-link"))return r;let W="fill",_;s||t?_="accent":g?_="primary":x&&(_="secondary"),T&&(W="outline");let Y=u("sp-button",{treatment:W,variant:_,tabIndex:-1,size:e.ctas.size??"m"},r);return Y.addEventListener("click",Q=>{Q.target!==r&&(Q.stopPropagation(),r.click())}),Y}function ne(r,t){return r.classList.add("con-button"),t&&r.classList.add("blue"),r}function ce(r,t,e,o){if(r.ctas){let{slot:a}=e.ctas,s=u("div",{slot:a},r.ctas),g=[...s.querySelectorAll("a")].map(x=>{let T=x.parentElement.tagName==="STRONG";return t.consonant?ne(x,T):ae(x,T,e,o)});s.innerHTML="",s.append(...g),t.append(s)}}async function kt(r,t){let e=Yt(r),{variant:o}=e;if(!o)return;t.querySelectorAll("[slot]").forEach(g=>{g.remove()}),t.removeAttribute("background-image"),t.removeAttribute("badge-background-color"),t.removeAttribute("badge-color"),t.removeAttribute("badge-text"),t.removeAttribute("size"),t.variant=o,await t.updateComplete;let{aemFragmentMapping:a}=t.variantLayout;if(!a)return;let s=Qt(e,t);r.computed={mnemonics:s},Zt(e,t),Jt(e,t,a.allowedSizes),Xt(e,t,a.title),te(e,t,a.subtitle),ee(e,t,a.backgroundImage,o),re(e,t,a.prices),oe(e,t,a.description),ce(e,t,a,o)}var i="merch-card",se=2e3,c=class extends ie{static properties={name:{type:String,attribute:"name",reflect:!0},variant:{type:String,reflect:!0},size:{type:String,attribute:"size",reflect:!0},badgeColor:{type:String,attribute:"badge-color",reflect:!0},borderColor:{type:String,attribute:"border-color",reflect:!0},badgeBackgroundColor:{type:String,attribute:"badge-background-color",reflect:!0},backgroundImage:{type:String,attribute:"background-image",reflect:!0},badgeText:{type:String,attribute:"badge-text"},actionMenu:{type:Boolean,attribute:"action-menu"},customHr:{type:Boolean,attribute:"custom-hr"},consonant:{type:Boolean,attribute:"consonant"},detailBg:{type:String,attribute:"detail-bg"},secureLabel:{type:String,attribute:"secure-label"},checkboxLabel:{type:String,attribute:"checkbox-label"},selected:{type:Boolean,attribute:"aria-selected",reflect:!0},storageOption:{type:String,attribute:"storage",reflect:!0},stockOfferOsis:{type:Object,attribute:"stock-offer-osis",converter:{fromAttribute:t=>{let[e,o,a]=t.split(",");return{PUF:e,ABM:o,M2M:a}}}},filters:{type:String,reflect:!0,converter:{fromAttribute:t=>Object.fromEntries(t.split(",").map(e=>{let[o,a,s]=e.split(":"),g=Number(a);return[o,{order:isNaN(g)?void 0:g,size:s}]})),toAttribute:t=>Object.entries(t).map(([e,{order:o,size:a}])=>[e,o,a].filter(s=>s!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0},merchOffer:{type:Object}};static styles=[tt,Et(),...et()];customerSegment;marketSegment;variantLayout;#t=!1;constructor(){super(),this.filters={},this.types="",this.selected=!1,this.handleAemFragmentEvents=this.handleAemFragmentEvents.bind(this)}firstUpdated(){this.variantLayout=K(this,!1),this.variantLayout?.connectedCallbackHook(),this.aemFragment?.updateComplete.catch(()=>{this.style.display="none"})}willUpdate(t){(t.has("variant")||!this.variantLayout)&&(this.variantLayout=K(this),this.variantLayout.connectedCallbackHook())}updated(t){(t.has("badgeBackgroundColor")||t.has("borderColor"))&&(this.style.border=this.computedBorderStyle),this.variantLayout?.postCardUpdateHook(this)}get theme(){return this.closest("sp-theme")}get prices(){return Array.from(this.querySelectorAll('span[is="inline-price"][data-wcs-osi]'))}render(){if(!(!this.isConnected||!this.variantLayout||this.style.display==="none"))return this.variantLayout.renderLayout()}get computedBorderStyle(){return["twp","ccd-slice","ccd-suggested"].includes(this.variant)?"":`1px solid ${this.borderColor?this.borderColor:this.badgeBackgroundColor}`}get badgeElement(){return this.shadowRoot.getElementById("badge")}get headingmMSlot(){return this.shadowRoot.querySelector('slot[name="heading-m"]').assignedElements()[0]}get footerSlot(){return this.shadowRoot.querySelector('slot[name="footer"]')?.assignedElements()[0]}get price(){return this.headingmMSlot?.querySelector('span[is="inline-price"]')}get checkoutLinks(){return[...this.footerSlot?.querySelectorAll('a[is="checkout-link"]')??[]]}async toggleStockOffer({target:t}){if(!this.stockOfferOsis)return;let e=this.checkoutLinks;if(e.length!==0)for(let o of e){await o.onceSettled();let a=o.value?.[0]?.planType;if(!a)return;let s=this.stockOfferOsis[a];if(!s)return;let g=o.dataset.wcsOsi.split(",").filter(x=>x!==s);t.checked&&g.push(s),o.dataset.wcsOsi=g.join(",")}}handleQuantitySelection(t){let e=this.checkoutLinks;for(let o of e)o.dataset.quantity=t.detail.option}get titleElement(){return this.querySelector(this.variantLayout?.headingSelector||".card-heading")}get title(){return this.titleElement?.textContent?.trim()}get description(){return this.querySelector('[slot="body-xs"]')?.textContent?.trim()}updateFilters(t){let e={...this.filters};Object.keys(e).forEach(o=>{if(t){e[o].order=Math.min(e[o].order||2,2);return}let a=e[o].order;a===1||isNaN(a)||(e[o].order=Number(a)+1)}),this.filters=e}includes(t){return this.textContent.match(new RegExp(t,"i"))!==null}connectedCallback(){super.connectedCallback(),this.setAttribute("tabindex",this.getAttribute("tabindex")??"0"),this.addEventListener(G,this.handleQuantitySelection),this.addEventListener(ot,this.merchCardReady,{once:!0}),this.updateComplete.then(()=>{this.merchCardReady()}),this.storageOptions?.addEventListener("change",this.handleStorageChange),this.addEventListener(N,this.handleAemFragmentEvents),this.addEventListener(O,this.handleAemFragmentEvents),this.aemFragment||setTimeout(()=>this.checkReady(),0)}disconnectedCallback(){super.disconnectedCallback(),this.variantLayout.disconnectedCallbackHook(),this.removeEventListener(G,this.handleQuantitySelection),this.storageOptions?.removeEventListener(F,this.handleStorageChange),this.removeEventListener(N,this.handleAemFragmentEvents),this.removeEventListener(O,this.handleAemFragmentEvents)}async handleAemFragmentEvents(t){if(t.type===N&&this.#e("AEM fragment cannot be loaded"),t.type===O&&t.target.nodeName==="AEM-FRAGMENT"){let e=t.detail;await kt(e,this),this.checkReady()}}#e(t){this.dispatchEvent(new CustomEvent(it,{detail:t,bubbles:!0,composed:!0}))}async checkReady(){let t=Promise.all([...this.querySelectorAll('span[is="inline-price"][data-wcs-osi],a[is="checkout-link"][data-wcs-osi]')].map(a=>a.onceSettled().catch(()=>a))).then(a=>a.every(s=>s.classList.contains("placeholder-resolved"))),e=new Promise(a=>setTimeout(()=>a(!1),se));if(await Promise.race([t,e])===!0){this.dispatchEvent(new CustomEvent(ct,{bubbles:!0,composed:!0}));return}this.#e("Contains unresolved offers")}get aemFragment(){return this.querySelector("aem-fragment")}get storageOptions(){return this.querySelector("sp-radio-group#storage")}get storageSpecificOfferSelect(){let t=this.storageOptions?.selected;if(t){let e=this.querySelector(`merch-offer-select[storage="${t}"]`);if(e)return e}return this.querySelector("merch-offer-select")}get offerSelect(){return this.storageOptions?this.storageSpecificOfferSelect:this.querySelector("merch-offer-select")}get quantitySelect(){return this.querySelector("merch-quantity-select")}merchCardReady(){this.offerSelect&&!this.offerSelect.planType||this.dispatchEvent(new CustomEvent(at,{bubbles:!0}))}handleStorageChange(){let t=this.closest("merch-card")?.offerSelect.cloneNode(!0);t&&this.dispatchEvent(new CustomEvent(F,{detail:{offerSelect:t},bubbles:!0}))}get dynamicPrice(){return this.querySelector('[slot="price"]')}selectMerchOffer(t){if(t===this.merchOffer)return;this.merchOffer=t;let e=this.dynamicPrice;if(t.price&&e){let o=t.price.cloneNode(!0);e.onceSettled?e.onceSettled().then(()=>{e.replaceWith(o)}):e.replaceWith(o)}}};customElements.define(i,c);
+`;document.head.appendChild(St);var jt="#000000",Kt="#F8D904",Wt=/(accent|primary|secondary)(-(outline|link))?/;function Yt(r){return r.fields.reduce((t,{name:e,multiple:o,values:a})=>(t[e]=o?a:a[0],t),{id:r.id})}function Qt(r,t){let e=r.mnemonicIcon?.map((o,a)=>({icon:o,alt:r.mnemonicAlt[a]??"",link:r.mnemonicLink[a]??""}));return e?.forEach(({icon:o,alt:a,link:s})=>{if(!/^https?:/.test(s))try{s=new URL(`https://${s}`).href.toString()}catch{s="#"}let g=u("merch-icon",{slot:"icons",src:o,alt:a,href:s,size:"l"});t.append(g)}),e}function Zt(r,t){r.badge&&(t.setAttribute("badge-text",r.badge),t.setAttribute("badge-color",r.badgeColor||jt),t.setAttribute("badge-background-color",r.badgeBackgroundColor||Kt))}function Jt(r,t,e){e?.includes(r.size)&&t.setAttribute("size",r.size)}function Xt(r,t,e){r.cardTitle&&e&&t.append(u(e.tag,{slot:e.slot},r.cardTitle))}function te(r,t,e){r.subtitle&&e&&t.append(u(e.tag,{slot:e.slot},r.subtitle))}function ee(r,t,e,o){if(r.backgroundImage)switch(o){case"ccd-slice":e&&t.append(u(e.tag,{slot:e.slot},`<img loading="lazy" src="${r.backgroundImage}" />`));break;case"ccd-suggested":t.setAttribute("background-image",r.backgroundImage);break}}function re(r,t,e){if(r.prices&&e){let o=u(e.tag,{slot:e.slot},r.prices);t.append(o)}}function oe(r,t,e){if(r.description&&e){let o=u(e.tag,{slot:e.slot},r.description);t.append(o)}}function ae(r,t,e,o){o==="ccd-suggested"&&!r.className&&(r.className="primary-link");let a=Wt.exec(r.className)?.[0]??"accent",s=a.includes("accent"),g=a.includes("primary"),x=a.includes("secondary"),T=a.includes("-outline");if(a.includes("-link"))return r;let W="fill",_;s||t?_="accent":g?_="primary":x&&(_="secondary"),T&&(W="outline");let Y=u("sp-button",{treatment:W,variant:_,tabIndex:-1,size:e.ctas.size??"m"},r);return Y.addEventListener("click",Q=>{Q.target!==r&&(Q.stopPropagation(),r.click())}),Y}function ne(r,t){return r.classList.add("con-button"),t&&r.classList.add("blue"),r}function ce(r,t,e,o){if(r.ctas){let{slot:a}=e.ctas,s=u("div",{slot:a},r.ctas),g=[...s.querySelectorAll("a")].map(x=>{let T=x.parentElement.tagName==="STRONG";return t.consonant?ne(x,T):ae(x,T,e,o)});s.innerHTML="",s.append(...g),t.append(s)}}async function kt(r,t){let e=Yt(r),{variant:o}=e;if(!o)return;t.querySelectorAll("[slot]").forEach(g=>{g.remove()}),t.removeAttribute("background-image"),t.removeAttribute("badge-background-color"),t.removeAttribute("badge-color"),t.removeAttribute("badge-text"),t.removeAttribute("size"),t.variant=o,await t.updateComplete;let{aemFragmentMapping:a}=t.variantLayout;if(!a)return;let s=Qt(e,t);r.computed={mnemonics:s},Zt(e,t),Jt(e,t,a.allowedSizes),Xt(e,t,a.title),te(e,t,a.subtitle),ee(e,t,a.backgroundImage,o),re(e,t,a.prices),oe(e,t,a.description),ce(e,t,a,o)}var i="merch-card",se=2e3,c=class extends ie{static properties={name:{type:String,attribute:"name",reflect:!0},variant:{type:String,reflect:!0},size:{type:String,attribute:"size",reflect:!0},badgeColor:{type:String,attribute:"badge-color",reflect:!0},borderColor:{type:String,attribute:"border-color",reflect:!0},badgeBackgroundColor:{type:String,attribute:"badge-background-color",reflect:!0},backgroundImage:{type:String,attribute:"background-image",reflect:!0},badgeText:{type:String,attribute:"badge-text"},actionMenu:{type:Boolean,attribute:"action-menu"},customHr:{type:Boolean,attribute:"custom-hr"},consonant:{type:Boolean,attribute:"consonant"},detailBg:{type:String,attribute:"detail-bg"},secureLabel:{type:String,attribute:"secure-label"},checkboxLabel:{type:String,attribute:"checkbox-label"},selected:{type:Boolean,attribute:"aria-selected",reflect:!0},storageOption:{type:String,attribute:"storage",reflect:!0},stockOfferOsis:{type:Object,attribute:"stock-offer-osis",converter:{fromAttribute:t=>{let[e,o,a]=t.split(",");return{PUF:e,ABM:o,M2M:a}}}},filters:{type:String,reflect:!0,converter:{fromAttribute:t=>Object.fromEntries(t.split(",").map(e=>{let[o,a,s]=e.split(":"),g=Number(a);return[o,{order:isNaN(g)?void 0:g,size:s}]})),toAttribute:t=>Object.entries(t).map(([e,{order:o,size:a}])=>[e,o,a].filter(s=>s!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0},merchOffer:{type:Object}};static styles=[tt,Et(),...et()];customerSegment;marketSegment;variantLayout;#t=!1;constructor(){super(),this.filters={},this.types="",this.selected=!1,this.handleAemFragmentEvents=this.handleAemFragmentEvents.bind(this)}firstUpdated(){this.variantLayout=K(this,!1),this.variantLayout?.connectedCallbackHook(),this.aemFragment?.updateComplete.catch(()=>{this.style.display="none"})}willUpdate(t){(t.has("variant")||!this.variantLayout)&&(this.variantLayout=K(this),this.variantLayout.connectedCallbackHook())}updated(t){(t.has("badgeBackgroundColor")||t.has("borderColor"))&&(this.style.border=this.computedBorderStyle),this.variantLayout?.postCardUpdateHook(this)}get theme(){return this.closest("sp-theme")}get prices(){return Array.from(this.querySelectorAll('span[is="inline-price"][data-wcs-osi]'))}render(){if(!(!this.isConnected||!this.variantLayout||this.style.display==="none"))return this.variantLayout.renderLayout()}get computedBorderStyle(){return["twp","ccd-slice","ccd-suggested"].includes(this.variant)?"":`1px solid ${this.borderColor?this.borderColor:this.badgeBackgroundColor}`}get badgeElement(){return this.shadowRoot.getElementById("badge")}get headingmMSlot(){return this.shadowRoot.querySelector('slot[name="heading-m"]').assignedElements()[0]}get footerSlot(){return this.shadowRoot.querySelector('slot[name="footer"]')?.assignedElements()[0]}get price(){return this.headingmMSlot?.querySelector('span[is="inline-price"]')}get checkoutLinks(){return[...this.footerSlot?.querySelectorAll('a[is="checkout-link"]')??[]]}async toggleStockOffer({target:t}){if(!this.stockOfferOsis)return;let e=this.checkoutLinks;if(e.length!==0)for(let o of e){await o.onceSettled();let a=o.value?.[0]?.planType;if(!a)return;let s=this.stockOfferOsis[a];if(!s)return;let g=o.dataset.wcsOsi.split(",").filter(x=>x!==s);t.checked&&g.push(s),o.dataset.wcsOsi=g.join(",")}}handleQuantitySelection(t){let e=this.checkoutLinks;for(let o of e)o.dataset.quantity=t.detail.option}get titleElement(){return this.querySelector(this.variantLayout?.headingSelector||".card-heading")}get title(){return this.titleElement?.textContent?.trim()}get description(){return this.querySelector('[slot="body-xs"]')?.textContent?.trim()}updateFilters(t){let e={...this.filters};Object.keys(e).forEach(o=>{if(t){e[o].order=Math.min(e[o].order||2,2);return}let a=e[o].order;a===1||isNaN(a)||(e[o].order=Number(a)+1)}),this.filters=e}includes(t){return this.textContent.match(new RegExp(t,"i"))!==null}connectedCallback(){super.connectedCallback(),this.addEventListener(G,this.handleQuantitySelection),this.addEventListener(ot,this.merchCardReady,{once:!0}),this.updateComplete.then(()=>{this.merchCardReady()}),this.storageOptions?.addEventListener("change",this.handleStorageChange),this.addEventListener(N,this.handleAemFragmentEvents),this.addEventListener(O,this.handleAemFragmentEvents),this.aemFragment||setTimeout(()=>this.checkReady(),0)}disconnectedCallback(){super.disconnectedCallback(),this.variantLayout.disconnectedCallbackHook(),this.removeEventListener(G,this.handleQuantitySelection),this.storageOptions?.removeEventListener(F,this.handleStorageChange),this.removeEventListener(N,this.handleAemFragmentEvents),this.removeEventListener(O,this.handleAemFragmentEvents)}async handleAemFragmentEvents(t){if(t.type===N&&this.#e("AEM fragment cannot be loaded"),t.type===O&&t.target.nodeName==="AEM-FRAGMENT"){let e=t.detail;await kt(e,this),this.checkReady()}}#e(t){this.dispatchEvent(new CustomEvent(it,{detail:t,bubbles:!0,composed:!0}))}async checkReady(){let t=Promise.all([...this.querySelectorAll('span[is="inline-price"][data-wcs-osi],a[is="checkout-link"][data-wcs-osi]')].map(a=>a.onceSettled().catch(()=>a))).then(a=>a.every(s=>s.classList.contains("placeholder-resolved"))),e=new Promise(a=>setTimeout(()=>a(!1),se));if(await Promise.race([t,e])===!0){this.dispatchEvent(new CustomEvent(ct,{bubbles:!0,composed:!0}));return}this.#e("Contains unresolved offers")}get aemFragment(){return this.querySelector("aem-fragment")}get storageOptions(){return this.querySelector("sp-radio-group#storage")}get storageSpecificOfferSelect(){let t=this.storageOptions?.selected;if(t){let e=this.querySelector(`merch-offer-select[storage="${t}"]`);if(e)return e}return this.querySelector("merch-offer-select")}get offerSelect(){return this.storageOptions?this.storageSpecificOfferSelect:this.querySelector("merch-offer-select")}get quantitySelect(){return this.querySelector("merch-quantity-select")}merchCardReady(){this.offerSelect&&!this.offerSelect.planType||this.dispatchEvent(new CustomEvent(at,{bubbles:!0}))}handleStorageChange(){let t=this.closest("merch-card")?.offerSelect.cloneNode(!0);t&&this.dispatchEvent(new CustomEvent(F,{detail:{offerSelect:t},bubbles:!0}))}get dynamicPrice(){return this.querySelector('[slot="price"]')}selectMerchOffer(t){if(t===this.merchOffer)return;this.merchOffer=t;let e=this.dynamicPrice;if(t.price&&e){let o=t.price.cloneNode(!0);e.onceSettled?e.onceSettled().then(()=>{e.replaceWith(o)}):e.replaceWith(o)}}};customElements.define(i,c);

libs/features/mas/web-components/src/merch-card.js

@@ -263,7 +263,6 @@ export class MerchCard extends LitElement {
 
     connectedCallback() {
         super.connectedCallback();
-        this.setAttribute('tabindex', this.getAttribute('tabindex') ?? '0');
         this.addEventListener(
             EVENT_MERCH_QUANTITY_SELECTOR_CHANGE,
             this.handleQuantitySelection,