[MWPW-165792] - Remove skip a11y flags (#3668)

* [MWPW-165792] remove nala flags

* [MWPW-165792] added new color check regarding [MWPW-165793]

* [MWPW-165792] update

* [MWPW-165792] marquee test update style

* [MWPW-165792] a11y test adaptation

* [MWPW-165792] video a11y skip added

nala/blocks/accordion/accordion.test.js

@@ -147,8 +147,7 @@ test.describe('Milo Accordion Block test suite', () => {
     });
 
     await test.step('step-4: Verify the accessibility test on the Accordion seo editorial block', async () => {
-      // The accessibility test for the Accordion seo editorial is failing, so skipping it.
-      await runAccessibilityTest({ page, testScope: accordion.accordion, skipA11yTest: true });
+      await runAccessibilityTest({ page, testScope: accordion.accordion });
     });
   });
 });

nala/blocks/aside/aside.page.js

@@ -56,7 +56,6 @@ export default class Aside {
       background: {
         black: 'rgb(17, 17, 17)',
         darkGrey: 'rgb(171, 171, 171)',
-        lightGrey1: 'rgb(238, 238, 238)',
         lightGrey2: 'rgb(245, 245, 245)',
         lightGrey3: 'rgb(249, 249, 249)',
       },

nala/blocks/aside/aside.test.js

@@ -34,12 +34,11 @@ test.describe('Aside Block test suite', () => {
       const bgdColor = await Aside.asideSmall.evaluate(
         (e) => window.getComputedStyle(e).getPropertyValue('background-color'),
       );
-      expect([Aside.props.background.lightGrey1, Aside.props.background.lightGrey3]).toContain(bgdColor);
+      expect(bgdColor).toBe(Aside.props.background.lightGrey3);
     });
 
     await test.step('step-3: Verify the accessibility test on the Aside Small block', async () => {
-      // The accessibility test for the Aside Small is failing, so skipping it.
-      await runAccessibilityTest({ page, testScope: Aside.asideSmall, skipA11yTest: true });
+      await runAccessibilityTest({ page, testScope: Aside.asideSmall });
     });
   });
 
@@ -69,11 +68,11 @@ test.describe('Aside Block test suite', () => {
       expect(await Aside.actionButtons.count()).toEqual(2);
       // Check Aside block background:
       const bgdColor = await Aside.asideMedium.evaluate((e) => window.getComputedStyle(e).getPropertyValue('background-color'));
-      expect([Aside.props.background.lightGrey1, Aside.props.background.lightGrey3]).toContain(bgdColor);
+      expect(bgdColor).toBe(Aside.props.background.lightGrey3);
     });
 
     await test.step('step-3: Verify the accessibility test on the Aside Medium block', async () => {
-      await runAccessibilityTest({ page, testScope: Aside.asideMedium, skipA11yTest: true });
+      await runAccessibilityTest({ page, testScope: Aside.asideMedium });
     });
   });
 
@@ -103,11 +102,11 @@ test.describe('Aside Block test suite', () => {
       expect(await Aside.actionButtons.count()).toEqual(2);
       // Check Aside block background:
       const bgdColor = await Aside.asideLarge.evaluate((e) => window.getComputedStyle(e).getPropertyValue('background-color'));
-      expect([Aside.props.background.lightGrey1, Aside.props.background.lightGrey3]).toContain(bgdColor);
+      expect(bgdColor).toBe(Aside.props.background.lightGrey3);
     });
 
     await test.step('step-3: Verify the accessibility test on the Aside Large block', async () => {
-      await runAccessibilityTest({ page, testScope: Aside.asideLarge, skipA11yTest: true });
+      await runAccessibilityTest({ page, testScope: Aside.asideLarge });
     });
   });
 
@@ -416,7 +415,6 @@ test.describe('Aside Block test suite', () => {
     });
 
     await test.step('step-3: Verify the accessibility test on the Aside Notification Extra Small Dark block', async () => {
-      // The accessibility test for the AAside Notification Extra Small is failing, so skipping it.
       await runAccessibilityTest({ page, testScope: Aside.asideNotifExtraSmallDark, skipA11yTest: true });
     });
   });

nala/blocks/carousel/carousel.test.js

@@ -53,7 +53,7 @@ test.describe('Milo Carousel Block test suite', () => {
 
     await test.step('step-4: Verify the accessibility test on the carousel block', async () => {
       // The accessibility test for the carousel container is failing, so skipping the test step
-      await runAccessibilityTest({ page, testScope: carousel.carouselContainer, skipA11yTest: true });
+      await runAccessibilityTest({ page, testScope: carousel.carouselContainer });
     });
   });
 

nala/blocks/chart/chart.test.js

