A11Y: correctly sets a name on combo-boxes for single selects (#12009)

app/assets/javascripts/discourse/tests/integration/components/select-kit/single-select-test.js

@@ -418,5 +418,33 @@ discourseModule(
         );
       },
     });
+
+    componentTest("name", {
+      template: hbs`{{single-select value=value content=content}}`,
+
+      beforeEach() {
+        this.setProperties({
+          content: [{ id: 1, name: "john" }],
+          value: null,
+        });
+      },
+
+      async test(assert) {
+        assert.equal(
+          this.subject.header().el()[0].getAttribute("name"),
+          I18n.t("select_kit.select_to_filter")
+        );
+
+        await this.subject.expand();
+        await this.subject.selectRowByValue(1);
+
+        assert.equal(
+          this.subject.header().el()[0].getAttribute("name"),
+          I18n.t("select_kit.filter_by", {
+            name: this.content.firstObject.name,
+          })
+        );
+      },
+    });
   }
 );

app/assets/javascripts/select-kit/addon/components/select-kit/single-select-header.js

@@ -1,11 +1,23 @@
+import { computed } from "@ember/object";
 import SelectKitHeaderComponent from "select-kit/components/select-kit/select-kit-header";
 import UtilsMixin from "select-kit/mixins/utils";
 import layout from "select-kit/templates/components/select-kit/single-select-header";
+import I18n from "I18n";
 
 export default SelectKitHeaderComponent.extend(UtilsMixin, {
   layout,
   classNames: ["single-select-header"],
-  attributeBindings: ["role"],
+  attributeBindings: ["role", "name"],
 
   role: "combobox",
+
+  name: computed("selectedContent.name", function () {
+    if (this.selectedContent) {
+      return I18n.t("select_kit.filter_by", {
+        name: this.selectedContent.name,
+      });
+    } else {
+      return I18n.t("select_kit.select_to_filter");
+    }
+  }),
 });

config/locales/client.en.yml

@@ -1829,6 +1829,8 @@ en:
         other: "+ %{count} subcategories"
 
     select_kit:
+      filter_by: "Filter by: %{name}"
+      select_to_filter: "Select a value to filter"
       default_header_text: Select...
       no_content: No matches found
       filter_placeholder: Search...