Files
mostlymatter/e2e-tests/playwright/specs/accessibility/common/signup_user_complete.spec.ts
Devin Binnie ee61301b67 [MM-62986][MM-63011][MM-63013][MM-63014][MM-63018] Various accessibility fixes around login, account creation and MFA setup (#30847)
* [MM-62986] Ensure focus goes back to the inputs after an error for Login/Create Account/MFA

* [MM-63011] Show outline on Mattermost logo link when focused

* [MM-63018] Remove tabindex from the login/signup cards and use <form> element for submit

* [MM-63014] Toggle aria-label when show/hide password is pressed

* [MM-63013] Mention the field name when showing an error message about the password field

* Fix lint

* Update screenshots and fix tests

* Update screenshots and fix tests

* Fix tests

* Update webapp/channels/src/components/mfa/setup/setup.tsx

Co-authored-by: Harrison Healey <harrisonmhealey@gmail.com>

* update screenshots

---------

Co-authored-by: yasserfaraazkhan <attitude3cena.yf@gmail.com>
Co-authored-by: Harrison Healey <harrisonmhealey@gmail.com>
2025-05-07 15:19:33 -04:00

108 строки
4.4 KiB
TypeScript

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