[MWPW-165791] Table select aria-label and column cell role added

libs/blocks/table/table.js

@@ -1,7 +1,8 @@
 /* eslint-disable no-plusplus */
-import { createTag, MILO_EVENTS } from '../../utils/utils.js';
+import { createTag, getConfig, MILO_EVENTS } from '../../utils/utils.js';
 import { decorateButtons } from '../../utils/decorate.js';
 import { debounce } from '../../utils/action.js';
+import { replaceKey } from '../../features/placeholders.js';
 
 const DESKTOP_SIZE = 900;
 const MOBILE_SIZE = 768;
@@ -90,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');
   });
 }
@@ -153,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');
@@ -255,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) {
@@ -448,6 +457,15 @@ function applyStylesBasedOnScreenSize(table, originTable) {
     if ((!isMerch && !table.querySelector('.col-3'))
       || (isMerch && !table.querySelector('.col-2'))) return;
 
+    async function setAriaLabelsForElements(selectArray) {
+      const config = getConfig();
+      const ariaLabel = await replaceKey('choose-table-column', config);
+
+      selectArray.forEach((item) => {
+        item.setAttribute('aria-label', ariaLabel);
+      });
+    }
+
     const filterChangeEvent = () => {
       table.innerHTML = originTable.innerHTML;
       reAssignEvents(table);
@@ -508,6 +526,7 @@ function applyStylesBasedOnScreenSize(table, originTable) {
       table.parentElement.insertBefore(filters, table);
       table.parentElement.classList.add(`table-${table.classList.contains('merch') ? 'merch-' : ''}section`);
       filterChangeEvent();
+      setAriaLabelsForElements([colSelect0, colSelect1]);
     }
   };
 
@@ -566,6 +585,7 @@ export default function init(el) {
   });
 
   handleHighlight(el);
+  setAriaLabelsForExpandableIcons();
   if (isMerch) formatMerchTable(el);
 
   let isDecorated = false;

test/blocks/table/mocks/placeholders.json

@@ -0,0 +1,8 @@
+{
+  "data": [
+    {
+      "key": "choose-table-column",
+      "value": "choose table column"
+    }
+  ]
+}

test/blocks/table/table.test.js

@@ -1,10 +1,15 @@
 import { readFile, sendMouse, sendKeys, resetMouse } from '@web/test-runner-commands';
 import { expect } from 'chai';
-import { MILO_EVENTS } from '../../../libs/utils/utils.js';
+import { getConfig, MILO_EVENTS, setConfig } from '../../../libs/utils/utils.js';
 import { delay, waitForElement } from '../../helpers/waitfor.js';
+import { replaceKey } from '../../../libs/features/placeholders.js';
 
 document.body.innerHTML = await readFile({ path: './mocks/body.html' });
 const { default: init } = await import('../../../libs/blocks/table/table.js');
+const locales = { '': { ietf: 'en-US', tk: 'hah7vzn.css' } };
+const conf = { locales, contentRoot: '/test/blocks/table/mocks' };
+setConfig(conf);
+const config = getConfig();
 
 describe('table and tablemetadata', () => {
   beforeEach(() => {
@@ -111,5 +116,16 @@ describe('table and tablemetadata', () => {
       expect(tooltipHeading.childNodes.length).to.equal(2);
       expect(tooltipHeading.querySelector('.milo-tooltip, .icon-tooltip')).to.exist;
     });
+
+    it('should apply aria-label to all selects within .filters on mobile', async () => {
+      window.innerWidth = 375;
+      window.dispatchEvent(new Event('resize'));
+      const ariaLabel = await replaceKey('choose-table-column', config);
+      const selectElements = document.querySelectorAll('.filters select');
+
+      selectElements.forEach((selectElement) => {
+        expect(selectElement.getAttribute('aria-label')).to.equal(ariaLabel);
+      });
+    });
   });
 });