DEV: select-kit third major update with focus on accessibility (#13303)

Major changes included:
- better support for screen readers
- trapping focus in modals
- better tabbing order in composer
- alerts on no content found/number of items found
- better autofocus in modals
- mini-tag-chooser is now a multi-select component
- each multi-select-component will now display selection on one row

app/assets/javascripts/select-kit/addon/components/multi-select/format-selected-content.js

@@ -0,0 +1,22 @@
+import Component from "@ember/component";
+import { computed } from "@ember/object";
+import layout from "select-kit/templates/components/multi-select/format-selected-content";
+import { makeArray } from "discourse-common/lib/helpers";
+import UtilsMixin from "select-kit/mixins/utils";
+
+export default Component.extend(UtilsMixin, {
+  tagName: "",
+  layout,
+  content: null,
+  selectKit: null,
+
+  formatedContent: computed("content", function () {
+    if (this.content) {
+      return makeArray(this.content)
+        .map((c) => this.getName(c))
+        .join(", ");
+    } else {
+      return this.getName(this.selectKit.noneItem);
+    }
+  }),
+});

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

@@ -1,33 +1,21 @@
 import SelectKitHeaderComponent from "select-kit/components/select-kit/select-kit-header";
-import { computed } from "@ember/object";
 import layout from "select-kit/templates/components/multi-select/multi-select-header";
-import { makeArray } from "discourse-common/lib/helpers";
+import { computed } from "@ember/object";
+import { reads } from "@ember/object/computed";
 
 export default SelectKitHeaderComponent.extend({
+  tagName: "summary",
   classNames: ["multi-select-header"],
   layout,
 
-  selectedNames: computed("selectedContent", function () {
-    return makeArray(this.selectedContent).map((c) => this.getName(c));
-  }),
-
-  hasReachedMaximumSelection: computed("selectedValue", function () {
-    if (!this.selectKit.options.maximum) {
-      return false;
+  caretUpIcon: reads("selectKit.options.caretUpIcon"),
+  caretDownIcon: reads("selectKit.options.caretDownIcon"),
+  caretIcon: computed(
+    "selectKit.isExpanded",
+    "caretUpIcon",
+    "caretDownIcon",
+    function () {
+      return this.selectKit.isExpanded ? this.caretUpIcon : this.caretDownIcon;
     }
-
-    return this.selectedValue.length >= this.selectKit.options.maximum;
-  }),
-
-  selectedValue: computed("selectedContent", function () {
-    return makeArray(this.selectedContent)
-      .map((c) => {
-        if (this.getName(c) !== this.getName(this.selectKit.noneItem)) {
-          return this.getValue(c);
-        }
-
-        return null;
-      })
-      .filter(Boolean);
-  }),
+  ),
 });