@@ -31,7 +31,7 @@ test.describe('Milo Chart feature test suite', () => {
     });
 
     await test.step('step-3: Verify the accessibility test on the chart block', async () => {
-      await runAccessibilityTest({ page, testScope: chart.chart, skipA11yTest: true });
+      await runAccessibilityTest({ page, testScope: chart.chart });
     });
   });
 
@@ -59,7 +59,7 @@ test.describe('Milo Chart feature test suite', () => {
     });
 
     await test.step('step-3: Verify the accessibility test on the chart block', async () => {
-      await runAccessibilityTest({ page, testScope: chart.chart, skipA11yTest: true });
+      await runAccessibilityTest({ page, testScope: chart.chart });
     });
   });
 
@@ -96,7 +96,7 @@ test.describe('Milo Chart feature test suite', () => {
     });
 
     await test.step('step-3: Verify the accessibility test on the chart block', async () => {
-      await runAccessibilityTest({ page, testScope: chart.chart, skipA11yTest: true });
+      await runAccessibilityTest({ page, testScope: chart.chart });
     });
   });
 
@@ -126,7 +126,7 @@ test.describe('Milo Chart feature test suite', () => {
     });
 
     await test.step('step-3: Verify the accessibility test on the chart block', async () => {
-      await runAccessibilityTest({ page, testScope: chart.chart, skipA11yTest: true });
+      await runAccessibilityTest({ page, testScope: chart.chart });
     });
   });
 
@@ -159,7 +159,7 @@ test.describe('Milo Chart feature test suite', () => {
     });
 
     await test.step('step-3: Verify the accessibility test on the chart block', async () => {
-      await runAccessibilityTest({ page, testScope: chart.chart, skipA11yTest: true });
+      await runAccessibilityTest({ page, testScope: chart.chart });
     });
   });
 
@@ -189,7 +189,7 @@ test.describe('Milo Chart feature test suite', () => {
     });
 
     await test.step('step-3: Verify the accessibility test on the chart block', async () => {
-      await runAccessibilityTest({ page, testScope: chart.chart, skipA11yTest: true });
+      await runAccessibilityTest({ page, testScope: chart.chart });
     });
   });
 
@@ -220,7 +220,7 @@ test.describe('Milo Chart feature test suite', () => {
     });
 
     await test.step('step-3: Verify the accessibility test on the chart block', async () => {
-      await runAccessibilityTest({ page, testScope: chart.chart, skipA11yTest: true });
+      await runAccessibilityTest({ page, testScope: chart.chart });
     });
   });
 });

nala/blocks/columns/columns.test.js

@@ -140,7 +140,7 @@ test.describe('Milo Columns Block test suite', () => {
     });
 
     await test.step('step-3: Verify the accessibility test on the Columns(table) block', async () => {
-      await runAccessibilityTest({ page, testScope: column.column, skipA11yTest: true });
+      await runAccessibilityTest({ page, testScope: column.column });
     });
   });
 

nala/blocks/figure/figure.test.js

@@ -53,9 +53,13 @@ test.describe('Milo Figure Block test suite', () => {
       await expect(await figureBlock.figCaption.nth(1)).toContainText(data.figCaption_2);
     });
 
-    await test.step('step-3: Verify the accessibility test on the Figure block', async () => {
-      // The accessibility test for the Figure block is failing, so skipping it.
-      await runAccessibilityTest({ page, testScope: figureBlock.figure, skipA11yTest: true });
+    await test.step('step-3: Verify the accessibility test on all Figure blocks', async () => {
+      const figureBlocks = await figureBlock.figure.all();
+
+      for (let i = 0; i < figureBlocks.length; i++) {
+        console.info(`Running accessibility test on Figure block #${i + 1}`);
+        await runAccessibilityTest({ page, testScope: figureBlocks[i] });
+      }
     });
   });
 });

nala/blocks/howto/howto.test.js

@@ -36,7 +36,7 @@ test.describe('Milo HowTo block test suite', () => {
 
     await test.step('step-3: Verify the accessibility test on the HowTo default block', async () => {
       // The accessibility test for the HowTo default block is failing, so skipping it.
-      await runAccessibilityTest({ page, testScope: howTo.howTo, skipA11yTest: true });
+      await runAccessibilityTest({ page, testScope: howTo.howTo });
     });
   });
 

nala/blocks/marquee-anchors/marquee-anchors.test.js

@@ -77,7 +77,7 @@ test.describe('Milo Marquee Anchors test suite', () => {
     });
 
     await test.step('step-4: Verify the accessibility test on the marquee anchors block', async () => {
-      await runAccessibilityTest({ page, testScope: marquee.marqueeAnchors, skipA11yTest: true });
+      await runAccessibilityTest({ page, testScope: marquee.marqueeAnchors });
     });
   });
 
