Revert "A11Y: Improve create account modal for screen readers (#14204)" (#14233)

Revert “A11Y: Improve create account modal for screen readers (#14204)” (#14233)

This reverts commit e0d2de73d89cdea13e9681b2daaa52074ee510a5.

diff --git a/app/assets/javascripts/discourse-loader.js b/app/assets/javascripts/discourse-loader.js
index 54cef93..f903dbe 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 1e46c44..2ea7d11 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 941a0ca..a08ec54 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 b589574..52a3f72 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 a3a8934..fe6b32b 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 c909a4e..0000000
--- 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 dde3094..db3067f 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 65287c9..52623f5 100644

[... diff too long, it was truncated ...]

GitHub sha: a0fbccf61280a7391caf3e28a6ad31451749086b

This commit appears in #14233 which was approved by tshenry. It was merged by martin.