A11Y: Ensure you can tab to submit on 2FA modal (#23135)

This PR relies upon https://github.com/discourse/discourse/pull/23093

- move login modal tests to `..../modal/login/....`

app/assets/javascripts/discourse/app/components/modal/login.hbs

@@ -55,6 +55,7 @@
           @showSignupLink={{this.showSignupLink}}
           @createAccount={{this.createAccount}}
           @loggingIn={{this.loggingIn}}
+          @showSecondFactor={{this.showSecondFactor}}
         />
       </div>
     {{/if}}

app/assets/javascripts/discourse/app/components/modal/login.js

@@ -95,7 +95,9 @@ export default class Login extends Component {
   }
 
   get showSignupLink() {
-    return this.args.model.canSignUp && !this.loggingIn;
+    return (
+      this.args.model.canSignUp && !this.loggingIn && !this.showSecondFactor
+    );
   }
 
   @action

app/assets/javascripts/discourse/app/components/modal/login/footer.hbs

@@ -4,12 +4,12 @@
       <DButton
         @action={{@login}}
         id="login-button"
-        @form="login-form"
+        form="login-form"
         @icon="unlock"
         @label={{@loginButtonLabel}}
         @disabled={{@loginDisabled}}
         class="btn btn-large btn-primary"
-        @tabindex="2"
+        tabindex={{unless @showSecondFactor "2"}}
       />
     {{/unless}}
 
@@ -19,7 +19,7 @@
         id="new-account-link"
         @action={{@createAccount}}
         @label="create_account.title"
-        @tabindex="3"
+        tabindex="3"
       />
     {{/if}}
   {{/if}}

app/assets/javascripts/discourse/app/components/second-factor-input.hbs

@@ -1,14 +1,14 @@
 <TextField
   @value={{this.value}}
   @type={{this.type}}
-  @pattern={{this.pattern}}
-  @maxlength={{this.maxlength}}
-  @class="second-factor-token-input"
-  @id={{this.inputId}}
-  @autocapitalize="off"
-  @autocomplete="one-time-code"
-  @autocorrect="off"
-  @autofocus="autofocus"
-  @placeholder={{this.placeholder}}
   @input={{action "onInput"}}
+  @placeholder={{this.placeholder}}
+  @autocomplete="one-time-code"
+  pattern={{this.pattern}}
+  maxlength={{this.maxlength}}
+  class="second-factor-token-input"
+  id={{this.inputId}}
+  autocapitalize="off"
+  autocorrect="off"
+  autofocus="autofocus"
 />

app/assets/javascripts/discourse/tests/acceptance/modal/login/login-test.js

@@ -0,0 +1,45 @@
+import { acceptance } from "discourse/tests/helpers/qunit-helpers";
+import { test } from "qunit";
+import { click, fillIn, tab, visit } from "@ember/test-helpers";
+import I18n from "I18n";
+
+acceptance("Modal - Login", function () {
+  test("You can tab to the login button", async function (assert) {
+    await visit("/");
+    await click("header .login-button");
+    // you have to press the tab key twice to get to the login button
+    await tab({ unRestrainTabIndex: true });
+    await tab({ unRestrainTabIndex: true });
+    assert.dom(".modal-footer #login-button").isFocused();
+  });
+});
+
+acceptance("Modal - Login - With 2FA", function (needs) {
+  needs.settings({
+    enable_local_logins_via_email: true,
+  });
+
+  needs.pretender((server, helper) => {
+    server.post(`/session`, () =>
+      helper.response({
+        error: I18n.t("login.invalid_second_factor_code"),
+        multiple_second_factor_methods: false,
+        security_key_enabled: false,
+        totp_enabled: true,
+      })
+    );
+  });
+
+  test("You can tab to 2FA login button", async function (assert) {
+    await visit("/");
+    await click("header .login-button");
+
+    await fillIn("#login-account-name", "isaac@discourse.org");
+    await fillIn("#login-account-password", "password");
+    await click("#login-button");
+
+    assert.dom("#login-second-factor").isFocused();
+    await tab();
+    assert.dom("#login-button").isFocused();
+  });
+});