@@ -142,7 +142,7 @@ test.describe('Milo Marquee Anchors test suite', () => {
     });
 
     await test.step('step-4: Verify the accessibility test on the marquee anchors (transparent) block', async () => {
-      await runAccessibilityTest({ page, testScope: marquee.marqueeAnchorsTransparent, skipA11yTest: true });
+      await runAccessibilityTest({ page, testScope: marquee.marqueeAnchorsTransparent });
     });
   });
 });

nala/blocks/marquee/marquee.page.js

@@ -138,7 +138,7 @@ export default class Marquee {
         },
       },
       'marquee.split.one-third-large': {
-        style: /^background:\s+rgb\(245, 245, 245\)$/,
+        style: /^background:\s+rgb\(249, 249, 249\)$/,
         iconImg: {
           loading: 'eager',
           fetchpriority: 'high',

nala/blocks/marquee/marquee.test.js

@@ -442,7 +442,7 @@ test.describe('Milo Marquee Block test suite', () => {
     });
 
     await test.step('step-4: Verify the accessibility test on the Marquee (split, one-third, large, light) block', async () => {
-      await runAccessibilityTest({ page, testScope: marquee.marqueeSplitOneThirdLargeLight, skipA11yTest: true });
+      await runAccessibilityTest({ page, testScope: marquee.marqueeSplitOneThirdLargeLight });
     });
   });
 
@@ -513,7 +513,7 @@ test.describe('Milo Marquee Block test suite', () => {
     });
 
     await test.step('step-4: Verify the accessibility test on the Marquee (split,one-third,small,light) block', async () => {
-      await runAccessibilityTest({ page, testScope: marquee.marqueeSplitOneThirdSmallLight, skipA11yTest: true });
+      await runAccessibilityTest({ page, testScope: marquee.marqueeSplitOneThirdSmallLight });
     });
   });
 

nala/blocks/text/text.test.js

@@ -239,7 +239,6 @@ test.describe('Milo Text Block test suite', () => {
     });
 
     await test.step('step-4: Verify the accessibility test on the text (legal) block', async () => {
-      // The accessibility test is failing, so skipping it.
       await runAccessibilityTest({ page, testScope: text.textlegal, skipA11yTest: true });
     });
   });

nala/blocks/zpattern/zpattern.test.js

@@ -52,9 +52,13 @@ test.describe('Milo Z Pattern Block test suite', () => {
       }
     });
 
-    await test.step('step-3: Verify the accessibility test on the ZPattern default block', async () => {
-      // The accessibility test is failing, so skipping it.
-      await runAccessibilityTest({ page, testScope: zpattern.mediaBlocks, skipA11yTest: true });
+    await test.step('step-3: Verify the accessibility test on all ZPattern media blocks', async () => {
+      const mediaBlocks = await zpattern.mediaBlocks.all();
+
+      for (const [index, mediaBlock] of mediaBlocks.entries()) {
+        console.info(`Running accessibility test on media block #${index + 1}`);
+        await runAccessibilityTest({ page, testScope: mediaBlock });
+      }
     });
   });
 
@@ -171,9 +175,13 @@ test.describe('Milo Z Pattern Block test suite', () => {
       }
     });
 
-    await test.step('step-3: Verify the accessibility test on the ZPattern dark block', async () => {
-      // The accessibility test is failing, so skipping it.
-      await runAccessibilityTest({ page, testScope: zpattern.mediaBlocks, skipA11yTest: true });
+    await test.step('step-3: Verify the accessibility test on all ZPattern dark blocks', async () => {
+      const mediaBlocks = await zpattern.mediaBlocks.all();
+
+      for (const [index, mediaBlock] of mediaBlocks.entries()) {
+        console.info(`Running accessibility test on media block #${index + 1}`);
+        await runAccessibilityTest({ page, testScope: mediaBlock });
+      }
     });
   });
 });

test/blocks/aside/aside.test.js

@@ -20,7 +20,7 @@ describe('aside', () => {
 
     it('allows a background color', async () => {
       const el = await waitForElement('#test-default');
-      expect(window.getComputedStyle(el)?.backgroundColor).to.be.oneOf(['rgb(249, 249, 249)', 'rgb(238, 238, 238)']);
+      expect(window.getComputedStyle(el)?.backgroundColor).to.equal('rgb(249, 249, 249)');
     });
 
     it('allows a background image', async () => {

test/blocks/aside/mocks/standard.html

@@ -1,6 +1,6 @@
 <div class="aside" id="test-default">
   <div>
-    <div data-valign="middle">#eeeeee</div>
+    <div data-valign="middle">#f9f9f9</div>
   </div>
   <div>
     <div data-valign="middle">