From 40e2926ed2e7b11e3d3dcdca935dfd4e8009180a Mon Sep 17 00:00:00 2001
From: Joseph Avila Alvarez <josdavilalvarez@gmail.com>
Date: Sat, 7 Dec 2024 12:46:32 -0500
Subject: [PATCH 1/2] WIP

---
 docs/pages/kbutton.vue            | 17 +++++++++++++++++
 lib/buttons-and-links/KButton.vue | 13 +++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/docs/pages/kbutton.vue b/docs/pages/kbutton.vue
index d4c81d6f3..d060be5a0 100644
--- a/docs/pages/kbutton.vue
+++ b/docs/pages/kbutton.vue
@@ -53,6 +53,23 @@
           />
         </KButtonGroup>
       </DocsShow>
+      <p>
+        When using KButton with a dropdown menu, it automatically adds appropriate ARIA attributes:
+        <code>aria-haspopup="menu"</code> and <code>aria-expanded</code> for accessibility.
+      </p>
+      <DocsShow>
+        <KButton text="Dropdown Menu">
+          <template #menu>
+            <KDropdownMenu
+              :options="[
+                { label: 'Option 1', value: '1' },
+                { label: 'Option 2', value: '2' },
+                { label: 'Option 3', value: '3' }
+              ]"
+            />
+          </template>
+        </KButton>
+      </DocsShow>
     </DocsPageSection>
     <DocsPageSection
       title="Related"
diff --git a/lib/buttons-and-links/KButton.vue b/lib/buttons-and-links/KButton.vue
index 18b89cdc9..96b5b0b2d 100644
--- a/lib/buttons-and-links/KButton.vue
+++ b/lib/buttons-and-links/KButton.vue
@@ -8,6 +8,8 @@
     :type="type"
     :disabled="disabled"
     tabindex="0"
+    :aria-haspopup="hasMenuSlot ? 'menu' : undefined"
+    :aria-expanded="hasMenuSlot ? String(isExpanded) : undefined"
     @click="handleClick"
     @keyup.enter.stop.prevent="handlePressEnter"
     @mouseenter="hovering = true"
@@ -117,6 +119,7 @@
     data() {
       return {
         hovering: false,
+        isExpanded: false,
       };
     },
     computed: {
@@ -158,13 +161,20 @@
         }
         return { ...styles };
       },
+      hasMenuSlot() {
+        return !!this.$slots.menu;
+      },
     },
     methods: {
       handleClick(event) {
         this.blurWhenClicked();
+        if (this.hasMenuSlot) {
+          this.isExpanded = !this.isExpanded;
+        }
         /**
          * Emitted when the button is triggered
          */
+
         this.$emit('click', event);
       },
       handlePressEnter(event) {
@@ -182,6 +192,9 @@
           this.$el.blur();
         }
       },
+      setExpanded(expanded) {
+        this.isExpanded = expanded;
+      },
     },
   };
 

From b5dceb1ea8a0e725be095f184f98cdca98908254 Mon Sep 17 00:00:00 2001
From: Joseph Avila Alvarez <josdavilalvarez@gmail.com>
Date: Thu, 12 Dec 2024 22:49:32 -0500
Subject: [PATCH 2/2] update

---
 docs/pages/kbutton.vue                | 17 -----------------
 lib/KDropdownMenu.vue                 |  5 ++++-
 lib/buttons-and-links/KButton.vue     | 13 -------------
 lib/buttons-and-links/KIconButton.vue |  4 +++-
 4 files changed, 7 insertions(+), 32 deletions(-)

diff --git a/docs/pages/kbutton.vue b/docs/pages/kbutton.vue
index d060be5a0..d4c81d6f3 100644
--- a/docs/pages/kbutton.vue
+++ b/docs/pages/kbutton.vue
@@ -53,23 +53,6 @@
           />
         </KButtonGroup>
       </DocsShow>
