From 365abb7f6f752da0bdd02aa227419c292c4fccc8 Mon Sep 17 00:00:00 2001
From: Maksym Portianoi <maksym.portianoi@konghq.com>
Date: Wed, 7 Aug 2024 13:00:11 -0400
Subject: [PATCH] fix(kdropdown): trigger element aria-label [KHCP-12832]
 (#2326)

---
 sandbox/pages/SandboxDropdown.vue      | 13 -------------
 src/components/KCard/KCard.vue         |  1 +
 src/components/KDropdown/KDropdown.vue |  1 +
 src/components/KPop/KPop.vue           | 19 ++++++++++++++-----
 4 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/sandbox/pages/SandboxDropdown.vue b/sandbox/pages/SandboxDropdown.vue
index 4e432ad4e5..e998a4720d 100644
--- a/sandbox/pages/SandboxDropdown.vue
+++ b/sandbox/pages/SandboxDropdown.vue
@@ -266,19 +266,6 @@
         is-subtitle
         title="Legacy"
       />
-      <SandboxSectionComponent
-        title="Prop: icon"
-      >
-        <KDropdown
-          icon="gear"
-          :items="[
-            { label: 'Home', to: { name: 'home' } },
-            { label: 'KAlert', to: { name: 'alert' } },
-            { label: 'Stay', to: { name: 'dropdown' } }
-          ]"
-          trigger-text="Icon prop"
-        />
-      </SandboxSectionComponent>
       <SandboxSectionComponent
         title="Props: label & appearance"
       >
diff --git a/src/components/KCard/KCard.vue b/src/components/KCard/KCard.vue
index da8af155d6..894b974e42 100644
--- a/src/components/KCard/KCard.vue
+++ b/src/components/KCard/KCard.vue
@@ -76,6 +76,7 @@ const showCardHeader = computed((): boolean => {
     justify-content: space-between;
 
     .card-title {
+      align-items: center;
       color: var(--kui-color-text, $kui-color-text);
       font-size: var(--kui-font-size-40, $kui-font-size-40);
       font-weight: var(--kui-font-weight-bold, $kui-font-weight-bold);
diff --git a/src/components/KDropdown/KDropdown.vue b/src/components/KDropdown/KDropdown.vue
index 23dfd3a2c1..ab9f22f0a1 100644
--- a/src/components/KDropdown/KDropdown.vue
+++ b/src/components/KDropdown/KDropdown.vue
@@ -30,6 +30,7 @@
               v-if="triggerButtonText"
               :appearance="appearance"
               class="dropdown-trigger-button"
+              data-dropdown-trigger="true"
               data-testid="dropdown-trigger-button"
               :disabled="disabled"
             >
diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index 9b41d64f92..0e84b1ab28 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -287,11 +287,20 @@ onMounted(() => {
     // we don't set any other click event listeners on purpose to avoid conflict of event listeners
     document?.addEventListener('click', clickHandler)
 
-    if (popoverTrigger.value && props.trigger === 'hover') {
-      popoverTrigger.value.addEventListener('mouseenter', showPopover)
-      popoverTrigger.value.addEventListener('focus', showPopover)
-      popoverTrigger.value.addEventListener('mouseleave', hidePopover)
-      popoverTrigger.value.addEventListener('blur', hidePopover)
+    if (popoverTrigger.value) {
+      // determine the element to bind aria-controls attribute to
+      // data-dropdown-trigger is used to determine the default (not slotted) KDropdown trigger
+      const ariaControlsElement = popoverTrigger.value.querySelector('button[data-dropdown-trigger="true"]') || popoverTrigger.value
+      if (!ariaControlsElement.hasAttribute('aria-controls')) {
+        ariaControlsElement.setAttribute('aria-controls', popoverId)
+      }
+
+      if (props.trigger === 'hover') {
+        popoverTrigger.value.addEventListener('mouseenter', showPopover)
+        popoverTrigger.value.addEventListener('focus', showPopover)
+        popoverTrigger.value.addEventListener('mouseleave', hidePopover)
+        popoverTrigger.value.addEventListener('blur', hidePopover)
+      }
     }
 
     if (popoverElement.value && props.trigger === 'hover') {