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"
/>
-
-
-
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') {