From f6bab4506dc9950a7059b211149032864a2685ae Mon Sep 17 00:00:00 2001
From: Karim Daher <daher.kareem@hotmail.com>
Date: Thu, 21 May 2026 01:23:34 +0300
Subject: [PATCH] docs(aria/menu): fix menubar example highlight styling

Highlight menubar items only while interacting, using :hover, :focus-within, and [aria-expanded='true'] for the open submenu state. Items inside an open menu keep their [data-active] highlight.
---
 src/components-examples/aria/menu/menu-example.css | 4 +++-
 src/components-examples/aria/menubar/menubar.css   | 8 +++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components-examples/aria/menu/menu-example.css b/src/components-examples/aria/menu/menu-example.css
index 6aaf76c9d91a..60842508a80e 100644
--- a/src/components-examples/aria/menu/menu-example.css
+++ b/src/components-examples/aria/menu/menu-example.css
@@ -77,7 +77,9 @@
 
 .example-menu-trigger:hover,
 .example-menu-item[data-active='true'],
-.example-menu-bar-item[data-active='true'] {
+.example-menu-bar-item:hover,
+.example-menu-bar-item:focus-within,
+.example-menu-bar-item[aria-expanded='true'] {
   background: color-mix(
     in srgb,
     var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
diff --git a/src/components-examples/aria/menubar/menubar.css b/src/components-examples/aria/menubar/menubar.css
index 59050cb8a0de..5f556e40c094 100644
--- a/src/components-examples/aria/menubar/menubar.css
+++ b/src/components-examples/aria/menubar/menubar.css
@@ -47,7 +47,13 @@
   opacity: 0.5;
 }
 
-[ngMenuItem][data-active='true'] {
+[ngMenu] [ngMenuItem][data-active='true'] {
+  background: color-mix(in srgb, var(--mat-sys-outline) 20%, transparent);
+}
+
+[ngMenuBar] > [ngMenuItem]:hover,
+[ngMenuBar] > [ngMenuItem]:focus-within,
+[ngMenuBar] > [ngMenuItem][aria-expanded='true'] {
   background: color-mix(in srgb, var(--mat-sys-outline) 20%, transparent);
 }