A11Y: Make input popup errors keyboard-accessible (#18570)

Also sets focus to the nearest input when popups are dismissed.

app/assets/javascripts/discourse/app/components/popup-input-tip.js

@@ -5,13 +5,15 @@ import { getOwner } from "discourse-common/lib/get-owner";
 import { htmlSafe } from "@ember/template";
 
 export default Component.extend({
+  tagName: "a",
   classNameBindings: [":popup-tip", "good", "bad", "lastShownAt::hide"],
-  attributeBindings: ["role", "ariaLabel"],
+  attributeBindings: ["role", "ariaLabel", "tabindex"],
   rerenderTriggers: ["validation.reason"],
   tipReason: null,
   lastShownAt: or("shownAt", "validation.lastShownAt"),
   bad: reads("validation.failed"),
   good: not("bad"),
+  tabindex: "0",
 
   @discourseComputed("bad")
   role(bad) {
@@ -25,10 +27,21 @@ export default Component.extend({
     return reason?.replace(/(<([^>]+)>)/gi, "");
   },
 
-  click() {
+  dismiss() {
     this.set("shownAt", null);
     const composer = getOwner(this).lookup("controller:composer");
     composer.clearLastValidatedAt();
+    this.element.previousElementSibling?.focus();
+  },
+
+  click() {
+    this.dismiss();
+  },
+
+  keyDown(event) {
+    if (event.key === "Enter") {
+      this.dismiss();
+    }
   },
 
   didReceiveAttrs() {

app/assets/javascripts/discourse/tests/acceptance/composer-test.js

@@ -4,6 +4,7 @@ import {
   fillIn,
   settled,
   triggerEvent,
+  triggerKeyEvent,
   visit,
 } from "@ember/test-helpers";
 import { toggleCheckDraftPopup } from "discourse/controllers/composer";
@@ -176,16 +177,29 @@ acceptance("Composer", function (needs) {
 
     await click("#reply-control button.create");
     assert.ok(
-      !exists(".title-input .popup-tip.bad.hide"),
+      exists(".title-input .popup-tip.bad"),
       "it shows the empty title error"
     );
     assert.ok(
-      !exists(".d-editor-wrapper .popup-tip.bad.hide"),
+      exists(".d-editor-textarea-wrapper .popup-tip.bad"),
       "it shows the empty body error"
     );
 
     await fillIn("#reply-title", "this is my new topic title");
-    assert.ok(exists(".title-input .popup-tip.good"), "the title is now good");
+    assert.ok(
+      exists(".title-input .popup-tip.good.hide"),
+      "the title is now good"
+    );
+
+    await triggerKeyEvent(
+      ".d-editor-textarea-wrapper .popup-tip.bad",
+      "keydown",
+      "Enter"
+    );
+    assert.ok(
+      exists(".d-editor-textarea-wrapper .popup-tip.bad.hide"),
+      "body error is dismissed via keyboard"
+    );
 
     await fillIn(".d-editor-input", "this is the *content* of a post");
     assert.strictEqual(