MM-53813: Fix(accessibility): on channels page (#24122)

* fix(accessibility): on channels page

* fix lint and update dynamic-virtualized-list

* fix snapshot and update per feedback

* fix e2e tests

* fix test

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

e2e-tests/playwright/support/test_fixture.ts

@@ -19,8 +19,9 @@ type ExtendedFixtures = {
 };
 
 export const test = base.extend<ExtendedFixtures>({
-    axe: async ({page}, use) => {
-        const ab = new AxeBuilderExtended(page);
+    // eslint-disable-next-line no-empty-pattern
+    axe: async ({}, use) => {
+        const ab = new AxeBuilderExtended();
         await use(ab);
     },
     pw: async ({browser, viewport}, use) => {
@@ -93,24 +94,15 @@ class PlaywrightExtended {
 }
 
 class AxeBuilderExtended {
-    /**
-     * Each page should have its own Axe Builder to specifically list known issues
-     * which are to be excluded from being scanned until issues are fixed.
-     * Excluded element should have a corresponding ticket.
-     */
-
-    // '<site_url>/login'
-    readonly loginPage: () => AxeBuilder;
+    readonly builder: (page: Page, disableRules?: string[]) => AxeBuilder;
 
     // See https://github.com/dequelabs/axe-core/blob/master/doc/API.md#axe-core-tags
     readonly tags: string[] = ['wcag2a', 'wcag2aa'];
 
-    // See https://github.com/dequelabs/axe-core/blob/master/doc/rule-descriptions.md#wcag-20-level-a--aa-rules
-    readonly disabledRules: string[] = [];
-
-    constructor(page: Page) {
-        this.loginPage = () => {
-            return new AxeBuilder({page}).withTags(this.tags).disableRules(this.disabledRules);
+    constructor() {
+        // See https://github.com/dequelabs/axe-core/blob/master/doc/rule-descriptions.md#wcag-20-level-a--aa-rules
+        this.builder = (page: Page, disableRules?: string[]) => {
+            return new AxeBuilder({page}).withTags(this.tags).disableRules(disableRules || []);
         };
     }
 

e2e-tests/playwright/tests/accessibility/channels/intro_channel.spec.ts

@@ -0,0 +1,26 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, test} from '@e2e-support/test_fixture';
+
+test('Intro to channel', async ({pw, pages, axe}) => {
+    // Create and sign in a new user
+    const {user} = await pw.initSetup();
+
+    // Log in a user in new browser context
+    const {page} = await pw.testBrowser.login(user);
+
+    // Visit a default channel page
+    const channelsPage = new pages.ChannelsPage(page);
+    await channelsPage.goto();
+    await channelsPage.toBeVisible();
+    await channelsPage.postMessage('hello');
+    await channelsPage.sendMessage();
+
+    // # Analyze the page
+    // Disable 'color-contrast' to be addressed by MM-53814
+    const accessibilityScanResults = await axe.builder(page, ['color-contrast']).analyze();
+
+    // * Should have no violation
+    expect(accessibilityScanResults.violations).toHaveLength(0);
+});

e2e-tests/playwright/tests/accessibility/common/login.spec.ts

@@ -12,7 +12,7 @@ test('/login', async ({pw, pages, page, axe}) => {
     await loginPage.toBeVisible();
 
     // # Analyze the page
-    const accessibilityScanResults = await axe.loginPage().analyze();
+    const accessibilityScanResults = await axe.builder(loginPage.page).analyze();
 
     // * Should have no violation
     expect(accessibilityScanResults.violations).toHaveLength(0);