From a0fbccf61280a7391caf3e28a6ad31451749086b Mon Sep 17 00:00:00 2001
From: Martin Brennan <mjrbrennan@gmail.com>
Date: Fri, 3 Sep 2021 09:42:56 +1000
Subject: [PATCH] Revert "A11Y: Improve create account modal for screen readers
 (#14204)" (#14233)

This reverts commit e0d2de73d89cdea13e9681b2daaa52074ee510a5.
---
 app/assets/javascripts/discourse-loader.js    |  3 -
 .../discourse/app/components/d-modal-body.js  | 25 ++----
 .../discourse/app/components/d-modal.js       | 18 ++--
 .../app/controllers/create-account.js         | 30 +++----
 .../discourse/app/controllers/login.js        |  5 +-
 .../ember-input-component-extension.js        | 11 ---
 .../discourse/app/lib/show-modal.js           |  4 -
 .../discourse/app/mixins/name-validation.js   |  8 +-
 .../app/mixins/password-validation.js         | 10 +--
 .../app/mixins/username-validation.js         |  8 +-
 .../discourse/app/models/login-method.js      |  5 --
 .../discourse/app/routes/application.js       | 13 +--
 .../app/templates/components/d-modal.hbs      |  2 +-
 .../templates/components/login-buttons.hbs    |  2 +-
 .../discourse/app/templates/modal.hbs         |  1 -
 .../app/templates/modal/create-account.hbs    | 82 ++++++-------------
 .../create-account-user-fields-test.js        |  8 +-
 app/assets/stylesheets/common/base/login.scss |  5 +-
 config/locales/client.en.yml                  |  6 --
 19 files changed, 69 insertions(+), 177 deletions(-)
 delete mode 100644 app/assets/javascripts/discourse/app/initializers/ember-input-component-extension.js

diff --git a/app/assets/javascripts/discourse-loader.js b/app/assets/javascripts/discourse-loader.js
index 54cef936e60..f903dbe4918 100644
--- a/app/assets/javascripts/discourse-loader.js
+++ b/app/assets/javascripts/discourse-loader.js
@@ -163,9 +163,6 @@ var define, requirejs;
       "@ember/object/internals": {
         guidFor: Ember.guidFor,
       },
-      "@ember/views/text-support": {
-        default: Ember.TextSupport,
-      },
       I18n: {
         // eslint-disable-next-line
         default: I18n,
diff --git a/app/assets/javascripts/discourse/app/components/d-modal-body.js b/app/assets/javascripts/discourse/app/components/d-modal-body.js
index 1e46c4442a8..2ea7d11324d 100644
--- a/app/assets/javascripts/discourse/app/components/d-modal-body.js
+++ b/app/assets/javascripts/discourse/app/components/d-modal-body.js
@@ -8,10 +8,7 @@ export default Component.extend({
 
   didInsertElement() {
     this._super(...arguments);
-    this._modalAlertElement = document.getElementById("modal-alert");
-    if (this._modalAlertElement) {
-      this._modalAlertElement.innerHTML = "";
-    }
+    $("#modal-alert").hide();
 
     let fixedParent = $(this.element).closest(".d-modal.fixed-modal");
     if (fixedParent.length) {
@@ -58,10 +55,10 @@ export default Component.extend({
   },
 
   _clearFlash() {
-    if (this._modalAlertElement) {
-      this._modalAlertElement.innerHTML = "";
-      this._modalAlertElement.classList.remove(
-        "alert",
+    const modalAlert = document.getElementById("modal-alert");
+    if (modalAlert) {
+      modalAlert.style.display = "none";
+      modalAlert.classList.remove(
         "alert-error",
         "alert-info",
         "alert-success",
@@ -72,14 +69,10 @@ export default Component.extend({
 
   _flash(msg) {
     this._clearFlash();
-    if (!this._modalAlertElement) {
-      return;
-    }
 
-    this._modalAlertElement.classList.add(
-      "alert",
-      `alert-${msg.messageClass || "success"}`
-    );
-    this._modalAlertElement.innerHTML = msg.text || "";
+    $("#modal-alert")
+      .addClass(`alert alert-${msg.messageClass || "success"}`)
+      .html(msg.text || "")
+      .fadeIn();
   },
 });
diff --git a/app/assets/javascripts/discourse/app/components/d-modal.js b/app/assets/javascripts/discourse/app/components/d-modal.js
index 941a0ca556e..a08ec543e95 100644
--- a/app/assets/javascripts/discourse/app/components/d-modal.js
+++ b/app/assets/javascripts/discourse/app/components/d-modal.js
@@ -1,7 +1,8 @@
+import { computed } from "@ember/object";
 import Component from "@ember/component";
 import I18n from "I18n";
 import { next, schedule } from "@ember/runloop";
-import discourseComputed, { bind, on } from "discourse-common/utils/decorators";
+import { bind, on } from "discourse-common/utils/decorators";
 
 export default Component.extend({
   classNameBindings: [
@@ -20,7 +21,6 @@ export default Component.extend({
   submitOnEnter: true,
   dismissable: true,
   title: null,
-  titleAriaElementId: null,
   subtitle: null,
   role: "dialog",
   headerClass: null,
@@ -41,17 +41,9 @@ export default Component.extend({
   // Inform screenreaders of the modal
   "aria-modal": "true",
 
-  @discourseComputed("title", "titleAriaElementId")
-  ariaLabelledby(title, titleAriaElementId) {
-    if (titleAriaElementId) {
-      return titleAriaElementId;
-    }
-    if (title) {
-      return "discourse-modal-title";
-    }
-
-    return;
-  },
+  ariaLabelledby: computed("title", function () {
+    return this.title ? "discourse-modal-title" : null;
+  }),
 
   @on("didInsertElement")
   setUp() {
diff --git a/app/assets/javascripts/discourse/app/controllers/create-account.js b/app/assets/javascripts/discourse/app/controllers/create-account.js
index b58957450dc..52a3f7230a7 100644
--- a/app/assets/javascripts/discourse/app/controllers/create-account.js
+++ b/app/assets/javascripts/discourse/app/controllers/create-account.js
@@ -140,19 +140,16 @@ export default Controller.extend(
       "serverAccountEmail",
       "serverEmailValidation",
       "accountEmail",
-      "rejectedEmails.[]",
-      "forceValidationReason"
+      "rejectedEmails.[]"
     )
     emailValidation(
       serverAccountEmail,
       serverEmailValidation,
       email,
-      rejectedEmails,
-      forceValidationReason
+      rejectedEmails
     ) {
       const failedAttrs = {
         failed: true,
-        ok: false,
         element: document.querySelector("#new-account-email"),
       };
 
@@ -165,9 +162,6 @@ export default Controller.extend(
         return EmberObject.create(
           Object.assign(failedAttrs, {
             message: I18n.t("user.email.required"),
-            reason: forceValidationReason
-              ? I18n.t("user.email.required")
-              : null,
           })
         );
       }
@@ -432,7 +426,6 @@ export default Controller.extend(
       createAccount() {
         this.clearFlash();
 
-        this.set("forceValidationReason", true);
         const validation = [
           this.emailValidation,
           this.usernameValidation,
@@ -442,22 +435,23 @@ export default Controller.extend(
         ].find((v) => v.failed);
 
         if (validation) {
+          if (validation.message) {
+            this.flash(validation.message, "error");
+          }
+
           const element = validation.element;
-          if (element) {
-            if (element.tagName === "DIV") {
-              if (element.scrollIntoView) {
-                element.scrollIntoView();
-              }
-              element.click();
-            } else {
-              element.focus();
+          if (element.tagName === "DIV") {
+            if (element.scrollIntoView) {
+              element.scrollIntoView();
             }
+            element.click();
+          } else {
+            element.focus();
           }
 
           return;
         }
 
-        this.set("forceValidationReason", false);
         this.performAccountCreation();
       },
     },
diff --git a/app/assets/javascripts/discourse/app/controllers/login.js b/app/assets/javascripts/discourse/app/controllers/login.js
index a3a8934e522..fe6b32b757a 100644
--- a/app/assets/javascripts/discourse/app/controllers/login.js
+++ b/app/assets/javascripts/discourse/app/controllers/login.js
@@ -428,10 +428,7 @@ export default Controller.extend(ModalFunctionality, {
     });
 
     next(() => {
-      showModal("createAccount", {
-        modalClass: "create-account",
-        titleAriaElementId: "create-account-title",
-      });
+      showModal("createAccount", { modalClass: "create-account" });
     });
   },
 });
diff --git a/app/assets/javascripts/discourse/app/initializers/ember-input-component-extension.js b/app/assets/javascripts/discourse/app/initializers/ember-input-component-extension.js
deleted file mode 100644
index c909a4e86dd..00000000000
--- a/app/assets/javascripts/discourse/app/initializers/ember-input-component-extension.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import TextSupport from "@ember/views/text-support";
-
-export default {
-  name: "ember-input-component-extensions",
-
-  initialize() {
-    TextSupport.reopen({
-      attributeBindings: ["aria-describedby", "aria-invalid"],
-    });
-  },
-};
diff --git a/app/assets/javascripts/discourse/app/lib/show-modal.js b/app/assets/javascripts/discourse/app/lib/show-modal.js
index dde3094b315..db3067fbcf5 100644
--- a/app/assets/javascripts/discourse/app/lib/show-modal.js
+++ b/app/assets/javascripts/discourse/app/lib/show-modal.js
@@ -47,10 +47,6 @@ export default function (name, opts) {
     modalController.set("title", null);
   }
 
-  if (opts.titleAriaElementId) {
-    modalController.set("titleAriaElementId", opts.titleAriaElementId);
-  }
-
   if (opts.panels) {
     modalController.setProperties({
       panels: opts.panels,
diff --git a/app/assets/javascripts/discourse/app/mixins/name-validation.js b/app/assets/javascripts/discourse/app/mixins/name-validation.js
index 65287c97325..52623f537e3 100644
--- a/app/assets/javascripts/discourse/app/mixins/name-validation.js
+++ b/app/assets/javascripts/discourse/app/mixins/name-validation.js
@@ -15,14 +15,12 @@ export default Mixin.create({
   },
 
   // Validate the name.
-  @discourseComputed("accountName", "forceValidationReason")
-  nameValidation(accountName, forceValidationReason) {
-    if (this.siteSettings.full_name_required && isEmpty(accountName)) {
+  @discourseComputed("accountName")
+  nameValidation() {
+    if (this.siteSettings.full_name_required && isEmpty(this.accountName)) {
       return EmberObject.create({
         failed: true,
-        ok: false,
         message: I18n.t("user.name.required"),
-        reason: forceValidationReason ? I18n.t("user.name.required") : null,
         element: document.querySelector("#new-account-name"),
       });
     }
diff --git a/app/assets/javascripts/discourse/app/mixins/password-validation.js b/app/assets/javascripts/discourse/app/mixins/password-validation.js
index eea9b942de3..feb020cbf7a 100644
--- a/app/assets/javascripts/discourse/app/mixins/password-validation.js
+++ b/app/assets/javascripts/discourse/app/mixins/password-validation.js
@@ -33,8 +33,7 @@ export default Mixin.create({
     "rejectedPasswords.[]",
     "accountUsername",
     "accountEmail",
-    "passwordMinLength",
-    "forceValidationReason"
+    "passwordMinLength"
   )
   passwordValidation(
     password,
@@ -42,12 +41,10 @@ export default Mixin.create({
     rejectedPasswords,
     accountUsername,
     accountEmail,
-    passwordMinLength,
-    forceValidationReason
+    passwordMinLength
   ) {
     const failedAttrs = {
       failed: true,
-      ok: false,
       element: document.querySelector("#new-account-password"),
     };
 
@@ -70,9 +67,6 @@ export default Mixin.create({
       return EmberObject.create(
         Object.assign(failedAttrs, {
           message: I18n.t("user.password.required"),
-          reason: forceValidationReason
-            ? I18n.t("user.password.required")
-            : null,
         })
       );
     }
diff --git a/app/assets/javascripts/discourse/app/mixins/username-validation.js b/app/assets/javascripts/discourse/app/mixins/username-validation.js
index 522b40ad5f0..b8f14bc818d 100644
--- a/app/assets/javascripts/discourse/app/mixins/username-validation.js
+++ b/app/assets/javascripts/discourse/app/mixins/username-validation.js
@@ -11,7 +11,6 @@ function failedResult(attrs) {
   let result = EmberObject.create({
     shouldCheck: false,
     failed: true,
-    ok: false,
     element: document.querySelector("#new-account-username"),
   });
   result.setProperties(attrs);
@@ -61,12 +60,7 @@ export default Mixin.create({
     }
 
     if (isEmpty(username)) {
-      return failedResult({
-        message: I18n.t("user.username.required"),
-        reason: this.forceValidationReason
-          ? I18n.t("user.username.required")
-          : null,
-      });
+      return failedResult({ message: I18n.t("user.username.required") });
     }
 
     if (username.length < this.siteSettings.min_username_length) {
diff --git a/app/assets/javascripts/discourse/app/models/login-method.js b/app/assets/javascripts/discourse/app/models/login-method.js
index bebb069b93d..efe7c438bc8 100644
--- a/app/assets/javascripts/discourse/app/models/login-method.js
+++ b/app/assets/javascripts/discourse/app/models/login-method.js
@@ -13,11 +13,6 @@ const LoginMethod = EmberObject.extend({
     return this.title_override || I18n.t(`login.${this.name}.title`);
   },
 
-  @discourseComputed
-  screenReaderTitle() {
-    return this.title_override || I18n.t(`login.${this.name}.sr_title`);
-  },
-
   @discourseComputed
   prettyName() {
     return this.pretty_name_override || I18n.t(`login.${this.name}.name`);
diff --git a/app/assets/javascripts/discourse/app/routes/application.js b/app/assets/javascripts/discourse/app/routes/application.js
index a283404cf58..4f9558c292f 100644
--- a/app/assets/javascripts/discourse/app/routes/application.js
+++ b/app/assets/javascripts/discourse/app/routes/application.js
@@ -267,18 +267,11 @@ const ApplicationRoute = DiscourseRoute.extend(OpenComposer, {
       const returnPath = encodeURIComponent(window.location.pathname);
       window.location = getURL("/session/sso?return_path=" + returnPath);
     } else {
-      this._autoLogin("createAccount", "create-account", {
-        signup: true,
-        titleAriaElementId: "create-account-title",
-      });
+      this._autoLogin("createAccount", "create-account", { signup: true });
     }
   },
 
-  _autoLogin(
-    modal,
-    modalClass,
-    { notAuto = null, signup = false, titleAriaElementId = null } = {}
-  ) {
+  _autoLogin(modal, modalClass, { notAuto = null, signup = false } = {}) {
     const methods = findAll();
 
     if (!this.siteSettings.enable_local_logins && methods.length === 1) {
@@ -286,7 +279,7 @@ const ApplicationRoute = DiscourseRoute.extend(OpenComposer, {
         signup: signup,
       });
     } else {
-      showModal(modal, { titleAriaElementId });
+      showModal(modal);
       this.controllerFor("modal").set("modalClass", modalClass);
       if (notAuto) {
         notAuto();
diff --git a/app/assets/javascripts/discourse/app/templates/components/d-modal.hbs b/app/assets/javascripts/discourse/app/templates/components/d-modal.hbs
index a0da06d06a7..7067f487ef8 100644
--- a/app/assets/javascripts/discourse/app/templates/components/d-modal.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/d-modal.hbs
@@ -30,7 +30,7 @@
         {{/if}}
       </div>
 
-      <div id="modal-alert" role="alert"></div>
+      <div id="modal-alert"></div>
 
       {{yield}}
 
diff --git a/app/assets/javascripts/discourse/app/templates/components/login-buttons.hbs b/app/assets/javascripts/discourse/app/templates/components/login-buttons.hbs
index c4e553f5b1d..bc2bc0aba98 100644
--- a/app/assets/javascripts/discourse/app/templates/components/login-buttons.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/login-buttons.hbs
@@ -1,5 +1,5 @@
 {{#each buttons as |b|}}
-  <button type="button" class="btn btn-social {{b.name}}" {{action externalLogin b}} aria-label={{b.screenReaderTitle}}>
+  <button type="button" class="btn btn-social {{b.name}}" {{action externalLogin b}}>
     {{#if b.isGoogle}}
       <svg class="fa d-icon d-icon-custom-google-oauth2 svg-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"><defs><path id="a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z"/><path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/><path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/><path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/></svg>
     {{else if b.icon}}
diff --git a/app/assets/javascripts/discourse/app/templates/modal.hbs b/app/assets/javascripts/discourse/app/templates/modal.hbs
index 44b6f315125..d266b5fc1f0 100644
--- a/app/assets/javascripts/discourse/app/templates/modal.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal.hbs
@@ -1,7 +1,6 @@
 {{#d-modal
   modalClass=modalClass
   title=title
-  titleAriaElementId=titleAriaElementId
   subtitle=subtitle
   panels=panels
   selectedPanel=selectedPanel
diff --git a/app/assets/javascripts/discourse/app/templates/modal/create-account.hbs b/app/assets/javascripts/discourse/app/templates/modal/create-account.hbs
index f8688d623be..c33f956d23f 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/create-account.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/create-account.hbs
@@ -1,12 +1,17 @@
 {{#create-account email=accountEmail disabled=submitDisabled action=(action "createAccount")}}
   {{#unless complete}}
     {{plugin-outlet name="create-account-before-modal-body"}}
-    {{#d-modal-body class=modalBodyClasses preventModalAlertHiding=true}}
+    {{#d-modal-body class=modalBodyClasses}}
       <div class="create-account-form">
-        <div class="login-welcome-header" id="create-account-title">
+        <div class="login-welcome-header">
           <h1 class="login-title">{{i18n "create_account.header_title"}}</h1> <img src={{wavingHandURL}} alt="" class="waving-hand">
           <p class="login-subheader">{{i18n "create_account.subheader_title"}}</p>
         </div>
+        {{#unless hasAuthOptions}}
+          <div class="create-account-login-buttons">
+            {{login-buttons externalLogin=(action "externalLogin")}}
+          </div>
+        {{/unless}}
         {{#if showCreateForm}}
 
           <div class="login-form">
@@ -17,18 +22,7 @@
                 </div>
               {{/if}}
               <div class="input-group create-account-email">
-                {{input
-                  type="email"
-                  disabled=emailDisabled
-                  value=accountEmail
-                  id="new-account-email"
-                  name="email"
-                  class=(value-entered accountEmail)
-                  autofocus="autofocus"
-                  focusOut=(action "checkEmailAvailability")
-                  aria-describedby="account-email-validation"
-                  aria-invalid=emailValidation.failed
-                }}
+                {{input type="email" disabled=emailDisabled value=accountEmail id="new-account-email" name="email" class=(value-entered accountEmail) autofocus="autofocus" focusOut=(action "checkEmailAvailability")}}
                 <label class="alt-placeholder" for="new-account-email">
                   {{i18n "user.email.title"}}
                   {{~#if userFields~}}
@@ -40,17 +34,8 @@
               </div>
 
               <div class="input-group">
-                {{input
-                  value=accountUsername
-                  disabled=usernameDisabled
-                  class=(value-entered accountUsername)
-                  id="new-account-username"
-                  name="username"
-                  maxlength=maxUsernameLength
-                  aria-describedby="username-validation"
-                  aria-invalid=usernameValidation.failed
-                  autocomplete="discourse"
-                }}
+                {{input value=accountUsername disabled=usernameDisabled class=(value-entered accountUsername) id="new-account-username" name="username" maxlength=maxUsernameLength
+                autocomplete="discourse"}}
                 <label class="alt-placeholder" for="new-account-username">
                   {{i18n "user.username.title"}}
                   {{~#if userFields~}}
@@ -64,14 +49,7 @@
 
               <div class="input-group">
                 {{#if fullnameRequired}}
-                  {{text-field
-                    disabled=nameDisabled
-                    value=accountName
-                    id="new-account-name"
-                    class=(value-entered accountName)
-                    aria-describedby="fullname-validation"
-                    aria-invalid=nameValidation.failed
-                  }}
+                  {{text-field disabled=nameDisabled value=accountName id="new-account-name" class=(value-entered accountName)}}
                   <label class="alt-placeholder" for="new-account-name">
                     {{i18n "user.name.title"}}
                     {{#if siteSettings.full_name_required}}
@@ -81,35 +59,26 @@
                     {{/if}}
                   </label>
 
-                  {{input-tip validation=nameValidation id="fullname-validation"}}
+                  {{input-tip validation=nameValidation}}
                   <span class="more-info">{{nameInstructions}}</span>
                 {{/if}}
               </div>
 
               {{plugin-outlet
-                  name="create-account-before-password"
-                  noTags=true
-                  args=(hash
-                    accountName=accountName
-                    accountUsername=accountUsername
-                    accountPassword=accountPassword
-                    userFields=userFields
-                    authOptions=authOptions
-                  )
+              name="create-account-before-password"
+                noTags=true
+                args=(hash
+                  accountName=accountName
+                  accountUsername=accountUsername
+                  accountPassword=accountPassword
+                  userFields=userFields
+                  authOptions=authOptions
+                )
               }}
 
               <div class="input-group">
                 {{#if passwordRequired}}
-                  {{password-field
-                    value=accountPassword
-                    class=(value-entered accountPassword)
-                    type="password"
-                    id="new-account-password"
-                    autocomplete="current-password"
-                    capsLockOn=capsLockOn
-                    aria-describedby="password-validation"
-                    aria-invalid=passwordValidation.failed
-                  }}
+                  {{password-field value=accountPassword class=(value-entered accountPassword) type="password" id="new-account-password" autocomplete="current-password" capsLockOn=capsLockOn}}
                   <label class="alt-placeholder" for="new-account-password">
                     {{i18n "user.password.title"}}
                     {{~#if userFields~}}
@@ -117,7 +86,7 @@
                     {{/if}}
                   </label>
 
-                  {{input-tip validation=passwordValidation id="password-validation"}}
+                  {{input-tip validation=passwordValidation}}
                   <span class="more-info">{{passwordInstructions}}</span>
                   <div class="caps-lock-warning {{unless capsLockOn " hidden"}}">
                     {{d-icon "exclamation-triangle"}} {{i18n "login.caps_lock_warning"}}
@@ -187,11 +156,6 @@
           {{plugin-outlet name="create-account-after-modal-footer" tagName=""}}
 
         {{/if}}
-        {{#unless hasAuthOptions}}
-          <div class="create-account-login-buttons">
-            {{login-buttons externalLogin=(action "externalLogin")}}
-          </div>
-        {{/unless}}
 
         {{#if skipConfirmation}}
           {{loading-spinner size="large"}}
diff --git a/app/assets/javascripts/discourse/tests/acceptance/create-account-user-fields-test.js b/app/assets/javascripts/discourse/tests/acceptance/create-account-user-fields-test.js
index a5548ab424a..02adf36a8de 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/create-account-user-fields-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/create-account-user-fields-test.js
@@ -2,6 +2,7 @@ import {
   acceptance,
   exists,
   query,
+  queryAll,
 } from "discourse/tests/helpers/qunit-helpers";
 import { click, fillIn, visit } from "@ember/test-helpers";
 import { test } from "qunit";
@@ -38,8 +39,9 @@ acceptance("Create Account - User Fields", function (needs) {
     assert.ok(exists(".user-field"), "it has at least one user field");
 
     await click(".modal-footer .btn-primary");
+    assert.ok(exists("#modal-alert"), "it shows the required field alert");
     assert.equal(
-      query("#account-email-validation").innerText.trim(),
+      queryAll("#modal-alert").text(),
       "Please enter an email address"
     );
 
@@ -61,8 +63,12 @@ acceptance("Create Account - User Fields", function (needs) {
     );
 
     await click(".modal-footer .btn-primary");
+    assert.equal(query("#modal-alert").style.display, "");
+
     await fillIn(".user-field input[type=text]:nth-of-type(1)", "Barky");
     await click(".user-field input[type=checkbox]");
+
     await click(".modal-footer .btn-primary");
+    assert.equal(query("#modal-alert").style.display, "none");
   });
 });
diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss
index 1fa25dedf8f..16544563415 100644
--- a/app/assets/stylesheets/common/base/login.scss
+++ b/app/assets/stylesheets/common/base/login.scss
@@ -60,10 +60,7 @@
     min-height: 35px;
   }
   #modal-alert:empty {
-    min-height: 0px;
-    padding: 0px;
-    overflow: hidden;
-    display: inline;
+    display: none;
   }
   .login-welcome-header {
     z-index: z("modal", "content");
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index f531052cad7..06ce6dc9f17 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -1897,27 +1897,21 @@ en:
       google_oauth2:
         name: "Google"
         title: "with Google"
-        sr_title: "Login with Google"
       twitter:
         name: "Twitter"
         title: "with Twitter"
-        sr_title: "Login with Twitter"
       instagram:
         name: "Instagram"
         title: "with Instagram"
-        sr_title: "Login with Instagram"
       facebook:
         name: "Facebook"
         title: "with Facebook"
-        sr_title: "Login with Facebook"
       github:
         name: "GitHub"
         title: "with GitHub"
-        sr_title: "Login with GitHub"
       discord:
         name: "Discord"
         title: "with Discord"
-        sr_title: "Login with Discord"
       second_factor_toggle:
         totp: "Use an authenticator app instead"
         backup_code: "Use a backup code instead"