update

learningequality · Dec 13, 2024 · b5dceb1 · b5dceb1
1 parent 40e2926
commit b5dceb1
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>