-      <p>
-        When using KButton with a dropdown menu, it automatically adds appropriate ARIA attributes:
-        <code>aria-haspopup="menu"</code> and <code>aria-expanded</code> for accessibility.
-      </p>
-      <DocsShow>
-        <KButton text="Dropdown Menu">
-          <template #menu>
-            <KDropdownMenu
-              :options="[
-                { label: 'Option 1', value: '1' },
-                { label: 'Option 2', value: '2' },
-                { label: 'Option 3', value: '3' }
-              ]"
-            />
-          </template>
-        </KButton>
-      </DocsShow>
     </DocsPageSection>
     <DocsPageSection
       title="Related"
diff --git a/lib/KDropdownMenu.vue b/lib/KDropdownMenu.vue
index 426619456..83c59ae30 100644
--- a/lib/KDropdownMenu.vue
+++ b/lib/KDropdownMenu.vue
@@ -141,6 +141,8 @@
     },
     mounted() {
       this.trigger = this.$el.parentElement;
+      this.trigger.setAttribute('aria-haspopup', 'menu');
+      this.trigger.setAttribute('aria-expanded', false);
     },
     beforeDestroy() {
       window.removeEventListener('keydown', this.handleOpenMenuNavigation, true);
@@ -152,6 +154,7 @@
         await this.$nextTick();
         this.setFocus();
         window.addEventListener('keydown', this.handleOpenMenuNavigation, true);
+        this.trigger.setAttribute('aria-expanded', true);
       },
       setFocus() {
         this.$refs.menu.$el.querySelector('li').focus();
@@ -169,7 +172,7 @@
             this.lastFocusElement.focus();
           }
         }
-
+        this.trigger.setAttribute('aria-expanded', false);
         window.removeEventListener('keyup', this.handleKeyUp, true);
       },
       getNextFocusableSibling(focusedElement) {
diff --git a/lib/buttons-and-links/KButton.vue b/lib/buttons-and-links/KButton.vue
index 96b5b0b2d..18b89cdc9 100644
--- a/lib/buttons-and-links/KButton.vue
+++ b/lib/buttons-and-links/KButton.vue
@@ -8,8 +8,6 @@
     :type="type"
     :disabled="disabled"
     tabindex="0"
-    :aria-haspopup="hasMenuSlot ? 'menu' : undefined"
-    :aria-expanded="hasMenuSlot ? String(isExpanded) : undefined"
     @click="handleClick"
     @keyup.enter.stop.prevent="handlePressEnter"
     @mouseenter="hovering = true"
@@ -119,7 +117,6 @@
     data() {
       return {
         hovering: false,
-        isExpanded: false,
       };
     },
     computed: {
@@ -161,20 +158,13 @@
         }
         return { ...styles };
       },
-      hasMenuSlot() {
-        return !!this.$slots.menu;
-      },
     },
     methods: {
       handleClick(event) {
         this.blurWhenClicked();
-        if (this.hasMenuSlot) {
-          this.isExpanded = !this.isExpanded;
-        }
         /**
          * Emitted when the button is triggered
          */
-
         this.$emit('click', event);
       },
       handlePressEnter(event) {
@@ -192,9 +182,6 @@
           this.$el.blur();
         }
       },
-      setExpanded(expanded) {
-        this.isExpanded = expanded;
-      },
     },
   };
 
diff --git a/lib/buttons-and-links/KIconButton.vue b/lib/buttons-and-links/KIconButton.vue
index 79cb50bf1..0d1d5814d 100644
--- a/lib/buttons-and-links/KIconButton.vue
+++ b/lib/buttons-and-links/KIconButton.vue
@@ -26,7 +26,9 @@
       :style="iconStyles"
     />
     <!-- @slot Pass sub-components into the button, typically `KDropdownMenu` -->
-    <slot name="menu"></slot>
+    <template #menu>
+      <slot name="menu"></slot>
+    </template>
   </KButton>
 
 </template>