MWPW-162026 [Milo][Sev2][Catalog] Group of checkboxes is missing FIELDSET …

libs/deps/mas/merch-sidenav.js

@@ -1,4 +1,4 @@
-var I=Object.defineProperty;var v=o=>{throw TypeError(o)};var V=(o,e,t)=>e in o?I(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 M,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 P=Object.defineProperty;var v=o=>{throw TypeError(o)};var H=(o,e,t)=>e in o?P(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var n=(o,e,t)=>H(o,typeof e!="symbol"?e+"":e,t),g=(o,e,t)=>e.has(o)||v("Cannot "+t);var b=(o,e,t)=>(g(o,e,"read from private field"),t?t.call(o):e.get(o)),S=(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),A=(o,e,t,s)=>(g(o,e,"write to private field"),s?s.call(o,t):e.set(o,t),t);import{html as M,css as j,LitElement as z}from"/libs/deps/lit-all.min.js";var l=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 F}from"/libs/deps/lit-all.min.js";var u=F`
     h2 {
         font-size: 11px;
         font-style: normal;
@@ -9,13 +9,13 @@ var I=Object.defineProperty;var v=o=>{throw TypeError(o)};var V=(o,e,t)=>e in o?
         line-height: 32px;
         color: #747474;
     }
-`;import{html as F,LitElement as U}from"/libs/deps/lit-all.min.js";function E(o,e){let t;return function(){let s=this,n=arguments;clearTimeout(t),t=setTimeout(()=>o.apply(s,n),e)}}var T="merch-search:change";var A="merch-sidenav:select";var y="hashchange";function r(o=window.location.hash){let e=[],t=o.replace(/^#/,"").split("&");for(let s of t){let[n,m=""]=s.split("=");n&&e.push([n,decodeURIComponent(m.replace(/\+/g," "))])}return Object.fromEntries(e)}function a(o,e){if(o.deeplink){let t={};t[o.deeplink]=e,H(t)}}function H(o){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(o).forEach(([n,m])=>{m?e.set(n,m):e.delete(n)}),e.sort();let t=e.toString();if(t===window.location.hash)return;let s=window.scrollY||document.documentElement.scrollTop;window.location.hash=t,window.scrollTo(0,s)}function w(o){let e=()=>{if(window.location.hash&&!window.location.hash.includes("="))return;let t=r(window.location.hash);o(t)};return e(),window.addEventListener(y,e),()=>{window.removeEventListener(y,e)}}var f=class extends U{get search(){return this.querySelector("sp-search")}constructor(){super(),this.handleInput=()=>{a(this,this.search.value),this.search.value&&this.dispatchEvent(new CustomEvent(T,{bubbles:!0,composed:!0,detail:{type:"search",value:this.search.value}}))},this.handleInputDebounced=E(this.handleInput.bind(this))}connectedCallback(){super.connectedCallback(),this.search&&(this.search.addEventListener("input",this.handleInputDebounced),this.search.addEventListener("submit",this.handleInputSubmit),this.updateComplete.then(()=>{this.setStateFromURL()}),this.startDeeplink())}disconnectedCallback(){super.disconnectedCallback(),this.search.removeEventListener("input",this.handleInputDebounced),this.search.removeEventListener("submit",this.handleInputSubmit),this.stopDeeplink?.()}setStateFromURL(){let t=r()[this.deeplink];t&&(this.search.value=t)}startDeeplink(){this.stopDeeplink=w(({search:e})=>{this.search.value=e??""})}handleInputSubmit(e){e.preventDefault()}render(){return F`<slot></slot>`}};i(f,"properties",{deeplink:{type:String}});customElements.define("merch-search",f);import{html as R,LitElement as B,css as G}from"/libs/deps/lit-all.min.js";var l=class extends B{constructor(){super(),this.handleClickDebounced=E(this.handleClick.bind(this))}selectElement(e,t=!0){e.parentNode.tagName==="SP-SIDENAV-ITEM"&&this.selectElement(e.parentNode,!1),t&&(this.selectedElement=e,this.selectedText=e.label,this.selectedValue=e.value,setTimeout(()=>{e.selected=!0},1),this.dispatchEvent(new CustomEvent(A,{bubbles:!0,composed:!0,detail:{type:"sidenav",value:this.selectedValue,elt:this.selectedElement}})))}setStateFromURL(){let t=r()[this.deeplink]??"all";if(t){let s=this.querySelector(`sp-sidenav-item[value="${t}"]`);if(!s)return;this.updateComplete.then(()=>{s.firstElementChild?.tagName==="SP-SIDENAV-ITEM"&&(s.expanded=!0),this.selectElement(s)})}}handleClick({target:e}){let{value:t,parentNode:s}=e;this.selectElement(e),s&&s.tagName==="SP-SIDENAV"&&(a(this,t),e.selected=!0,s.querySelectorAll("sp-sidenav-item[expanded],sp-sidenav-item[selected]").forEach(n=>{n.value!==t&&(n.expanded=!1,n.selected=!1)}))}selectionChanged({target:{value:e,parentNode:t}}){this.selectElement(this.querySelector(`sp-sidenav-item[value="${e}"]`)),a(this,e)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClickDebounced),this.updateComplete.then(()=>{this.setStateFromURL()})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClickDebounced)}render(){return R`<div
+`;import{html as B,LitElement as G}from"/libs/deps/lit-all.min.js";function E(o,e){let t;return function(){let s=this,i=arguments;clearTimeout(t),t=setTimeout(()=>o.apply(s,i),e)}}function C(o,e={},t=null,s=null){let i=s?document.createElement(o,{is:s}):document.createElement(o);t instanceof HTMLElement?i.appendChild(t):i.innerHTML=t;for(let[c,V]of Object.entries(e))i.setAttribute(c,V);return i}var T="merch-search:change";var y="merch-sidenav:select";var w="hashchange";function r(o=window.location.hash){let e=[],t=o.replace(/^#/,"").split("&");for(let s of t){let[i,c=""]=s.split("=");i&&e.push([i,decodeURIComponent(c.replace(/\+/g," "))])}return Object.fromEntries(e)}function a(o,e){if(o.deeplink){let t={};t[o.deeplink]=e,U(t)}}function U(o){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(o).forEach(([i,c])=>{c?e.set(i,c):e.delete(i)}),e.sort();let t=e.toString();if(t===window.location.hash)return;let s=window.scrollY||document.documentElement.scrollTop;window.location.hash=t,window.scrollTo(0,s)}function R(o){let e=()=>{if(window.location.hash&&!window.location.hash.includes("="))return;let t=r(window.location.hash);o(t)};return e(),window.addEventListener(w,e),()=>{window.removeEventListener(w,e)}}var f=class extends G{get search(){return this.querySelector("sp-search")}constructor(){super(),this.handleInput=()=>{a(this,this.search.value),this.search.value&&this.dispatchEvent(new CustomEvent(T,{bubbles:!0,composed:!0,detail:{type:"search",value:this.search.value}}))},this.handleInputDebounced=E(this.handleInput.bind(this))}connectedCallback(){super.connectedCallback(),this.search&&(this.search.addEventListener("input",this.handleInputDebounced),this.search.addEventListener("submit",this.handleInputSubmit),this.updateComplete.then(()=>{this.setStateFromURL()}),this.startDeeplink())}disconnectedCallback(){super.disconnectedCallback(),this.search.removeEventListener("input",this.handleInputDebounced),this.search.removeEventListener("submit",this.handleInputSubmit),this.stopDeeplink?.()}setStateFromURL(){let t=r()[this.deeplink];t&&(this.search.value=t)}startDeeplink(){this.stopDeeplink=R(({search:e})=>{this.search.value=e??""})}handleInputSubmit(e){e.preventDefault()}render(){return B`<slot></slot>`}};n(f,"properties",{deeplink:{type:String}});customElements.define("merch-search",f);import{html as L,LitElement as $,css as q}from"/libs/deps/lit-all.min.js";var d=class extends ${constructor(){super(),this.handleClickDebounced=E(this.handleClick.bind(this))}selectElement(e,t=!0){e.parentNode.tagName==="SP-SIDENAV-ITEM"&&this.selectElement(e.parentNode,!1),t&&(this.selectedElement=e,this.selectedText=e.label,this.selectedValue=e.value,setTimeout(()=>{e.selected=!0},1),this.dispatchEvent(new CustomEvent(y,{bubbles:!0,composed:!0,detail:{type:"sidenav",value:this.selectedValue,elt:this.selectedElement}})))}setStateFromURL(){let t=r()[this.deeplink]??"all";if(t){let s=this.querySelector(`sp-sidenav-item[value="${t}"]`);if(!s)return;this.updateComplete.then(()=>{s.firstElementChild?.tagName==="SP-SIDENAV-ITEM"&&(s.expanded=!0),this.selectElement(s)})}}handleClick({target:e}){let{value:t,parentNode:s}=e;this.selectElement(e),s&&s.tagName==="SP-SIDENAV"&&(a(this,t),e.selected=!0,s.querySelectorAll("sp-sidenav-item[expanded],sp-sidenav-item[selected]").forEach(i=>{i.value!==t&&(i.expanded=!1,i.selected=!1)}))}selectionChanged({target:{value:e,parentNode:t}}){this.selectElement(this.querySelector(`sp-sidenav-item[value="${e}"]`)),a(this,e)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClickDebounced),this.updateComplete.then(()=>{this.setStateFromURL()})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClickDebounced)}render(){return L`<div
             aria-label="${this.label}"
             @change="${e=>this.selectionChanged(e)}"
         >
-            ${this.sidenavListTitle?R`<h2>${this.sidenavListTitle}</h2>`:""}
+            ${this.sidenavListTitle?L`<h2>${this.sidenavListTitle}</h2>`:""}
             <slot></slot>
-        </div>`}};i(l,"properties",{sidenavListTitle:{type:String},label:{type:String},deeplink:{type:String,attribute:"deeplink"},selectedText:{type:String,reflect:!0,attribute:"selected-text"},selectedValue:{type:String,reflect:!0,attribute:"selected-value"}}),i(l,"styles",[G`
+        </div>`}};n(d,"properties",{sidenavListTitle:{type:String},label:{type:String},deeplink:{type:String,attribute:"deeplink"},selectedText:{type:String,reflect:!0,attribute:"selected-text"},selectedValue:{type:String,reflect:!0,attribute:"selected-value"}}),n(d,"styles",[q`
             :host {
                 display: block;
                 contain: content;
@@ -36,15 +36,15 @@ var I=Object.defineProperty;var v=o=>{throw TypeError(o)};var V=(o,e,t)=>e in o?
                     )
                 );
             }
-        `,u]);customElements.define("merch-sidenav-list",l);import{html as $,LitElement as q,css as Y}from"/libs/deps/lit-all.min.js";var d=class extends q{setStateFromURL(){this.selectedValues=[];let{types:e}=r();e&&(this.selectedValues=e.split(","),this.selectedValues.forEach(t=>{let s=this.querySelector(`sp-checkbox[name=${t}]`);s&&(s.checked=!0)}))}selectionChanged(e){let{target:t}=e,s=t.getAttribute("name");if(s){let n=this.selectedValues.indexOf(s);t.checked&&n===-1?this.selectedValues.push(s):!t.checked&&n>=0&&this.selectedValues.splice(n,1)}a(this,this.selectedValues.join(","))}connectedCallback(){super.connectedCallback(),this.updateComplete.then(async()=>{this.setStateFromURL()})}render(){return $`<div aria-label="${this.label}">
+        `,u]);customElements.define("merch-sidenav-list",d);import{html as Y,LitElement as K,css as W}from"/libs/deps/lit-all.min.js";var h=class extends K{setStateFromURL(){this.selectedValues=[];let{types:e}=r();e&&(this.selectedValues=e.split(","),this.selectedValues.forEach(t=>{let s=this.querySelector(`sp-checkbox[name=${t}]`);s&&(s.checked=!0)}))}selectionChanged(e){let{target:t}=e,s=t.getAttribute("name");if(s){let i=this.selectedValues.indexOf(s);t.checked&&i===-1?this.selectedValues.push(s):!t.checked&&i>=0&&this.selectedValues.splice(i,1)}a(this,this.selectedValues.join(","))}addAccessibilityAttributes(){let e="sidenav-checkbox-group-title",t=C("div",{class:"invisible-and-shrank",id:e});t.textContent=this.sidenavCheckboxTitle,this.append(t),this.querySelectorAll("sp-checkbox").forEach(s=>{s.setAttribute("role","group"),s.setAttribute("aria-labelledby",e)})}connectedCallback(){super.connectedCallback(),this.updateComplete.then(async()=>{this.setStateFromURL(),this.addAccessibilityAttributes()})}render(){return Y`<div aria-label="${this.label}">
             <h3>${this.sidenavCheckboxTitle}</h3>
             <div
                 @change="${e=>this.selectionChanged(e)}"
                 class="checkbox-group"
             >
                 <slot></slot>
             </div>
-        </div>`}};i(d,"properties",{sidenavCheckboxTitle:{type:String},label:{type:String},deeplink:{type:String},selectedValues:{type:Array,reflect:!0},value:{type:String}}),i(d,"styles",Y`
+        </div>`}};n(h,"properties",{sidenavCheckboxTitle:{type:String},label:{type:String},deeplink:{type:String},selectedValues:{type:Array,reflect:!0},value:{type:String}}),n(h,"styles",W`
         :host {
             display: block;
             contain: content;
@@ -66,7 +66,7 @@ var I=Object.defineProperty;var v=o=>{throw TypeError(o)};var V=(o,e,t)=>e in o?
             display: flex;
             flex-direction: column;
         }
-    `);customElements.define("merch-sidenav-checkbox-group",d);var L="(max-width: 700px)";var N="(max-width: 1199px)";var D=/iP(ad|hone|od)/.test(window?.navigator?.platform)||window?.navigator?.platform==="MacIntel"&&window.navigator.maxTouchPoints>1,_=!1,x,k=o=>{o&&(D?(document.body.style.position="fixed",o.ontouchmove=e=>{e.targetTouches.length===1&&e.stopPropagation()},_||(document.addEventListener("touchmove",e=>e.preventDefault()),_=!0)):(x=document.body.style.overflow,document.body.style.overflow="hidden"))},O=o=>{o&&(D?(o.ontouchstart=null,o.ontouchmove=null,document.body.style.position="",document.removeEventListener("touchmove",e=>e.preventDefault()),_=!1):x!==void 0&&(document.body.style.overflow=x,x=void 0))};var p,h=class extends W{constructor(){super();b(this,p);i(this,"mobileDevice",new c(this,L));i(this,"mobileAndTablet",new c(this,N));this.modal=!1}get filters(){return this.querySelector("merch-sidenav-list")}get search(){return this.querySelector("merch-search")}render(){return this.mobileAndTablet.matches?this.asDialog:this.asAside}get asDialog(){if(this.modal)return M`
+    `);customElements.define("merch-sidenav-checkbox-group",h);var N="(max-width: 700px)";var D="(max-width: 1199px)";var k=/iP(ad|hone|od)/.test(window?.navigator?.platform)||window?.navigator?.platform==="MacIntel"&&window.navigator.maxTouchPoints>1,_=!1,x,O=o=>{o&&(k?(document.body.style.position="fixed",o.ontouchmove=e=>{e.targetTouches.length===1&&e.stopPropagation()},_||(document.addEventListener("touchmove",e=>e.preventDefault()),_=!0)):(x=document.body.style.overflow,document.body.style.overflow="hidden"))},I=o=>{o&&(k?(o.ontouchstart=null,o.ontouchmove=null,document.body.style.position="",document.removeEventListener("touchmove",e=>e.preventDefault()),_=!1):x!==void 0&&(document.body.style.overflow=x,x=void 0))};var m,p=class extends z{constructor(){super();S(this,m);n(this,"mobileDevice",new l(this,N));n(this,"mobileAndTablet",new l(this,D));this.modal=!1}get filters(){return this.querySelector("merch-sidenav-list")}get search(){return this.querySelector("merch-search")}render(){return this.mobileAndTablet.matches?this.asDialog:this.asAside}get asDialog(){if(this.modal)return M`
             <sp-theme  color="light" scale="medium">
                 <sp-dialog-base
                     slot="click-content"
@@ -90,7 +90,7 @@ var I=Object.defineProperty;var v=o=>{throw TypeError(o)};var V=(o,e,t)=>e in o?
         `}get asAside(){return M`<sp-theme  color="light" scale="medium"
             ><h2>${this.sidenavTitle}</h2>
             <slot></slot
-        ></sp-theme>`}get dialog(){return this.shadowRoot.querySelector("sp-dialog-base")}closeModal(t){t.preventDefault(),this.dialog?.close(),document.body.classList.remove("merch-modal")}openModal(){this.updateComplete.then(async()=>{k(this.dialog),document.body.classList.add("merch-modal");let t={trigger:S(this,p),notImmediatelyClosable:!0,type:"auto"},s=await window.__merch__spectrum_Overlay.open(this.dialog,t);s.addEventListener("close",()=>{this.modal=!1,document.body.classList.remove("merch-modal"),O(this.dialog)}),this.shadowRoot.querySelector("sp-theme").append(s)})}updated(){this.modal&&this.openModal()}showModal({target:t}){C(this,p,t),this.modal=!0}};p=new WeakMap,i(h,"properties",{sidenavTitle:{type:String},closeText:{type:String,attribute:"close-text"},modal:{type:Boolean,attribute:"modal",reflect:!0}}),i(h,"styles",[K`
+        ></sp-theme>`}get dialog(){return this.shadowRoot.querySelector("sp-dialog-base")}closeModal(t){t.preventDefault(),this.dialog?.close(),document.body.classList.remove("merch-modal")}openModal(){this.updateComplete.then(async()=>{O(this.dialog),document.body.classList.add("merch-modal");let t={trigger:b(this,m),notImmediatelyClosable:!0,type:"auto"},s=await window.__merch__spectrum_Overlay.open(this.dialog,t);s.addEventListener("close",()=>{this.modal=!1,document.body.classList.remove("merch-modal"),I(this.dialog)}),this.shadowRoot.querySelector("sp-theme").append(s)})}updated(){this.modal&&this.openModal()}showModal({target:t}){A(this,m,t),this.modal=!0}};m=new WeakMap,n(p,"properties",{sidenavTitle:{type:String},closeText:{type:String,attribute:"close-text"},modal:{type:Boolean,attribute:"modal",reflect:!0}}),n(p,"styles",[j`
             :host {
                 display: block;
                 z-index: 2;
@@ -139,4 +139,4 @@ var I=Object.defineProperty;var v=o=>{throw TypeError(o)};var V=(o,e,t)=>e in o?
                 top: 16px;
                 right: 16px;
             }
-        `,u]);customElements.define("merch-sidenav",h);export{h as MerchSideNav};
+        `,u]);customElements.define("merch-sidenav",p);export{p as MerchSideNav};

