A11Y: makes aria-owns an ID and not a data attribute (#12075)

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

@@ -776,10 +776,10 @@ export default Component.extend(
 
       if (!this.popper) {
         const anchor = document.querySelector(
-          `[data-select-kit-id=${this.selectKit.uniqueID}-header]`
+          `#${this.selectKit.uniqueID}-header`
         );
         const popper = document.querySelector(
-          `[data-select-kit-id=${this.selectKit.uniqueID}-body]`
+          `#${this.selectKit.uniqueID}-body`
         );
 
         const inModal = $(this.element).parents("#discourse-modal").length;
@@ -954,15 +954,11 @@ export default Component.extend(
     },
 
     getFilterInput() {
-      return document.querySelector(
+      return document.querySelector(`#${this.selectKit.uniqueID}-filter input`);
-        `[data-select-kit-id=${this.selectKit.uniqueID}-filter] input`
-      );
     },
 
     getHeader() {
-      return document.querySelector(
+      return document.querySelector(`#${this.selectKit.uniqueID}-header`);
-        `[data-select-kit-id=${this.selectKit.uniqueID}-header]`
-      );
     },
 
     handleDeprecations() {

app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-body.js

@@ -6,11 +6,8 @@ import layout from "select-kit/templates/components/select-kit/select-kit-body";
 export default Component.extend({
   layout,
   classNames: ["select-kit-body"],
-  attributeBindings: ["role", "selectKitId:data-select-kit-id"],
+  attributeBindings: ["role"],
   classNameBindings: ["emptyBody:empty-body"],
-  selectKitId: computed("selectKit.uniqueID", function () {
-    return `${this.selectKit.uniqueID}-body`;
-  }),
   emptyBody: computed("selectKit.{filter,hasNoContent}", function () {
     return !this.selectKit.filter && this.selectKit.hasNoContent;
   }),
@@ -50,7 +47,7 @@ export default Component.extend({
     }
 
     const headerElement = document.querySelector(
-      `[data-select-kit-id=${this.selectKit.uniqueID}-header]`
+      `#${this.selectKit.uniqueID}-header`
     );
 
     if (headerElement && headerElement.contains(event.target)) {

app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-filter.js

@@ -11,10 +11,7 @@ export default Component.extend(UtilsMixin, {
   layout,
   classNames: ["select-kit-filter"],
   classNameBindings: ["isExpanded:is-expanded"],
-  attributeBindings: ["role", "selectKitId:data-select-kit-id"],
+  attributeBindings: ["role"],
-  selectKitId: computed("selectKit.uniqueID", function () {
-    return `${this.selectKit.uniqueID}-filter`;
-  }),
 
   role: "searchbox",
 

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

@@ -28,7 +28,6 @@ export default Component.extend(UtilsMixin, {
     "ariaOwns:aria-owns",
     "ariaHasPopup:aria-haspopup",
     "ariaIsExpanded:aria-expanded",
-    "selectKitId:data-select-kit-id",
     "roleButton:role",
     "selectedValue:data-value",
     "selectedNames:data-name",
@@ -63,10 +62,6 @@ export default Component.extend(UtilsMixin, {
     return icon.concat(icons).filter(Boolean);
   }),
 
-  selectKitId: computed("selectKit.uniqueID", function () {
-    return `${this.selectKit.uniqueID}-header`;
-  }),
-
   ariaIsExpanded: computed("selectKit.isExpanded", function () {
     return this.selectKit.isExpanded ? "true" : "false";
   }),
@@ -74,7 +69,7 @@ export default Component.extend(UtilsMixin, {
   ariaHasPopup: "menu",
 
   ariaOwns: computed("selectKit.uniqueID", function () {
-    return `[data-select-kit-id=${this.selectKit.uniqueID}-body]`;
+    return `${this.selectKit.uniqueID}-body`;
   }),
 
   roleButton: "button",
@@ -178,7 +173,7 @@ export default Component.extend(UtilsMixin, {
 
   _focusFilterInput() {
     const filterContainer = document.querySelector(
-      `[data-select-kit-id=${this.selectKit.uniqueID}-filter]`
+      `#${this.selectKit.uniqueID}-filter`
     );
 
     if (filterContainer) {

app/assets/javascripts/select-kit/addon/templates/components/email-group-user-chooser-header.hbs

@@ -16,6 +16,7 @@
     <div class="choice input-wrapper">
       {{component selectKit.options.filterComponent
         selectKit=selectKit
+        id=(concat selectKit.uniqueID "-filter")
       }}
     </div>
   {{/unless}}

app/assets/javascripts/select-kit/addon/templates/components/multi-select.hbs

@@ -4,9 +4,10 @@
     value=value
     selectedContent=selectedContent
     selectKit=selectKit
+    id=(concat selectKit.uniqueID "-header")
   }}
 
-  {{#select-kit/select-kit-body selectKit=selectKit}}
+  {{#select-kit/select-kit-body selectKit=selectKit id=(concat selectKit.uniqueID "-body")}}
     {{#if selectKit.isLoading}}
       <span class="is-loading">
         {{loading-spinner size="small"}}

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

@@ -11,6 +11,7 @@
     <div class="choice input-wrapper">
       {{component selectKit.options.filterComponent
         selectKit=selectKit
+        id=(concat selectKit.uniqueID "-filter")
       }}
     </div>
   {{/unless}}

app/assets/javascripts/select-kit/addon/templates/components/single-select.hbs

@@ -4,10 +4,11 @@
     value=value
     selectedContent=selectedContent
     selectKit=selectKit
+    id=(concat selectKit.uniqueID "-header")
   }}
 
-  {{#select-kit/select-kit-body selectKit=selectKit}}
+  {{#select-kit/select-kit-body selectKit=selectKit id=(concat selectKit.uniqueID "-body")}}
-    {{component selectKit.options.filterComponent selectKit=selectKit}}
+    {{component selectKit.options.filterComponent selectKit=selectKit id=(concat selectKit.uniqueID "-filter")}}
 
     {{#if selectKit.isLoading}}
       <span class="is-loading">