diff --git a/creativecloud/blocks/catalog/catalog.css b/creativecloud/blocks/catalog/catalog.css index 44a7e7f07..2e6105731 100644 --- a/creativecloud/blocks/catalog/catalog.css +++ b/creativecloud/blocks/catalog/catalog.css @@ -29,3 +29,12 @@ order: 1; padding: 0; } + +.catalog.app .checkbox-group-id { + top: 0; + left: -2px; + width: 1px; + height: 1px; + position: absolute; + overflow: hidden; +} diff --git a/creativecloud/blocks/catalog/catalog.js b/creativecloud/blocks/catalog/catalog.js index bb4c5383f..d380af77c 100644 --- a/creativecloud/blocks/catalog/catalog.js +++ b/creativecloud/blocks/catalog/catalog.js @@ -1,4 +1,4 @@ -import { getLibs } from '../../scripts/utils.js'; +import { getLibs, createTag } from '../../scripts/utils.js'; const miloLibs = getLibs('/libs'); const { loadStyle } = await import(`${miloLibs}/utils/utils.js`); @@ -65,6 +65,24 @@ export function enableAnalytics(catalog, merchCards, sidenav) { }); } +function addCheckboxGroupAttributes(sidenav) { + const cbGroup = sidenav.querySelector('merch-sidenav-checkbox-group'); + if (!cbGroup) return; + + const checkboxGroupId = 'sidenav-checkbox-group-title'; + const h3El = cbGroup.shadowRoot.querySelector('h3'); + if (!h3El) return; + + const groupIdEl = createTag('div', { class: 'checkbox-group-id', id: checkboxGroupId }); + groupIdEl.textContent = h3El.textContent; + cbGroup.append(groupIdEl); + + cbGroup.querySelectorAll('sp-checkbox').forEach((checkboxEl) => { + checkboxEl.setAttribute('role', 'group'); + checkboxEl.setAttribute('aria-labelledby', checkboxGroupId); + }); +} + /** container block */ export default async function init(el) { el.classList.add('app'); @@ -85,6 +103,7 @@ export default async function init(el) { const sidenav = await initSidenav(sidenavEl); el.prepend(sidenav); await sidenav.updateComplete; + addCheckboxGroupAttributes(sidenav); if (merchCards) { merchCards.sidenav = sidenav; merchCards.requestUpdate();