[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>

e2e-tests/playwright/lib/src/ui/pages/login.ts

@@ -37,7 +37,7 @@ export default class LoginPage {
         this.loginPlaceholder = page.locator(`[placeholder="Email or Username"]`);
         this.loginWithAdLdapPlaceholder = page.locator(`[placeholder="Email, Username or AD/LDAP Username"]`);
         this.passwordInput = page.locator('#input_password-input');
-        this.passwordToggleButton = page.getByRole('button', {name: 'Show or hide password'});
+        this.passwordToggleButton = page.locator('#password_toggle');
         this.signInButton = page.locator('button:has-text("Log in")');
         this.createAccountLink = page.locator("text=Don't have an account?");
         this.forgotPasswordLink = page.locator('text=Forgot your password?');

e2e-tests/playwright/lib/src/ui/pages/signup.ts

@@ -40,7 +40,7 @@ export default class SignupPage {
         this.emailInput = page.locator('#input_email');
         this.usernameInput = page.locator('#input_name');
         this.passwordInput = page.locator('#input_password-input');
-        this.passwordToggleButton = page.getByRole('button', {name: 'Show or hide password'});
+        this.passwordToggleButton = page.locator('#password_toggle');
         this.createAccountButton = page.locator('button:has-text("Create Account")');
         this.emailError = page.locator('text=Please enter a valid email address');
         this.usernameError = page.locator(

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

@@ -67,10 +67,6 @@ test('/login accessibility tab support', async ({pw}) => {
 
     // * Should move focus to login body after shift+tab
     await pw.loginPage.loginInput.press('Shift+Tab');
-    expect(await pw.loginPage.bodyCard).toBeFocused();
-
-    // * Should move focus to create account link after shift+tab
-    await pw.loginPage.bodyCard.press('Shift+Tab');
     expect(await pw.loginPage.createAccountLink).toBeFocused();
 
     // * Should move focus to login body after tab

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

@@ -79,14 +79,6 @@ test('/signup_user_complete accessibility tab support', async ({pw}, testInfo) =
     await pw.signupPage.emailInput.focus();
     expect(await pw.signupPage.emailInput).toBeFocused();
 
-    // * Should move focus to sign up body after shift+tab
-    await pw.signupPage.emailInput.press('Shift+Tab');
-    expect(await pw.signupPage.bodyCard).toBeFocused();
-
-    // * Should move focus to sign up body after shift+tab
-    await pw.signupPage.emailInput.press('Shift+Tab');
-    expect(await pw.signupPage.bodyCard).toBeFocused();
-
     if (testInfo.project.name === 'ipad') {
         // * Should move focus to header back button after shift+tab
         await pw.signupPage.bodyCard.press('Shift+Tab');