UX: flat-btn should also respond to Enter (#15584)

app/assets/javascripts/discourse/app/components/flat-button.js

@@ -14,7 +14,15 @@ export default Component.extend({
     }
   },
 
+  keyDown(event) {
+    if (event.key === "Enter") {
+      this.action?.();
+      return false;
+    }
+  },
+
   click() {
-    return this.attrs.action();
+    this.action?.();
+    return false;
   },
 });

app/assets/javascripts/discourse/tests/integration/components/flat-button-test.js

@@ -0,0 +1,47 @@
+import componentTest, {
+  setupRenderingTest,
+} from "discourse/tests/helpers/component-test";
+import { discourseModule } from "discourse/tests/helpers/qunit-helpers";
+import { click, triggerKeyEvent } from "@ember/test-helpers";
+import hbs from "htmlbars-inline-precompile";
+
+discourseModule("Integration | Component | flat-button", function (hooks) {
+  setupRenderingTest(hooks);
+
+  componentTest("press Enter", {
+    template: hbs`{{flat-button action=action}}`,
+
+    beforeEach() {
+      this.set("foo", null);
+      this.set("action", () => {
+        this.set("foo", "bar");
+      });
+    },
+
+    async test(assert) {
+      await triggerKeyEvent(".btn-flat", "keydown", 32);
+
+      assert.strictEqual(this.foo, null);
+
+      await triggerKeyEvent(".btn-flat", "keydown", 13);
+
+      assert.strictEqual(this.foo, "bar");
+    },
+  });
+  componentTest("click", {
+    template: hbs`{{flat-button action=action}}`,
+
+    beforeEach() {
+      this.set("foo", null);
+      this.set("action", () => {
+        this.set("foo", "bar");
+      });
+    },
+
+    async test(assert) {
+      await click(".btn-flat");
+
+      assert.strictEqual(this.foo, "bar");
+    },
+  });
+});