DEV: implements combobox roles for select-kit (#11769)

https://www.w3.org/TR/wai-aria-practices-1.1/#wai-aria-roles-states-and-properties-6

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

@@ -6,12 +6,14 @@ import layout from "select-kit/templates/components/select-kit/select-kit-body";
 export default Component.extend({
   layout,
   classNames: ["select-kit-body"],
-  attributeBindings: ["selectKitId:data-select-kit-id"],
+  attributeBindings: ["role", "selectKitId:data-select-kit-id"],
   selectKitId: computed("selectKit.uniqueID", function () {
     return `${this.selectKit.uniqueID}-body`;
   }),
   rootEventType: "click",
 
+  role: "listbox",
+
   init() {
     this._super(...arguments);
 

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

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

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

@@ -18,8 +18,10 @@ export default Component.extend(UtilsMixin, {
     "rowValue:data-value",
     "rowName:data-name",
     "ariaLabel:aria-label",
+    "ariaSelected:aria-selected",
     "guid:data-guid",
     "rowLang:lang",
+    "role",
   ],
   classNameBindings: [
     "isHighlighted",
@@ -45,6 +47,8 @@ export default Component.extend(UtilsMixin, {
     return this.rowValue === this.getValue(this.selectKit.noneItem);
   }),
 
+  role: "option",
+
   guid: computed("item", function () {
     return guidFor(this.item);
   }),
@@ -55,6 +59,10 @@ export default Component.extend(UtilsMixin, {
     return this.getProperty(this.item, "ariaLabel") || this.title;
   }),
 
+  ariaSelected: computed("isSelected", function () {
+    return this.isSelected ? "true" : "false";
+  }),
+
   title: computed("rowTitle", "item.title", "rowName", function () {
     return (
       this.rowTitle || this.getProperty(this.item, "title") || this.rowName

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

@@ -5,4 +5,7 @@ import layout from "select-kit/templates/components/select-kit/single-select-hea
 export default SelectKitHeaderComponent.extend(UtilsMixin, {
   layout,
   classNames: ["single-select-header"],
+  attributeBindings: ["role"],
+
+  role: "combobox",
 });

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

@@ -1,5 +1,5 @@
 {{#if selectKit.options.showFullTitle}}
-  <div lang={{lang}} {{action "onSelectedNameClick"}} tabindex="0" title={{title}} data-value={{value}} data-name={{name}} class="select-kit-selected-name selected-name choice">
+  <div role="textbox" lang={{lang}} {{action "onSelectedNameClick"}} tabindex="0" title={{title}} data-value={{value}} data-name={{name}} class="select-kit-selected-name selected-name choice">
     {{#if item.icon}}
       {{d-icon item.icon}}
     {{/if}}
@@ -23,7 +23,7 @@
   </div>
 {{else}}
   {{#if item.icon}}
-    <div lang={{lang}} tabindex="0" class="select-kit-selected-name selected-name choice">
+    <div role="textbox" lang={{lang}} tabindex="0" class="select-kit-selected-name selected-name choice">
       {{d-icon item.icon}}
     </div>
   {{/if}}