From 5288d875d583ad471cabd142769b0a2816e4796e Mon Sep 17 00:00:00 2001
From: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Date: Wed, 6 Sep 2023 12:22:41 -0500
Subject: [PATCH] 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/....`
---
 .../discourse/app/components/modal/login.hbs  |  1 +
 .../discourse/app/components/modal/login.js   |  4 +-
 .../app/components/modal/login/footer.hbs     |  6 +--
 .../app/components/second-factor-input.hbs    | 18 ++++----
 .../acceptance/modal/login/login-test.js      | 45 +++++++++++++++++++
 ...email-and-hide-email-address-taken-test.js |  0
 ...in-with-email-and-no-social-logins-test.js |  0
 .../login}/login-with-email-disabled-test.js  |  0
 .../login}/login-with-email-test.js           |  0
 9 files changed, 61 insertions(+), 13 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/tests/acceptance/modal/login/login-test.js
 rename app/assets/javascripts/discourse/tests/acceptance/{ => modal/login}/login-with-email-and-hide-email-address-taken-test.js (100%)
 rename app/assets/javascripts/discourse/tests/acceptance/{ => modal/login}/login-with-email-and-no-social-logins-test.js (100%)
 rename app/assets/javascripts/discourse/tests/acceptance/{ => modal/login}/login-with-email-disabled-test.js (100%)
 rename app/assets/javascripts/discourse/tests/acceptance/{ => modal/login}/login-with-email-test.js (100%)

diff --git a/app/assets/javascripts/discourse/app/components/modal/login.hbs b/app/assets/javascripts/discourse/app/components/modal/login.hbs
index c831d96cfb0..0c1d1c9717b 100644
--- a/app/assets/javascripts/discourse/app/components/modal/login.hbs
+++ b/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}}
diff --git a/app/assets/javascripts/discourse/app/components/modal/login.js b/app/assets/javascripts/discourse/app/components/modal/login.js
index b04a7a13bfb..c239571c9b3 100644
--- a/app/assets/javascripts/discourse/app/components/modal/login.js
+++ b/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
diff --git a/app/assets/javascripts/discourse/app/components/modal/login/footer.hbs b/app/assets/javascripts/discourse/app/components/modal/login/footer.hbs
index c0f82514f0e..39d245072c9 100644
--- a/app/assets/javascripts/discourse/app/components/modal/login/footer.hbs
+++ b/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}}
diff --git a/app/assets/javascripts/discourse/app/components/second-factor-input.hbs b/app/assets/javascripts/discourse/app/components/second-factor-input.hbs
index 7cb46b17b1b..a8015110206 100644
--- a/app/assets/javascripts/discourse/app/components/second-factor-input.hbs
+++ b/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"
 />
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/tests/acceptance/modal/login/login-test.js b/app/assets/javascripts/discourse/tests/acceptance/modal/login/login-test.js
new file mode 100644
index 00000000000..955bb860295
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/app/assets/javascripts/discourse/tests/acceptance/login-with-email-and-hide-email-address-taken-test.js b/app/assets/javascripts/discourse/tests/acceptance/modal/login/login-with-email-and-hide-email-address-taken-test.js
similarity index 100%
rename from app/assets/javascripts/discourse/tests/acceptance/login-with-email-and-hide-email-address-taken-test.js
rename to app/assets/javascripts/discourse/tests/acceptance/modal/login/login-with-email-and-hide-email-address-taken-test.js
diff --git a/app/assets/javascripts/discourse/tests/acceptance/login-with-email-and-no-social-logins-test.js b/app/assets/javascripts/discourse/tests/acceptance/modal/login/login-with-email-and-no-social-logins-test.js
similarity index 100%
rename from app/assets/javascripts/discourse/tests/acceptance/login-with-email-and-no-social-logins-test.js
rename to app/assets/javascripts/discourse/tests/acceptance/modal/login/login-with-email-and-no-social-logins-test.js
diff --git a/app/assets/javascripts/discourse/tests/acceptance/login-with-email-disabled-test.js b/app/assets/javascripts/discourse/tests/acceptance/modal/login/login-with-email-disabled-test.js
similarity index 100%
rename from app/assets/javascripts/discourse/tests/acceptance/login-with-email-disabled-test.js
rename to app/assets/javascripts/discourse/tests/acceptance/modal/login/login-with-email-disabled-test.js
diff --git a/app/assets/javascripts/discourse/tests/acceptance/login-with-email-test.js b/app/assets/javascripts/discourse/tests/acceptance/modal/login/login-with-email-test.js
similarity index 100%
rename from app/assets/javascripts/discourse/tests/acceptance/login-with-email-test.js
rename to app/assets/javascripts/discourse/tests/acceptance/modal/login/login-with-email-test.js