fix(menu): solve a11y keyboard navigation issues

oruga-ui · Feb 28, 2025 · c71265e · c71265e
1 parent 2e263fa
commit c71265e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/packages/oruga/src/components/menu/Menu.vue b/packages/oruga/src/components/menu/Menu.vue
@@ -217,6 +217,10 @@ function isItemViable(item: MenuChildItem<T>): boolean {
     );
 }
 
+function onFocusOut(): void {
+    focusedItem.value = undefined;
+}
+
 // #endregion --- Focus Feature ---
 
 // #region --- Computed Component Classes ---
@@ -231,7 +235,11 @@ const labelClasses = defineClasses(["labelClass", "o-menu__label"]);
 </script>
 
 <template>
-    <nav ref="rootElement" data-oruga="menu" :class="rootClasses">
+    <nav
+        ref="rootElement"
+        data-oruga="menu"
+        :class="rootClasses"
+        @focusout="onFocusOut">
         <div v-if="label || $slots.label" :id="labelId" :class="labelClasses">
             <!-- 
                 @slot Override icon and label
@@ -263,8 +271,8 @@ const labelClasses = defineClasses(["labelClass", "o-menu__label"]);
             :aria-labelledby="labelId"
             @keydown.left="onCollapse"
             @keydown.right="onExpend"
-            @keydown.enter="onEnter"
-            @keydown.space="onEnter"
+            @keydown.enter.prevent="onEnter"
+            @keydown.space.prevent="onEnter"
             @keydown.up.prevent="onUpPressed"
             @keydown.down.prevent="onDownPressed"
             @keydown.home.prevent="onHomePressed"

diff --git a/packages/oruga/src/components/menu/MenuItem.vue b/packages/oruga/src/components/menu/MenuItem.vue
@@ -218,8 +218,9 @@ const submenuClasses = defineClasses([
             :aria-disabled="disabled || parent.disabled"
             :aria-expanded="hasChildren ? isExpanded : undefined"
             :aria-owns="hasChildren ? submenuId : undefined"
-            @keyup.enter="selectItem"
-            @click="selectItem">
+            @click="selectItem"
+            @keydown.enter="selectItem"
+            @keydown.space="selectItem">
             <o-icon
                 v-if="icon"
                 :icon="icon"

diff --git a/packages/oruga/src/components/menu/examples/links.vue b/packages/oruga/src/components/menu/examples/links.vue
@@ -1,6 +1,6 @@
 <template>
     <section>
-        <o-menu>
+        <o-menu label="Links">
             <o-menu-item
                 label="Github"
                 icon="link"