Merge branch 'main' into aria-methods

Author: adolgachev

goldens/cdk/overlay/index.api.md

@@ -378,6 +378,9 @@ export class Overlay {
     static ɵprov: i0.ɵɵInjectableDeclaration<Overlay>;
 }
 
+// @public
+export const OVERLAY_DEFAULT_CONFIG: InjectionToken<OverlayDefaultConfig>;
+
 // @public
 export class OverlayConfig {
     constructor(config?: OverlayConfig);
@@ -428,6 +431,12 @@ export class OverlayContainer implements OnDestroy {
     static ɵprov: i0.ɵɵInjectableDeclaration<OverlayContainer>;
 }
 
+// @public
+export interface OverlayDefaultConfig {
+    // (undocumented)
+    usePopover?: boolean;
+}
+
 // @public
 export class OverlayKeyboardDispatcher extends BaseOverlayDispatcher {
     add(overlayRef: OverlayRef): void;

src/aria/accordion/accordion.ts

@@ -47,7 +47,7 @@ import {
     'role': 'region',
     '[attr.id]': '_pattern.id()',
     '[attr.aria-labelledby]': '_pattern.accordionTrigger()?.id()',
-    '[attr.inert]': '_pattern.hidden() ? true : null',
+    '[attr.inert]': '!visible() ? true : null',
   },
 })
 export class AccordionPanel {
@@ -60,6 +60,9 @@ export class AccordionPanel {
   /** A local unique identifier for the panel, used to match with its trigger's value. */
   value = input.required<string>();
 
+  /** Whether the accordion panel is visible. True if the associated trigger is expanded. */
+  readonly visible = computed(() => !this._pattern.hidden());
+
   /** The parent accordion trigger pattern that controls this panel. This is set by AccordionGroup. */
   readonly accordionTrigger: WritableSignal<AccordionTriggerPattern | undefined> =
     signal(undefined);
@@ -74,7 +77,7 @@ export class AccordionPanel {
   constructor() {
     // Connect the panel's hidden state to the DeferredContentAware's visibility.
     afterRenderEffect(() => {
-      this._deferredContentAware.contentVisible.set(!this._pattern.hidden());
+      this._deferredContentAware.contentVisible.set(this.visible());
     });
   }
 
@@ -103,10 +106,10 @@ export class AccordionPanel {
   exportAs: 'ngAccordionTrigger',
   host: {
     'class': 'ng-accordion-trigger',
-    '[attr.data-active]': '_pattern.active()',
+    '[attr.data-active]': 'active()',
     'role': 'button',
     '[id]': '_pattern.id()',
-    '[attr.aria-expanded]': '_pattern.expanded()',
+    '[attr.aria-expanded]': 'expanded()',
     '[attr.aria-controls]': '_pattern.controls()',
     '[attr.aria-disabled]': '_pattern.disabled()',
     '[attr.disabled]': 'hardDisabled() ? true : null',
@@ -132,6 +135,12 @@ export class AccordionTrigger {
   /** Whether the trigger is disabled. */
   disabled = input(false, {transform: booleanAttribute});
 
+  /** Whether the trigger is active. */
+  readonly active = computed(() => this._pattern.active());
+
+  /** Whether the trigger is expanded. */
+  readonly expanded = computed(() => this._pattern.expanded());
+
   /**
    * Whether this trigger is completely inaccessible.
    *

src/aria/combobox/combobox.ts

@@ -69,12 +69,6 @@ export class Combobox<V> {
   /** The filter mode for the combobox. */
   filterMode = input<'manual' | 'auto-select' | 'highlight'>('manual');
 
-  /** Whether the combobox is focused. */
-  readonly isFocused = signal(false);
-
-  /** Whether the combobox has received focus yet. */
-  private _hasBeenFocused = signal(false);
-
   /** Whether the combobox is disabled. */
   readonly disabled = input(false);
 
@@ -122,12 +116,6 @@ export class Combobox<V> {
         this._deferredContentAware?.contentVisible.set(true);
       }
     });
-
-    afterRenderEffect(() => {
-      if (!this._hasBeenFocused() && this._pattern.isFocused()) {
-        this._hasBeenFocused.set(true);
-      }
-    });
   }
 
   /** Opens the combobox to the selected item. */

src/aria/menu/menu.ts

@@ -45,13 +45,13 @@ import {Directionality} from '@angular/cdk/bidi';
   host: {
     'class': 'ng-menu-trigger',
     '[attr.tabindex]': '_pattern.tabIndex()',
-    '[attr.aria-haspopup]': '_pattern.hasPopup()',
-    '[attr.aria-expanded]': '_pattern.expanded()',
+    '[attr.aria-haspopup]': 'hasPopup()',
+    '[attr.aria-expanded]': 'expanded()',
     '[attr.aria-controls]': '_pattern.menu()?.id()',
     '(click)': '_pattern.onClick()',
     '(keydown)': '_pattern.onKeydown($event)',
     '(focusout)': '_pattern.onFocusOut($event)',
-    '(focusin)': 'onFocusIn()',
+    '(focusin)': '_pattern.onFocusIn()',
   },
 })
 export class MenuTrigger<V> {
@@ -67,8 +67,11 @@ export class MenuTrigger<V> {
   /** The menu associated with the trigger. */
   menu = input<Menu<V> | undefined>(undefined);
 
-  /** 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 menu trigger ui pattern instance. */
   _pattern: MenuTriggerPattern<V> = new MenuTriggerPattern({
@@ -120,7 +123,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)',
@@ -181,7 +184,7 @@ export class Menu<V> {
   readonly items = () => this._items().map(i => i._pattern);
 
   /** 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>();
@@ -209,7 +212,7 @@ export class Menu<V> {
         this._deferredContentAware?.contentVisible.set(true);
       } else {
         this._deferredContentAware?.contentVisible.set(
-          this._pattern.isVisible() || !!this.parent()?.hasBeenFocused(),
+          this._pattern.isVisible() || !!this.parent()?._pattern.hasBeenFocused(),
         );
       }
     });
@@ -333,11 +336,11 @@ export class MenuBar<V> {
   host: {
     'role': 'menuitem',
     'class': 'ng-menu-item',
-    '(focusin)': 'onFocusIn()',
+    '(focusin)': '_pattern.onFocusIn()',
     '[attr.tabindex]': '_pattern.tabIndex()',
-    '[attr.data-active]': '_pattern.isActive()',
-    '[attr.aria-haspopup]': '_pattern.hasPopup()',
-    '[attr.aria-expanded]': '_pattern.expanded()',
+    '[attr.data-active]': 'isActive()',
+    '[attr.aria-haspopup]': 'hasPopup()',
+    '[attr.aria-expanded]': 'expanded()',
     '[attr.aria-disabled]': '_pattern.disabled()',
     '[attr.aria-controls]': '_pattern.submenu()?.id()',
   },
@@ -375,8 +378,14 @@ export class MenuItem<V> {
   /** The submenu associated with the menu item. */
   readonly submenu = input<Menu<V> | undefined>(undefined);
 
-  /** Whether the menu item has been focused. */
-  readonly hasBeenFocused = signal(false);
+  /** Whether the menu item is active. */
+  readonly isActive = computed(() => this._pattern.isActive());
+
+  /** Whether the menu is expanded. */
+  readonly expanded = computed(() => this._pattern.expanded());
+
+  /** Whether the menu item has a popup. */
+  readonly hasPopup = computed(() => this._pattern.hasPopup());
 
   /** The menu item ui pattern instance. */
   readonly _pattern: MenuItemPattern<V> = new MenuItemPattern<V>({

src/aria/private/menu/menu.ts

@@ -583,6 +583,9 @@ export class MenuTriggerPattern<V> {
   /** Whether the menu is expanded. */
   expanded = signal(false);
 
+  /** Whether the menu trigger has received focus. */
+  hasBeenFocused = signal(false);
+
   /** The role of the menu trigger. */
   role = () => 'button';
 
@@ -619,6 +622,11 @@ export class MenuTriggerPattern<V> {
     this.expanded() ? this.close() : this.open({first: true});
   }
 
+  /** Handles focusin events for the menu trigger. */
+  onFocusIn() {
+    this.hasBeenFocused.set(true);
+  }
+
   /** Handles focusout events for the menu trigger. */
   onFocusOut(event: FocusEvent) {
     const element = this.inputs.element();
@@ -684,6 +692,9 @@ export class MenuItemPattern<V> implements ListItem<V> {
   /** Whether the menu item is active. */
   isActive = computed(() => this.inputs.parent()?.inputs.activeItem() === this);
 
+  /** Whether the menu item has received focus. */
+  hasBeenFocused = signal(false);
+
   /** The tab index of the menu item. */
   tabIndex = computed(() => {
     if (this.submenu() && this.submenu()?.inputs.activeItem()) {
@@ -761,4 +772,9 @@ export class MenuItemPattern<V> implements ListItem<V> {
       }
     }
   }
+
+  /** Handles focusin events for the menu item. */
+  onFocusIn() {
+    this.hasBeenFocused.set(true);
+  }
 }

src/aria/private/tree/tree.ts

@@ -185,7 +185,7 @@ export class TreePattern<V> {
   /** The root is always expanded. */
   readonly expanded = () => true;
 
-  /** The roow is always visible. */
+  /** The root is always visible. */
   readonly visible = () => true;
 
   /** The tab index of the tree. */

src/aria/tabs/tabs.ts

@@ -241,10 +241,10 @@ export class TabList implements OnInit, OnDestroy {
   host: {
     'role': 'tab',
     'class': 'ng-tab',
-    '[attr.data-active]': '_pattern.active()',
+    '[attr.data-active]': 'active()',
     '[attr.id]': '_pattern.id()',
     '[attr.tabindex]': '_pattern.tabIndex()',
-    '[attr.aria-selected]': '_pattern.selected()',
+    '[attr.aria-selected]': 'selected()',
     '[attr.aria-disabled]': '_pattern.disabled()',
     '[attr.aria-controls]': '_pattern.controls()',
   },
@@ -279,6 +279,15 @@ export class Tab implements HasElement, OnInit, OnDestroy {
   /** A local unique identifier for the tab. */
   readonly value = input.required<string>();
 
+  /** Whether the tab is active. */
+  readonly active = computed(() => this._pattern.active());
+
+  /** Whether the tab is expanded. */
+  readonly expanded = computed(() => this._pattern.expanded());
+
+  /** Whether the tab is selected. */
+  readonly selected = computed(() => this._pattern.selected());
+
   /** The Tab UIPattern. */
   readonly _pattern: TabPattern = new TabPattern({
     ...this,
@@ -318,7 +327,7 @@ export class Tab implements HasElement, OnInit, OnDestroy {
     'class': 'ng-tabpanel',
     '[attr.id]': '_pattern.id()',
     '[attr.tabindex]': '_pattern.tabIndex()',
-    '[attr.inert]': '_pattern.hidden() ? true : null',
+    '[attr.inert]': '!visible() ? true : null',
     '[attr.aria-labelledby]': '_pattern.labelledBy()',
   },
   hostDirectives: [
@@ -344,6 +353,9 @@ export class TabPanel implements OnInit, OnDestroy {
   /** A local unique identifier for the tabpanel. */
   readonly value = input.required<string>();
 
+  /** Whether the tab panel is visible. */
+  readonly visible = computed(() => !this._pattern.hidden());
+
   /** The TabPanel UIPattern. */
   readonly _pattern: TabPanelPattern = new TabPanelPattern({
     ...this,
@@ -352,7 +364,7 @@ export class TabPanel implements OnInit, OnDestroy {
   });
 
   constructor() {
-    afterRenderEffect(() => this._deferredContentAware.contentVisible.set(!this._pattern.hidden()));
+    afterRenderEffect(() => this._deferredContentAware.contentVisible.set(this.visible()));
   }
 
   ngOnInit() {

src/aria/toolbar/toolbar.ts

@@ -168,7 +168,7 @@ export class Toolbar<V> {
   exportAs: 'ngToolbarWidget',
   host: {
     'class': 'ng-toolbar-widget',
-    '[attr.data-active]': '_pattern.active()',
+    '[attr.data-active]': 'active()',
     '[attr.tabindex]': '_pattern.tabIndex()',
     '[attr.inert]': 'hardDisabled() ? true : null',
     '[attr.disabled]': 'hardDisabled() ? true : null',

src/aria/tree/tree.ts

@@ -220,14 +220,14 @@ export class Tree<V> {
   exportAs: 'ngTreeItem',
   host: {
     'class': 'ng-treeitem',
-    '[attr.data-active]': '_pattern.active()',
+    '[attr.data-active]': 'active()',
     'role': 'treeitem',
     '[id]': '_pattern.id()',
-    '[attr.aria-expanded]': '_pattern.expandable() ? _pattern.expanded() : null',
-    '[attr.aria-selected]': '_pattern.selected()',
+    '[attr.aria-expanded]': 'expanded()',
+    '[attr.aria-selected]': 'selected()',
     '[attr.aria-current]': '_pattern.current()',
     '[attr.aria-disabled]': '_pattern.disabled()',
-    '[attr.aria-level]': '_pattern.level()',
+    '[attr.aria-level]': 'level()',
     '[attr.aria-setsize]': '_pattern.setsize()',
     '[attr.aria-posinset]': '_pattern.posinset()',
     '[attr.tabindex]': '_pattern.tabIndex()',
@@ -272,6 +272,23 @@ export class TreeItem<V> extends DeferredContentAware implements OnInit, OnDestr
     return (this.parent() as TreeItemGroup<V>).ownedBy().tree();
   });
 
+  /** Whether the item is active. */
+  readonly active = computed(() => this._pattern.active());
+
+  /** Whether this item is currently expanded, returning null if not expandable. */
+  readonly expanded = computed(() =>
+    this._pattern.expandable() ? this._pattern.expanded() : null,
+  );
+
+  /** The level of the current item in a tree. */
+  readonly level = computed(() => this._pattern.level());
+
+  /** Whether the item is selected. */
+  readonly selected = computed(() => this._pattern.selected());
+
+  /** Whether this item is visible due to all of its parents being expanded. */
+  readonly visible = computed(() => this._pattern.visible());
+
   /** The UI pattern for this item. */
   _pattern: TreeItemPattern<V>;
 

src/cdk/overlay/overlay-directives.ts

@@ -29,7 +29,7 @@ import {
 import {_getEventTarget} from '../platform';
 import {Subscription} from 'rxjs';
 import {takeWhile} from 'rxjs/operators';
-import {createOverlayRef} from './overlay';
+import {createOverlayRef, OVERLAY_DEFAULT_CONFIG} from './overlay';
 import {OverlayConfig} from './overlay-config';
 import {OverlayRef} from './overlay-ref';
 import {ConnectedOverlayPositionChange, ViewportMargin} from './position/connected-position';
@@ -253,7 +253,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
 
   /** Whether the connected overlay should be rendered inside a popover element or the overlay container. */
   @Input({alias: 'cdkConnectedOverlayUsePopover'})
-  usePopover: FlexibleOverlayPopoverLocation | null = 'global';
+  usePopover: FlexibleOverlayPopoverLocation | null;
 
   /** Whether the overlay should match the trigger's width. */
   @Input({alias: 'cdkConnectedOverlayMatchWidth', transform: booleanAttribute})
@@ -293,7 +293,9 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
     const templateRef = inject<TemplateRef<any>>(TemplateRef);
     const viewContainerRef = inject(ViewContainerRef);
     const defaultConfig = inject(CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG, {optional: true});
+    const globalConfig = inject(OVERLAY_DEFAULT_CONFIG, {optional: true});
 
+    this.usePopover = globalConfig?.usePopover === false ? null : 'global';
     this._templatePortal = new TemplatePortal(templateRef, viewContainerRef);
     this.scrollStrategy = this._scrollStrategyFactory();