diff --git a/lib/KDropdownMenu.vue b/lib/KDropdownMenu.vue index 625b40b37..d9a6013bc 100644 --- a/lib/KDropdownMenu.vue +++ b/lib/KDropdownMenu.vue @@ -149,6 +149,7 @@ this.lastFocusElement = document.activeElement; this.$nextTick(() => this.$nextTick(() => this.setFocus())); window.addEventListener('keydown', this.handleOpenMenuNavigation, true); + this.$parent.isMenuExpanded = true; }, setFocus() { this.$refs.menu.$el.querySelector('li').focus(); @@ -166,7 +167,7 @@ this.lastFocusElement.focus(); } } - + this.$parent.isMenuExpanded = 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 6b724fba3..0554f642d 100644 --- a/lib/buttons-and-links/KButton.vue +++ b/lib/buttons-and-links/KButton.vue @@ -9,7 +9,7 @@ :disabled="disabled" tabindex="0" :aria-haspopup="hasMenuSlot ? 'menu' : undefined" - :aria-expanded="hasMenuSlot ? String(isExpanded) : undefined" + :aria-expanded="hasMenuSlot ? String(isMenuExpanded) : undefined" @click="handleClick" @keyup.enter.stop.prevent="handlePressEnter" @mouseenter="hovering = true" @@ -116,7 +116,7 @@ data() { return { hovering: false, - isExpanded: false, + isMenuExpanded: false, }; }, computed: { @@ -166,7 +166,7 @@ handleClick(event) { this.blurWhenClicked(); if (this.hasMenuSlot) { - this.isExpanded = !this.isExpanded; + this.isMenuExpanded = !this.isMenuExpanded; } /** * Emitted when the button is triggered @@ -189,9 +189,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 e1d8033c8..0b70a8603 100644 --- a/lib/buttons-and-links/KIconButton.vue +++ b/lib/buttons-and-links/KIconButton.vue @@ -22,7 +22,9 @@ - +