libs/features/mas/src/global.css.js

@@ -420,5 +420,14 @@ body.merch-modal {
     height: 100vh;
 }
 
+.invisible-and-shrank {
+    top: 0;
+    left: -2px;
+    width: 1px;
+    height: 1px;
+    position: absolute;
+    overflow: hidden;
+}
+
 `;
 document.head.appendChild(styles);

libs/features/mas/src/sidenav/merch-sidenav-checkbox-group.js

@@ -1,5 +1,6 @@
 import { html, LitElement, css } from 'lit';
 import { parseState, pushStateFromComponent } from '../deeplink.js';
+import { createTag } from '../utils.js';
 
 export class MerchSidenavCheckboxGroup extends LitElement {
     static properties = {
@@ -69,10 +70,22 @@ export class MerchSidenavCheckboxGroup extends LitElement {
         pushStateFromComponent(this, this.selectedValues.join(','));
     }
 
+    addAccessibilityAttributes() {
+        const id = 'sidenav-checkbox-group-title';
+        const groupIdEl = createTag('div', { class: 'invisible-and-shrank', id });
+        groupIdEl.textContent = this.sidenavCheckboxTitle;
+        this.append(groupIdEl);
+        this.querySelectorAll('sp-checkbox').forEach((checkboxEl) => {
+            checkboxEl.setAttribute('role', 'group');
+            checkboxEl.setAttribute('aria-labelledby', id);
+        });
+    }
+
     connectedCallback() {
         super.connectedCallback();
         this.updateComplete.then(async () => {
             this.setStateFromURL();
+            this.addAccessibilityAttributes();
         });
     }