From 7a182549ee8ec4788e3660372685f78e089d4a37 Mon Sep 17 00:00:00 2001 From: sivasadobe Date: Tue, 23 Jul 2024 16:15:17 +0530 Subject: [PATCH 1/9] fix(a11y): added a11y two header tables --- libs/blocks/table/table.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/libs/blocks/table/table.js b/libs/blocks/table/table.js index c2c35b5f9a..3d828d0756 100644 --- a/libs/blocks/table/table.js +++ b/libs/blocks/table/table.js @@ -78,6 +78,11 @@ function handleHeading(table, headingCols) { col.innerHTML = ''; col.append(row1, row2); } + const colHeader = col.querySelector('h1, h2, h3, h4, h5, h6'); + const nodeToSetRoleScope = colHeader ?? col; + if (colHeader) col.removeAttribute('role'); + nodeToSetRoleScope.setAttribute('role', 'columnheader'); + nodeToSetRoleScope.setAttribute('scope', 'col'); }); } @@ -210,6 +215,8 @@ function handleSection(sectionParams) { if (!isMerch) { const sectionRowTitle = nextRowCols?.[0]; sectionRowTitle.classList.add('section-row-title'); + sectionRowTitle.setAttribute('role', 'rowheader'); + sectionRowTitle.setAttribute('scope', 'row'); } } else if (!row.classList.contains('row-1') && (!isHighlightTable || !row.classList.contains('row-2'))) { row.classList.add('section-row'); @@ -236,6 +243,8 @@ function handleSection(sectionParams) { const sectionRowTitle = rowCols[0]; handleTitleText(sectionRowTitle); sectionRowTitle.classList.add('section-row-title'); + sectionRowTitle.setAttribute('role', 'rowheader'); + sectionRowTitle.setAttribute('scope', 'row'); } } return expandSection; From ff4becdfd6d66fc5682d4ed3aaa83eb7a18d5933 Mon Sep 17 00:00:00 2001 From: sivasadobe Date: Thu, 25 Jul 2024 12:59:53 +0530 Subject: [PATCH 2/9] fix(heading): fixing the first row as columnheader --- libs/blocks/table/table.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/libs/blocks/table/table.js b/libs/blocks/table/table.js index 3d828d0756..b95bdd17b0 100644 --- a/libs/blocks/table/table.js +++ b/libs/blocks/table/table.js @@ -78,11 +78,9 @@ function handleHeading(table, headingCols) { col.innerHTML = ''; col.append(row1, row2); } - const colHeader = col.querySelector('h1, h2, h3, h4, h5, h6'); - const nodeToSetRoleScope = colHeader ?? col; - if (colHeader) col.removeAttribute('role'); - nodeToSetRoleScope.setAttribute('role', 'columnheader'); - nodeToSetRoleScope.setAttribute('scope', 'col'); + + col.setAttribute('role', 'columnheader'); + col.setAttribute('scope', 'col'); }); } From 24024a52e8c95a60bf2a956a0d22ff76a6c18cf1 Mon Sep 17 00:00:00 2001 From: sivasadobe Date: Mon, 29 Jul 2024 11:35:08 +0530 Subject: [PATCH 3/9] fix: heading more describable --- libs/blocks/table/table.js | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/libs/blocks/table/table.js b/libs/blocks/table/table.js index b95bdd17b0..c7cd9b31b0 100644 --- a/libs/blocks/table/table.js +++ b/libs/blocks/table/table.js @@ -40,12 +40,16 @@ function handleHeading(table, headingCols) { textStartIndex += 1; if (!(table.classList.contains('merch'))) iconTile.closest('p').classList.add('header-product-tile'); } - elements[textStartIndex]?.classList.add('tracking-header'); + const trackingHeaderElem = elements[textStartIndex]; const pricingElem = elements[textStartIndex + 1]; let bodyElem = elements[textStartIndex + 2]; + const pricingElemID = `${trackingHeaderElem?.id ?? 'row-head'}-pricing`; + trackingHeaderElem?.classList.add('tracking-header'); if (pricingElem) { pricingElem.classList.add('pricing'); + pricingElem.setAttribute('id', pricingElemID); + trackingHeaderElem?.setAttribute('aria-describedby', pricingElem.id); if (isPriceBottom) { pricingElem.parentNode.insertBefore( elements[textStartIndex + 2], @@ -54,12 +58,17 @@ function handleHeading(table, headingCols) { bodyElem = elements[textStartIndex + 1]; } } + + const bodyElemID = `${trackingHeaderElem?.id ?? 'row-head'}-body`; if (bodyElem) { bodyElem.classList.add('body'); + bodyElem.setAttribute('id', bodyElemID); + trackingHeaderElem.setAttribute('aria-describedby', `${bodyElemID} ${trackingHeaderElem.getAttribute('aria-describedby')}`); } decorateButtons(col, 'button-l'); const buttonsWrapper = createTag('div', { class: 'buttons-wrapper' }); + buttonsWrapper.setAttribute('role', 'cell'); col.append(buttonsWrapper); const buttons = col.querySelectorAll('.con-button'); @@ -78,9 +87,12 @@ function handleHeading(table, headingCols) { col.innerHTML = ''; col.append(row1, row2); } + const trackingHeader = col.querySelector('.tracking-header'); + const nodeToApplyRoleScope = trackingHeader ?? col; + if (trackingHeader) col.removeAttribute('role'); - col.setAttribute('role', 'columnheader'); - col.setAttribute('scope', 'col'); + nodeToApplyRoleScope.setAttribute('role', 'columnheader'); + nodeToApplyRoleScope.setAttribute('scope', 'col'); }); } @@ -503,9 +515,9 @@ export default function init(el) { col.dataset.colIndex = cdx + 1; col.classList.add('col', `col-${cdx + 1}`); col.setAttribute('role', 'cell'); - if (col.innerHTML) { - col.tabIndex = 0; - } + // if (col.innerHTML) { + // col.tabIndex = 0; + // } }); expandSection = handleSection(sectionParams); From 85e9926f7be4778ff798401a62e3080fd9b6c049 Mon Sep 17 00:00:00 2001 From: sivasadobe Date: Mon, 29 Jul 2024 18:08:38 +0530 Subject: [PATCH 4/9] fix(table): dynamic id added --- libs/blocks/table/table.js | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/libs/blocks/table/table.js b/libs/blocks/table/table.js index c7cd9b31b0..a02a13cb1e 100644 --- a/libs/blocks/table/table.js +++ b/libs/blocks/table/table.js @@ -40,16 +40,13 @@ function handleHeading(table, headingCols) { textStartIndex += 1; if (!(table.classList.contains('merch'))) iconTile.closest('p').classList.add('header-product-tile'); } - const trackingHeaderElem = elements[textStartIndex]; + elements[textStartIndex]?.classList.add('tracking-header'); + const pricingElem = elements[textStartIndex + 1]; let bodyElem = elements[textStartIndex + 2]; - const pricingElemID = `${trackingHeaderElem?.id ?? 'row-head'}-pricing`; - trackingHeaderElem?.classList.add('tracking-header'); if (pricingElem) { pricingElem.classList.add('pricing'); - pricingElem.setAttribute('id', pricingElemID); - trackingHeaderElem?.setAttribute('aria-describedby', pricingElem.id); if (isPriceBottom) { pricingElem.parentNode.insertBefore( elements[textStartIndex + 2], @@ -59,16 +56,12 @@ function handleHeading(table, headingCols) { } } - const bodyElemID = `${trackingHeaderElem?.id ?? 'row-head'}-body`; if (bodyElem) { bodyElem.classList.add('body'); - bodyElem.setAttribute('id', bodyElemID); - trackingHeaderElem.setAttribute('aria-describedby', `${bodyElemID} ${trackingHeaderElem.getAttribute('aria-describedby')}`); } decorateButtons(col, 'button-l'); const buttonsWrapper = createTag('div', { class: 'buttons-wrapper' }); - buttonsWrapper.setAttribute('role', 'cell'); col.append(buttonsWrapper); const buttons = col.querySelectorAll('.con-button'); @@ -88,8 +81,21 @@ function handleHeading(table, headingCols) { col.append(row1, row2); } const trackingHeader = col.querySelector('.tracking-header'); + const headerPricing = col.querySelector('.pricing'); + const headerBody = col.querySelector('.body:not(.action-area)'); const nodeToApplyRoleScope = trackingHeader ?? col; - if (trackingHeader) col.removeAttribute('role'); + + if (trackingHeader) { + const trackingHeaderID = `c${col.dataset.colIndex}-${trackingHeader.innerText.replace(/^\s+|\s+$/g, '').toLowerCase().replace(/[^a-z0-9 -]/g, '').replace(/\s+/g, '-') + .replace(/-+/g, '-') || ''}`; + + trackingHeader.setAttribute('id', trackingHeaderID); + if (headerBody) headerBody.setAttribute('id', `${trackingHeader.id}-body`); + if (headerPricing) headerPricing.setAttribute('id', `${trackingHeader.id}-pricing`); + trackingHeader.setAttribute('aria-describedby', `${headerBody?.id ?? ''} ${headerPricing?.id ?? ''}`); + + col.removeAttribute('role'); + } nodeToApplyRoleScope.setAttribute('role', 'columnheader'); nodeToApplyRoleScope.setAttribute('scope', 'col'); From a49dfc7c6de35ffdae6e0d4ae69a222a94cf5ca2 Mon Sep 17 00:00:00 2001 From: sivasadobe Date: Wed, 31 Jul 2024 13:54:11 +0530 Subject: [PATCH 5/9] fix: unique id for header body,pricing tag --- libs/blocks/table/table.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/libs/blocks/table/table.js b/libs/blocks/table/table.js index a02a13cb1e..cccddf4f4f 100644 --- a/libs/blocks/table/table.js +++ b/libs/blocks/table/table.js @@ -5,7 +5,7 @@ import { decorateButtons } from '../../utils/decorate.js'; const DESKTOP_SIZE = 900; const MOBILE_SIZE = 768; const tableHighlightLoadedEvent = new Event('milo:table:highlight:loaded'); - +let tableIndex = 0; function defineDeviceByScreenSize() { const screenWidth = window.innerWidth; if (screenWidth >= DESKTOP_SIZE) { @@ -41,7 +41,6 @@ function handleHeading(table, headingCols) { if (!(table.classList.contains('merch'))) iconTile.closest('p').classList.add('header-product-tile'); } elements[textStartIndex]?.classList.add('tracking-header'); - const pricingElem = elements[textStartIndex + 1]; let bodyElem = elements[textStartIndex + 2]; @@ -55,7 +54,6 @@ function handleHeading(table, headingCols) { bodyElem = elements[textStartIndex + 1]; } } - if (bodyElem) { bodyElem.classList.add('body'); } @@ -86,12 +84,11 @@ function handleHeading(table, headingCols) { const nodeToApplyRoleScope = trackingHeader ?? col; if (trackingHeader) { - const trackingHeaderID = `c${col.dataset.colIndex}-${trackingHeader.innerText.replace(/^\s+|\s+$/g, '').toLowerCase().replace(/[^a-z0-9 -]/g, '').replace(/\s+/g, '-') - .replace(/-+/g, '-') || ''}`; + const trackingHeaderID = `t${tableIndex + 1}-c${i + 1}-header`; trackingHeader.setAttribute('id', trackingHeaderID); - if (headerBody) headerBody.setAttribute('id', `${trackingHeader.id}-body`); - if (headerPricing) headerPricing.setAttribute('id', `${trackingHeader.id}-pricing`); + if (headerBody) headerBody.setAttribute('id', `${trackingHeaderID}-body`); + if (headerPricing) headerPricing.setAttribute('id', `${trackingHeaderID}-pricing`); trackingHeader.setAttribute('aria-describedby', `${headerBody?.id ?? ''} ${headerPricing?.id ?? ''}`); col.removeAttribute('role'); @@ -493,6 +490,7 @@ function applyStylesBasedOnScreenSize(table, originTable) { export default function init(el) { el.setAttribute('role', 'table'); + if (el.parentElement.classList.contains('section')) { el.parentElement.classList.add(`table-${el.classList.contains('merch') ? 'merch-' : ''}section`); } @@ -521,9 +519,6 @@ export default function init(el) { col.dataset.colIndex = cdx + 1; col.classList.add('col', `col-${cdx + 1}`); col.setAttribute('role', 'cell'); - // if (col.innerHTML) { - // col.tabIndex = 0; - // } }); expandSection = handleSection(sectionParams); @@ -563,4 +558,5 @@ export default function init(el) { window.addEventListener(MILO_EVENTS.DEFERRED, () => { handleTable(); }, true); + tableIndex++; } From 9dfc1cb22506355bed0873ee90689630c65deaf9 Mon Sep 17 00:00:00 2001 From: sivasadobe Date: Wed, 31 Jul 2024 14:53:52 +0530 Subject: [PATCH 6/9] chore: code opt --- libs/blocks/table/table.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/libs/blocks/table/table.js b/libs/blocks/table/table.js index cccddf4f4f..ade5d3dd61 100644 --- a/libs/blocks/table/table.js +++ b/libs/blocks/table/table.js @@ -79,17 +79,20 @@ function handleHeading(table, headingCols) { col.append(row1, row2); } const trackingHeader = col.querySelector('.tracking-header'); - const headerPricing = col.querySelector('.pricing'); - const headerBody = col.querySelector('.body:not(.action-area)'); const nodeToApplyRoleScope = trackingHeader ?? col; if (trackingHeader) { const trackingHeaderID = `t${tableIndex + 1}-c${i + 1}-header`; - trackingHeader.setAttribute('id', trackingHeaderID); + + const headerBody = col.querySelector('.body:not(.action-area)'); if (headerBody) headerBody.setAttribute('id', `${trackingHeaderID}-body`); + + const headerPricing = col.querySelector('.pricing'); if (headerPricing) headerPricing.setAttribute('id', `${trackingHeaderID}-pricing`); - trackingHeader.setAttribute('aria-describedby', `${headerBody?.id ?? ''} ${headerPricing?.id ?? ''}`); + + const describedBy = `${headerBody?.id ?? ''} ${headerPricing?.id ?? ''}`.trim(); + trackingHeader.setAttribute('aria-describedby', describedBy); col.removeAttribute('role'); } From 342e92bdb8b60506225bf4640e61e5e4aa5343e3 Mon Sep 17 00:00:00 2001 From: sivasadobe Date: Wed, 31 Jul 2024 14:55:28 +0530 Subject: [PATCH 7/9] chore: eslint fix --- libs/blocks/table/table.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/blocks/table/table.js b/libs/blocks/table/table.js index ade5d3dd61..86c6936d23 100644 --- a/libs/blocks/table/table.js +++ b/libs/blocks/table/table.js @@ -493,7 +493,6 @@ function applyStylesBasedOnScreenSize(table, originTable) { export default function init(el) { el.setAttribute('role', 'table'); - if (el.parentElement.classList.contains('section')) { el.parentElement.classList.add(`table-${el.classList.contains('merch') ? 'merch-' : ''}section`); } @@ -561,5 +560,6 @@ export default function init(el) { window.addEventListener(MILO_EVENTS.DEFERRED, () => { handleTable(); }, true); + tableIndex++; } From 00b4e786962a0f58018867a492877bf18e9e77c6 Mon Sep 17 00:00:00 2001 From: sivasadobe Date: Wed, 31 Jul 2024 19:46:23 +0530 Subject: [PATCH 8/9] fix(tab-focus): fixed key event in expand section --- libs/blocks/table/table.js | 1 + 1 file changed, 1 insertion(+) diff --git a/libs/blocks/table/table.js b/libs/blocks/table/table.js index 86c6936d23..723d0ebf38 100644 --- a/libs/blocks/table/table.js +++ b/libs/blocks/table/table.js @@ -380,6 +380,7 @@ function applyStylesBasedOnScreenSize(table, originTable) { tableEl.querySelectorAll('.icon.expand').forEach((icon) => { icon.parentElement.classList.add('point-cursor'); icon.parentElement.addEventListener('click', () => handleExpand(icon)); + icon.parentElement.setAttribute('tabindex', 0); icon.parentElement.addEventListener('keydown', (e) => { e.preventDefault(); if (e.key === 'Enter' || e.key === ' ') handleExpand(icon); From d94e98d6c38c2b6d87d20194bf278759b2b67584 Mon Sep 17 00:00:00 2001 From: sivasadobe Date: Mon, 19 Aug 2024 10:39:21 +0530 Subject: [PATCH 9/9] fix: review changes --- libs/blocks/table/table.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/blocks/table/table.js b/libs/blocks/table/table.js index 723d0ebf38..69bc6aed92 100644 --- a/libs/blocks/table/table.js +++ b/libs/blocks/table/table.js @@ -86,10 +86,10 @@ function handleHeading(table, headingCols) { trackingHeader.setAttribute('id', trackingHeaderID); const headerBody = col.querySelector('.body:not(.action-area)'); - if (headerBody) headerBody.setAttribute('id', `${trackingHeaderID}-body`); + headerBody?.setAttribute('id', `${trackingHeaderID}-body`); const headerPricing = col.querySelector('.pricing'); - if (headerPricing) headerPricing.setAttribute('id', `${trackingHeaderID}-pricing`); + headerPricing?.setAttribute('id', `${trackingHeaderID}-pricing`); const describedBy = `${headerBody?.id ?? ''} ${headerPricing?.id ?? ''}`.trim(); trackingHeader.setAttribute('aria-describedby', describedBy);