feat(aria/menu): Add accessors for pattern properties

Author: adolgachev

src/aria/menu/menu.ts

@@ -44,9 +44,9 @@ import {DeferredContent, DeferredContentAware} from '@angular/aria/deferred-cont
   exportAs: 'ngMenuTrigger',
   host: {
     'class': 'ng-menu-trigger',
-    '[attr.tabindex]': '_pattern.tabindex()',
-    '[attr.aria-haspopup]': '_pattern.hasPopup()',
-    '[attr.aria-expanded]': '_pattern.expanded()',
+    '[attr.tabindex]': 'tabindex()',
+    '[attr.aria-haspopup]': 'hasPopup()',
+    '[attr.aria-expanded]': 'expanded()',
     '[attr.aria-controls]': '_pattern.menu()?.id()',
     '(click)': '_pattern.onClick()',
     '(keydown)': '_pattern.onKeydown($event)',
@@ -69,6 +69,15 @@ export class MenuTrigger<V> {
   /** Whether the menu item has been focused. */
   readonly hasBeenFocused = signal(false);
 
+  /** Whether the menu is expanded. */
+  readonly expanded = computed(() => this._pattern.expanded());
+
+  /** Whether the menu trigger has a popup. */
+  readonly hasPopup = computed(() => this._pattern.hasPopup());
+
+  /** The tabindex of the menu trigger. */
+  readonly tabindex = computed(() => this._pattern.tabindex());
+
   /** The menu trigger ui pattern instance. */
   _pattern: MenuTriggerPattern<V> = new MenuTriggerPattern({
     element: computed(() => this._elementRef.nativeElement),
@@ -118,7 +127,7 @@ export class MenuTrigger<V> {
     'role': 'menu',
     'class': 'ng-menu',
     '[attr.id]': '_pattern.id()',
-    '[attr.data-visible]': '_pattern.isVisible()',
+    '[attr.data-visible]': 'isVisible()',
     '(keydown)': '_pattern.onKeydown($event)',
     '(mouseover)': '_pattern.onMouseOver($event)',
     '(mouseout)': '_pattern.onMouseOut($event)',
@@ -183,8 +192,14 @@ export class Menu<V> {
    */
   readonly items = () => this._items().map(i => i._pattern);
 
+  /** Whether the menu or any of its child elements are currently focused. */
+  readonly isFocused = computed(() => this._pattern.isFocused());
+
+  /** Whether the menu has received focus. */
+  readonly hasBeenFocused = computed(() => this._pattern.hasBeenFocused());
+
   /** Whether the menu is visible. */
-  isVisible = computed(() => this._pattern.isVisible());
+  readonly isVisible = computed(() => this._pattern.isVisible());
 
   /** A callback function triggered when a menu item is selected. */
   onSelect = output<V>();
@@ -313,6 +328,12 @@ export class MenuBar<V> {
   /** The delay in seconds before the typeahead buffer is cleared. */
   readonly typeaheadDelay = input<number>(0.5);
 
+  /** Whether the menubar or any of its child elements are currently focused. */
+  readonly isFocused = computed(() => this._pattern.isFocused());
+
+  /** Whether the menu has received focus. */
+  readonly hasBeenFocused = computed(() => this._pattern.hasBeenFocused());
+
   /** The menu ui pattern instance. */
   readonly _pattern: MenuBarPattern<V>;
 
@@ -374,11 +395,11 @@ export class MenuBar<V> {
     'role': 'menuitem',
     'class': 'ng-menu-item',
     '(focusin)': 'onFocusIn()',
-    '[attr.tabindex]': '_pattern.tabindex()',
-    '[attr.data-active]': '_pattern.isActive()',
-    '[attr.aria-haspopup]': '_pattern.hasPopup()',
-    '[attr.aria-expanded]': '_pattern.expanded()',
-    '[attr.aria-disabled]': '_pattern.disabled()',
+    '[attr.tabindex]': 'tabindex()',
+    '[attr.data-active]': 'isActive()',
+    '[attr.aria-haspopup]': 'hasPopup()',
+    '[attr.aria-expanded]': 'expanded()',
+    '[attr.aria-disabled]': 'disabled()',
     '[attr.aria-controls]': '_pattern.submenu()?.id()',
   },
 })
@@ -415,9 +436,21 @@ export class MenuItem<V> {
   /** The submenu associated with the menu item. */
   readonly submenu = input<Menu<V> | undefined>(undefined);
 
+  /** Whether the menu item is active. */
+  readonly isActive = computed(() => this._pattern.isActive());
+
   /** Whether the menu item has been focused. */
   readonly hasBeenFocused = signal(false);
 
+  /** Whether the menuis expanded. */
+  readonly expanded = computed(() => this._pattern.expanded());
+
+  /** Whether the menu item has a popup. */
+  readonly hasPopup = computed(() => this._pattern.hasPopup());
+
+  /** The tabindex of the menu item. */
+  readonly tabindex = computed(() => this._pattern.tabindex());
+
   /** The menu item ui pattern instance. */
   readonly _pattern: MenuItemPattern<V> = new MenuItemPattern<V>({
     id: this.id,