Omnibar: add pressed state for the Help and Notifications buttons

Introduce an `isActive` flag on `OmnibarNode` and render leaf nodes with
`is-active` plus `aria-pressed`, then wire the help center and
notifications plugins to it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: fushar

client/dashboard/app/omnibar/plugin-help-center.tsx

@@ -28,6 +28,7 @@ export function useHelpCenterPlugin(): OmnibarNode {
 		id: 'help-center',
 		label: __( 'Help' ),
 		icon: <HelpIcon />,
+		isActive: isHelpCenterShown,
 		onClick: () => setShowHelpCenter( ! isHelpCenterShown ),
 	};
 }

client/dashboard/app/omnibar/plugin-notifications.scss

@@ -23,6 +23,7 @@
 
 .omnibar .omnibar__menu:hover .omnibar__notifications-unread-dot,
 .omnibar .omnibar__menu:focus-visible .omnibar__notifications-unread-dot,
-.omnibar .omnibar__menu:active .omnibar__notifications-unread-dot {
+.omnibar .omnibar__menu:active .omnibar__notifications-unread-dot,
+.omnibar .omnibar__menu.is-active .omnibar__notifications-unread-dot {
 	stroke: var( --omnibar-menu-active-background );
 }

client/dashboard/app/omnibar/plugin-notifications.tsx

@@ -21,11 +21,14 @@ export function useNotificationsPlugin( { user }: { user?: User } ): OmnibarNode
 	const [ hasUnseenNotifications, setHasUnseenNotifications ] = useState(
 		!! user?.has_unseen_notes
 	);
+	const [ isPanelOpen, setIsPanelOpen ] = useState( false );
 
 	useOmnibarEvent( 'notificationsUnseenCount', ( count ) =>
 		setHasUnseenNotifications( count > 0 )
 	);
 
+	useOmnibarEvent( 'notificationsOpen', setIsPanelOpen );
+
 	const bellRef = useRef< HTMLSpanElement >( null );
 
 	// Re-runs every commit so the anchor stays correct if the bell button is replaced.
@@ -41,6 +44,7 @@ export function useNotificationsPlugin( { user }: { user?: User } ): OmnibarNode
 				<BellIcon hasUnread={ hasUnseenNotifications } />
 			</span>
 		),
+		isActive: isPanelOpen,
 		onClick: () => omnibarEvents.notifications.emit(),
 	};
 }

packages/omnibar/src/components/omnibar-menu.tsx

@@ -67,7 +67,8 @@ function OmnibarMenuContent( { nodes }: { nodes: OmnibarNode[] } ) {
 
 export function OmnibarMenu( { node, className }: { node: OmnibarNode; className?: string } ) {
 	const label = node.title || node.label || '';
-	const menuClassName = className ? `omnibar__menu ${ className }` : 'omnibar__menu';
+	const classNames = [ 'omnibar__menu', className, node.isActive && 'is-active' ].filter( Boolean );
+	const menuClassName = classNames.join( ' ' );
 	const [ isOpen, setIsOpen ] = useState( false );
 	const triggerRef = useRef< HTMLElement >( null );
 	const popoverRef = useRef< HTMLElement >( null );
@@ -82,6 +83,7 @@ export function OmnibarMenu( { node, className }: { node: OmnibarNode; className
 				nativeButton={ ! node.href }
 				onClick={ node.onClick }
 				aria-label={ label }
+				aria-pressed={ node.href ? undefined : node.isActive }
 			>
 				<OmnibarNodeContent node={ node } />
 			</Button>

packages/omnibar/src/components/omnibar.scss

@@ -56,6 +56,7 @@ body:has( .omnibar ) {
 		&:hover,
 		&:focus-visible,
 		&:active,
+		&.is-active,
 		&[aria-expanded='true'] {
 			background-color: var( --omnibar-menu-active-background );
 			color: $omnibar-text-color;

packages/omnibar/src/types/omnibar.ts

@@ -6,6 +6,7 @@ export interface OmnibarNode {
 	group?: boolean;
 	href?: string;
 	onClick?: () => void;
+	isActive?: boolean;
 	meta?: SiteActionNodeMeta & UserInfoNodeMeta;
 	render?: ( node: OmnibarNode ) => React.ReactNode;
 	children?: OmnibarNode[];