Skip to content

Commit

Permalink
[MWPW-165791] change of approach for cell, expandable icon a11y fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
DKos95 committed Jan 21, 2025
1 parent 4d7a01e commit 9342f3b
Showing 1 changed file with 13 additions and 4 deletions.
17 changes: 13 additions & 4 deletions libs/blocks/table/table.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ function handleHeading(table, headingCols) {
});

const headingContent = createTag('div', { class: 'heading-content' });
const headingButton = createTag('div', { class: 'heading-button', role: 'cell' });
const headingButton = createTag('div', { class: 'heading-button' });

[...elements].forEach((e) => {
if (e.classList.contains('pricing') && isPriceBottom) headingButton.appendChild(e);
Expand All @@ -91,10 +91,9 @@ function handleHeading(table, headingCols) {
const describedBy = `${headerBody?.id ?? ''} ${headerPricing?.id ?? ''}`.trim();
trackingHeader.setAttribute('aria-describedby', describedBy);

col.removeAttribute('role');
col.setAttribute('role', 'columnheader');
}

nodeToApplyRoleScope.setAttribute('role', 'columnheader');
nodeToApplyRoleScope.setAttribute('scope', 'col');
});
}
Expand Down Expand Up @@ -154,6 +153,15 @@ function handleAddOnContent(table) {
table.addEventListener('mas:resolved', debounce(() => { handleEqualHeight(table, '.row-heading'); }));
}

async function setAriaLabelsForExpandableIcons() {
const config = getConfig();
const ariaLabel = await replaceKey('toggle-row', config);
const icons = document.querySelectorAll('.icon.expand[role="button"]');
icons.forEach((icon) => {
icon.setAttribute('aria-label', ariaLabel);
});
}

function handleHighlight(table) {
const isHighlightTable = table.classList.contains('highlight');
const firstRow = table.querySelector('.row-1');
Expand Down Expand Up @@ -256,7 +264,7 @@ function handleSection(sectionParams) {
}

if (isCollapseTable) {
const iconTag = createTag('span', { class: 'icon expand' });
const iconTag = createTag('span', { class: 'icon expand', role: 'button' });
sectionHeadTitle.appendChild(iconTag);

if (expandSection) {
Expand Down Expand Up @@ -577,6 +585,7 @@ export default function init(el) {
});

handleHighlight(el);
setAriaLabelsForExpandableIcons();
if (isMerch) formatMerchTable(el);

let isDecorated = false;
Expand Down

0 comments on commit 9342f3b

Please sign in to comment.