[MWPW-154662] [Accessibility] Visual list is not marked up as list: s…

…ection (#3101) * make mini-compare footer rows unordered list for accessiblity * dummy commit * Revert "dummy commit" This reverts commit a3a8824. --------- Co-authored-by: Rohit Sahu <rosahu@adobe.com>
adobecom · Nov 7, 2024 · fe3acdb · fe3acdb
1 parent 36e869f
commit fe3acdb
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 1 deletion.
diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js
@@ -398,7 +398,7 @@ const decorateFooterRows = (merchCard, footerRows) => {
       const rowIcon = row.firstElementChild.querySelector('picture');
       const rowText = row.querySelector('div > div:nth-child(2)').innerHTML;
       const rowTextParagraph = createTag('div', { class: 'footer-row-cell-description' }, rowText);
-      const footerRowCell = createTag('div', { class: 'footer-row-cell' });
+      const footerRowCell = createTag('ul', { class: 'footer-row-cell' });
       if (rowIcon) {
         rowIcon.classList.add('footer-row-icon');
         footerRowCell.appendChild(rowIcon);

diff --git a/libs/deps/mas/mas.js b/libs/deps/mas/mas.js
diff --git a/libs/deps/mas/merch-card.js b/libs/deps/mas/merch-card.js
@@ -636,6 +636,7 @@ merch-card[variant="ccd-action"] .price-strikethrough {
     justify-content: start;
     place-items: center;
     padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s);
+    margin-block: 0px;
   }
 
   merch-card[variant="mini-compare-chart"] .footer-row-cell-description {

diff --git a/libs/features/mas/mas/dist/mas.js b/libs/features/mas/mas/dist/mas.js
diff --git a/libs/features/mas/web-components/src/variants/mini-compare-chart.css.js b/libs/features/mas/web-components/src/variants/mini-compare-chart.css.js
@@ -75,6 +75,7 @@ export const CSS = `
     justify-content: start;
     place-items: center;
     padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s);
+    margin-block: 0px;
   }
 
   merch-card[variant="mini-compare-chart"] .footer-row-cell-description {