Merge pull request #23 from primefaces/issue-21

Fixed #21 - MegaMenu | Update focus for accessibility
primefaces · Jul 11, 2023 · 78e0837 · 78e0837
2 parents 2ff9d05 + f871b3c
commit 78e0837
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 67 deletions.
diff --git a/theme-base/components/menu/_megamenu.scss b/theme-base/components/menu/_megamenu.scss
@@ -6,34 +6,11 @@
     border-radius: $borderRadius;
 
     .p-megamenu-root-list {  
-        > .p-menuitem {
-            > .p-menuitem-link {
-                @include horizontal-rootmenuitem-link();
-            }
-
-            &.p-menuitem-active {
-                > .p-menuitem-link,
-                > .p-menuitem-link:not(.p-disabled):hover {
-                    background: $horizontalMenuRootMenuitemActiveBg;
-
-                    .p-menuitem-text {
-                        color: $horizontalMenuRootMenuitemTextActiveColor;
-                    }
-
-                    .p-menuitem-icon {
-                        color: $horizontalMenuRootMenuitemIconActiveColor;
-                    }
-
-                    .p-submenu-icon {
-                        color: $horizontalMenuRootMenuitemIconActiveColor;
-                    }
-                }
-            }
-        }
+        outline: 0 none;
     }
 
-    .p-menuitem-link {
-        @include menuitem-link();
+    .p-menuitem {
+        @include menuitem();
     }
 
     .p-megamenu-panel {
@@ -43,7 +20,7 @@
         box-shadow: $overlayMenuShadow;
     }
 
-    .p-megamenu-submenu-header {
+    .p-submenu-header {
         margin: $submenuHeaderMargin;
         padding: $submenuHeaderPadding;
         color: $submenuHeaderTextColor;
@@ -53,54 +30,26 @@
         border-top-left-radius: $borderRadius; 
     }
 
-    .p-megamenu-submenu {
+    .p-submenu-list {
         padding: $verticalMenuPadding;
         width: $menuWidth;
 
-        .p-menu-separator {
+        .p-menuitem-separator {
             border-top: $divider;
             margin: $menuSeparatorMargin;
         }
-
-        .p-menuitem {
-            margin: $verticalMenuitemMargin;
-
-            &:last-child {
-                margin: 0;
-            }
-        }
-    }
-
-    .p-menuitem {
-        &.p-menuitem-active {
-            > .p-menuitem-link {
-                background: $menuitemActiveBg;
-
-                .p-menuitem-text {
-                    color: $menuitemTextActiveColor;
-                }
-
-                .p-menuitem-icon, .p-submenu-icon {
-                    color: $menuitemIconActiveColor;
-                }
-            }
-        }
     }
 
     &.p-megamenu-vertical {
         width: $menuWidth;
         padding: $verticalMenuPadding;
+    }
 
-        .p-menuitem {
-            margin: $verticalMenuitemMargin;
-
-            &:last-child {
-                margin: 0;
+    &.p-megamenu-horizontal {
+        .p-megamenu-root-list {  
+            > .p-menuitem {
+                @include horizontal-rootmenuitem();
             }
         }
     }
-
-    .p-menuitem-badge {
-        @include menuitem-badge();
-    }
-}
+}
diff --git a/themes/material/extensions/_megamenu.scss b/themes/material/extensions/_megamenu.scss
@@ -1,9 +1,19 @@
 .p-megamenu {
     .p-menuitem {
-        .p-menuitem-link {
-            &:focus {
-                background: $emphasis-lower;
+        &.p-highlight {
+            &.p-focus {
+                > .p-menuitem-content {
+                    background: $emphasis-lower;
+                }
+            }
+        }
+
+        &:not(.p-highlight):not(.p-disabled) {
+            &.p-focus {
+                > .p-menuitem-content {
+                    background: $emphasis-lower;
+                }
             }
         }
     }
-}
+}