From 323a5f22e7f4fa70a58f423aa45d704d49ac3c02 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Mon, 15 Feb 2021 18:22:10 +0100
Subject: [PATCH] A11Y: makes select-kit header a listbox (#12078)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Note that for now pressing enter doesn’t make anything, this is awaiting another change.
---
 .../addon/components/select-kit/select-kit-header.js          | 4 ++--
 .../select-kit/addon/templates/components/selected-name.hbs   | 2 +-
 app/assets/stylesheets/common/select-kit/select-kit.scss      | 4 ++++
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-header.js b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-header.js
index 3592630a83d..2525e43af58 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-header.js
+++ b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-header.js
@@ -28,7 +28,7 @@ export default Component.extend(UtilsMixin, {
     "ariaOwns:aria-owns",
     "ariaHasPopup:aria-haspopup",
     "ariaIsExpanded:aria-expanded",
-    "roleButton:role",
+    "headerRole:role",
     "selectedValue:data-value",
     "selectedNames:data-name",
     "buttonTitle:title",
@@ -72,7 +72,7 @@ export default Component.extend(UtilsMixin, {
     return `${this.selectKit.uniqueID}-body`;
   }),
 
-  roleButton: "button",
+  headerRole: "listbox",
 
   tabindex: 0,
 
diff --git a/app/assets/javascripts/select-kit/addon/templates/components/selected-name.hbs b/app/assets/javascripts/select-kit/addon/templates/components/selected-name.hbs
index ce54cca8ea4..5a6ffd0466b 100644
--- a/app/assets/javascripts/select-kit/addon/templates/components/selected-name.hbs
+++ b/app/assets/javascripts/select-kit/addon/templates/components/selected-name.hbs
@@ -1,5 +1,5 @@
 {{#if selectKit.options.showFullTitle}}
-  <div role="button" lang={{lang}} {{action "onSelectedNameClick"}} title={{title}} data-value={{value}} data-name={{name}} class="select-kit-selected-name selected-name choice">
+  <div tabindex="0" role="button" lang={{lang}} {{action "onSelectedNameClick"}} title={{title}} data-value={{value}} data-name={{name}} class="select-kit-selected-name selected-name choice">
     {{#if item.icon}}
       {{d-icon item.icon}}
     {{/if}}
diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
index 762d8339399..9c504d23d9a 100644
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@@ -72,6 +72,10 @@
       display: flex;
       outline: none;
 
+      &:focus .d-icon-times {
+        color: var(--danger);
+      }
+
       .d-icon + .name {
         margin-left: 0.5em;
       }