fix(kdropdown): trigger element aria-label [KHCP-12832] (#2326)

Kong · Aug 7, 2024 · 365abb7 · 365abb7
1 parent c16cc3b
commit 365abb7
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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') {