MM-52641 MM-52645 Playwright/Accessibility: Initial setup and accessibility fix on login page (#23254)

* MM-52641 Playwright/Accessibility: initial setup

* upgrade Playwright to 1.36.1

* fix accessibility at login page

* fix lint

* update snapshot

e2e-tests/playwright/support/server/init.ts

@@ -52,7 +52,12 @@ export async function initSetup({
         // Update user preference
         const preferences: PreferenceType[] = [
             {user_id: user.id, category: 'tutorial_step', name: user.id, value: '999'},
-            {user_id: user.id, category: 'drafts', name: 'drafts_tour_tip_showed', value: JSON.stringify({drafts_tour_tip_showed: true})},
+            {
+                user_id: user.id,
+                category: 'drafts',
+                name: 'drafts_tour_tip_showed',
+                value: JSON.stringify({drafts_tour_tip_showed: true}),
+            },
             {user_id: user.id, category: 'crt_thread_pane_step', name: user.id, value: '999'},
         ];
         await userClient.savePreferences(user.id, preferences);

e2e-tests/playwright/support/test_fixture.ts

@@ -1,4 +1,6 @@
-import {test as base, Browser, ViewportSize} from '@playwright/test';
+import {test as base, Browser, Page, ViewportSize} from '@playwright/test';
+import {AxeResults} from 'axe-core';
+import AxeBuilder from '@axe-core/playwright';
 
 import {TestBrowser} from './browser_context';
 import {shouldHaveCallsEnabled, shouldHaveFeatureFlag, shouldSkipInSmallScreen, shouldRunInLinux} from './flag';
@@ -11,11 +13,16 @@ import {matchSnapshot} from './visual';
 export {expect} from '@playwright/test';
 
 type ExtendedFixtures = {
+    axe: AxeBuilderExtended;
     pw: PlaywrightExtended;
     pages: typeof pages;
 };
 
 export const test = base.extend<ExtendedFixtures>({
+    axe: async ({page}, use) => {
+        const ab = new AxeBuilderExtended(page);
+        await use(ab);
+    },
     pw: async ({browser, viewport}, use) => {
         const pw = new PlaywrightExtended(browser, viewport);
         await use(pw);
@@ -84,3 +91,39 @@ class PlaywrightExtended {
         this.matchSnapshot = matchSnapshot;
     }
 }
+
+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;
+
+    // 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);
+        };
+    }
+
+    violationFingerprints(accessibilityScanResults: AxeResults) {
+        const fingerprints = accessibilityScanResults.violations.map((violation) => ({
+            rule: violation.id,
+            description: violation.description,
+            helpUrl: violation.helpUrl,
+            targets: violation.nodes.map((node) => {
+                return {target: node.target, impact: node.impact, html: node.html};
+            }),
+        }));
+
+        return JSON.stringify(fingerprints, null, 2);
+    }
+}

e2e-tests/playwright/support/ui/components/channels/post_dot_menu.ts

@@ -11,7 +11,7 @@ export default class PostDotMenu {
     constructor(container: Locator) {
         this.container = container;
 
-        this.deleteMenuItem = this.container.getByText('Delete', {exact: true});   
+        this.deleteMenuItem = this.container.getByText('Delete', {exact: true});
     }
 
     async toBeVisible() {