fix(accessibility): tab support at login, reset and signup pages, buttons at ATE and app bar (#24214)

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

@@ -19,7 +19,7 @@ test('Intro to channel', async ({pw, pages, axe}) => {
 
     // # Analyze the page
     // Disable 'color-contrast' to be addressed by MM-53814
-    const accessibilityScanResults = await axe.builder(page, ['color-contrast']).analyze();
+    const accessibilityScanResults = await axe.builder(page, {disableColorContrast: true}).analyze();
 
     // * Should have no violation
     expect(accessibilityScanResults.violations).toHaveLength(0);

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

@@ -3,7 +3,7 @@
 
 import {expect, test} from '@e2e-support/test_fixture';
 
-test('/login', async ({pw, pages, page, axe}) => {
+test('/login accessibility quick check', async ({pw, pages, page, axe}) => {
     // # Go to login page
     const {adminClient} = await pw.getAdminClient();
     const adminConfig = await adminClient.getConfig();
@@ -17,3 +17,63 @@ test('/login', async ({pw, pages, page, axe}) => {
     // * Should have no violation
     expect(accessibilityScanResults.violations).toHaveLength(0);
 });
+
+test('/login accessibility tab support', async ({pw, pages, page}) => {
+    // # Go to login page
+    const {adminClient} = await pw.getAdminClient();
+    const adminConfig = await adminClient.getConfig();
+    const loginPage = new pages.LoginPage(page, adminConfig);
+    await loginPage.goto();
+    await loginPage.toBeVisible();
+
+    // * Should have focused at login input on page load
+    expect(await loginPage.loginInput).toBeFocused();
+
+    // * Should move focus to password input after tab
+    await loginPage.loginInput.press('Tab');
+    expect(await loginPage.passwordInput).toBeFocused();
+
+    // * Should move focus to password toggle button after tab
+    await loginPage.passwordInput.press('Tab');
+    expect(await loginPage.passwordToggleButton).toBeFocused();
+
+    // * Should move focus to forgot password link after tab
+    await loginPage.passwordToggleButton.press('Tab');
+    expect(await loginPage.forgotPasswordLink).toBeFocused();
+
+    // * Should move focus to forgot password link after tab
+    await loginPage.forgotPasswordLink.press('Tab');
+    expect(await loginPage.signInButton).toBeFocused();
+
+    // * Should move focus to about link after tab
+    await loginPage.signInButton.press('Tab');
+    expect(await loginPage.footer.aboutLink).toBeFocused();
+
+    // * Should move focus to privacy policy link after tab
+    await loginPage.footer.aboutLink.press('Tab');
+    expect(await loginPage.footer.privacyPolicyLink).toBeFocused();
+
+    // * Should move focus to terms link after tab
+    await loginPage.footer.privacyPolicyLink.press('Tab');
+    expect(await loginPage.footer.termsLink).toBeFocused();
+
+    // * Should move focus to help link after tab
+    await loginPage.footer.termsLink.press('Tab');
+    expect(await loginPage.footer.helpLink).toBeFocused();
+
+    // * Should move focus to header logo after tab
+    await loginPage.footer.helpLink.press('Tab');
+    expect(await loginPage.header.logo).toBeFocused();
+
+    // * Should move focus to create account link after tab
+    await loginPage.header.logo.press('Tab');
+    expect(await loginPage.createAccountLink).toBeFocused();
+
+    // * Should move focus to create account link after tab
+    await loginPage.createAccountLink.press('Tab');
+    expect(await loginPage.bodyCard).toBeFocused();
+
+    // * Then, should move focus to login body after tab
+    await loginPage.bodyCard.press('Tab');
+    expect(await loginPage.loginInput).toBeFocused();
+});

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

@@ -0,0 +1,55 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, test} from '@e2e-support/test_fixture';
+
+test('/reset_password accessibility quick check', async ({pages, page, axe}) => {
+    // # Go to reset password page
+    const resetPasswordPage = new pages.ResetPasswordPage(page);
+    await resetPasswordPage.goto();
+    await resetPasswordPage.toBeVisible();
+
+    // # Analyze the page
+    const accessibilityScanResults = await axe.builder(resetPasswordPage.page, {disableColorContrast: true}).analyze();
+
+    // * Should have no violation
+    expect(accessibilityScanResults.violations).toHaveLength(0);
+});
+
+test('/reset_password accessibility tab support', async ({pages, page}) => {
+    // # Go to reset password page
+    const resetPasswordPage = new pages.ResetPasswordPage(page);
+    await resetPasswordPage.goto();
+    await resetPasswordPage.toBeVisible();
+
+    // * Should have focused at email input on page load
+    expect(await resetPasswordPage.emailInput).toBeFocused();
+
+    // * Should move focus to reset button after tab
+    await resetPasswordPage.emailInput.press('Tab');
+    expect(await resetPasswordPage.resetButton).toBeFocused();
+
+    // * Should move focus to about link after tab
+    await resetPasswordPage.resetButton.press('Tab');
+    expect(await resetPasswordPage.footer.aboutLink).toBeFocused();
+
+    // * Should move focus to privacy policy link after tab
+    await resetPasswordPage.footer.aboutLink.press('Tab');
+    expect(await resetPasswordPage.footer.privacyPolicyLink).toBeFocused();
+
+    // * Should move focus to terms link after tab
+    await resetPasswordPage.footer.privacyPolicyLink.press('Tab');
+    expect(await resetPasswordPage.footer.termsLink).toBeFocused();
+
+    // * Should move focus to help link after tab
+    await resetPasswordPage.footer.termsLink.press('Tab');
+    expect(await resetPasswordPage.footer.helpLink).toBeFocused();
+
+    // * Should move focus to header logo after tab
+    await resetPasswordPage.footer.helpLink.press('Tab');
+    expect(await resetPasswordPage.header.backButton).toBeFocused();
+
+    // * Then, should move focus to email input after tab
+    await resetPasswordPage.header.backButton.press('Tab');
+    expect(await resetPasswordPage.emailInput).toBeFocused();
+});

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

@@ -0,0 +1,93 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, test} from '@e2e-support/test_fixture';
+
+test('/signup_user_complete accessibility quick check', async ({pages, page, axe}) => {
+    // # Go to reset password page
+    const signupPage = new pages.SignupPage(page);
+    await signupPage.goto();
+    await signupPage.toBeVisible();
+
+    // # Analyze the page
+    const accessibilityScanResults = await axe
+        .builder(signupPage.page, {disableColorContrast: true, disableLinkInTextBlock: true})
+        .analyze();
+
+    // * Should have no violation
+    expect(accessibilityScanResults.violations).toHaveLength(0);
+});
+
+test('/signup_user_complete accessibility tab support', async ({pages, page}) => {
+    // # Go to reset password page
+    const signupPage = new pages.SignupPage(page);
+    await signupPage.goto();
+    await signupPage.toBeVisible();
+
+    // * Should have focused at email input on page load
+    expect(await signupPage.emailInput).toBeFocused();
+
+    // * Should move focus to username input after tab
+    await signupPage.emailInput.press('Tab');
+    expect(await signupPage.usernameInput).toBeFocused();
+
+    // * Should move focus to password input after tab
+    await signupPage.usernameInput.press('Tab');
+    expect(await signupPage.passwordInput).toBeFocused();
+
+    // * Should move focus to password toggle button after tab
+    await signupPage.passwordInput.press('Tab');
+    expect(await signupPage.passwordToggleButton).toBeFocused();
+
+    // * Should move focus to newsletter checkbox after tab
+    await signupPage.passwordToggleButton.press('Tab');
+    expect(await signupPage.newsLetterCheckBox).toBeFocused();
+
+    // * Should move focus to newsletter privacy policy link after tab
+    await signupPage.newsLetterCheckBox.press('Tab');
+    expect(await signupPage.newsLetterPrivacyPolicyLink).toBeFocused();
+
+    // * Should move focus to newsletter unsubscribe link after tab
+    await signupPage.newsLetterPrivacyPolicyLink.press('Tab');
+    expect(await signupPage.newsLetterUnsubscribeLink).toBeFocused();
+
+    // * Should move focus to agreement terms of use link after tab
+    await signupPage.newsLetterUnsubscribeLink.press('Tab');
+    expect(await signupPage.agreementTermsOfUseLink).toBeFocused();
+
+    // * Should move focus to agreement privacy policy link after tab
+    await signupPage.agreementTermsOfUseLink.press('Tab');
+    expect(await signupPage.agreementPrivacyPolicyLink).toBeFocused();
+
+    // * Should move focus to privacy policy link after tab
+    await signupPage.footer.aboutLink.press('Tab');
+    expect(await signupPage.footer.privacyPolicyLink).toBeFocused();
+
+    // * Should move focus to terms link after tab
+    await signupPage.footer.privacyPolicyLink.press('Tab');
+    expect(await signupPage.footer.termsLink).toBeFocused();
+
+    // * Should move focus to help link after tab
+    await signupPage.footer.termsLink.press('Tab');
+    expect(await signupPage.footer.helpLink).toBeFocused();
+
+    // * Should move focus to header logo after tab
+    await signupPage.footer.helpLink.press('Tab');
+    expect(await signupPage.header.logo).toBeFocused();
+
+    // * Should move focus to header back button after tab
+    await signupPage.header.logo.press('Tab');
+    expect(await signupPage.header.backButton).toBeFocused();
+
+    // * Should move focus to log in link after tab
+    await signupPage.header.backButton.press('Tab');
+    expect(await signupPage.loginLink).toBeFocused();
+
+    // * Should move focus to sign up body after tab
+    await signupPage.loginLink.press('Tab');
+    expect(await signupPage.bodyCard).toBeFocused();
+
+    // * Then, should move focus to email input after tab
+    await signupPage.bodyCard.press('Tab');
+    expect(await signupPage.emailInput).toBeFocused();
+});