A11Y: deselect focused choice when using enter in multi-select (#12165)

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

@@ -137,7 +137,17 @@ export default SelectKitComponent.extend({
   }),
 
   _onKeydown(event) {
-    if (event.keyCode === 8) {
+    if (
+      event.code === "Enter" &&
+      event.target.classList.contains("selected-name")
+    ) {
+      event.stopPropagation();
+
+      this.selectKit.deselectByValue(event.target.dataset.value);
+      return false;
+    }
+
+    if (event.code === "Backspace") {
       event.stopPropagation();
 
       const input = this.getFilterInput();
@@ -149,19 +159,14 @@ export default SelectKitComponent.extend({
         if (selected.length) {
           const lastSelected = selected[selected.length - 1];
           if (lastSelected) {
-            if (lastSelected.classList.contains("is-highlighted")) {
+            if (lastSelected === document.activeElement) {
               this.deselect(this.selectedContent.lastObject);
             } else {
-              lastSelected.classList.add("is-highlighted");
+              lastSelected.focus();
             }
           }
         }
       }
-    } else {
-      const selected = this.element.querySelectorAll(
-        ".select-kit-header .choice.select-kit-selected-name"
-      );
-      selected.forEach((s) => s.classList.remove("is-highlighted"));
     }
 
     return true;

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

@@ -115,6 +115,7 @@ export default Component.extend(
           change: bind(this, this._onChangeWrapper),
           select: bind(this, this.select),
           deselect: bind(this, this.deselect),
+          deselectByValue: bind(this, this.deselectByValue),
           append: bind(this, this.append),
 
           onOpen: bind(this, this._onOpenWrapper),
@@ -544,6 +545,15 @@ export default Component.extend(
       this.selectKit.change(null, null);
     },
 
+    deselectByValue(value) {
+      if (!value) {
+        return;
+      }
+
+      const item = this.itemForValue(value, this.selectedContent);
+      this.deselect(item);
+    },
+
     append() {
       // do nothing on general case
     },

app/assets/stylesheets/common/select-kit/multi-select.scss

@@ -157,10 +157,6 @@
         &:hover .d-icon:last-child {
           color: var(--danger);
         }
-
-        &.is-highlighted {
-          box-shadow: 0 0 2px var(--danger), 0 1px 0 rgba(0, 0, 0, 0.05);
-        }
       }
     }
   }