diff --git a/src/aria/grid/grid.ts b/src/aria/grid/grid.ts index 61b29eee6594..51b1c458cfbe 100644 --- a/src/aria/grid/grid.ts +++ b/src/aria/grid/grid.ts @@ -236,7 +236,7 @@ export class GridRow { '[attr.id]': '_pattern.id()', '[attr.rowspan]': '_pattern.rowSpan()', '[attr.colspan]': '_pattern.colSpan()', - '[attr.data-active]': '_pattern.active()', + '[attr.data-active]': 'active()', '[attr.data-anchor]': '_pattern.anchor()', '[attr.aria-disabled]': '_pattern.disabled()', '[attr.aria-rowspan]': '_pattern.rowSpan()', @@ -254,6 +254,9 @@ export class GridCell { /** A reference to the host element. */ readonly element = this._elementRef.nativeElement as HTMLElement; + /** Whether the cell is currently active (focused). */ + readonly active = computed(() => this._pattern.active()); + /** The widgets contained within this cell, if any. */ private readonly _widgets = contentChildren(GridCellWidget, {descendants: true}); @@ -362,7 +365,7 @@ export class GridCell { exportAs: 'ngGridCellWidget', host: { 'class': 'grid-cell-widget', - '[attr.data-active]': '_pattern.active()', + '[attr.data-active]': 'active()', '[attr.data-active-control]': 'isActivated() ? "widget" : "cell"', '[tabindex]': '_tabIndex()', }, @@ -374,6 +377,9 @@ export class GridCellWidget { /** A reference to the host element. */ readonly element = this._elementRef.nativeElement as HTMLElement; + /** Whether the widget is currently active (focused). */ + readonly active = computed(() => this._pattern.active()); + /** The parent cell. */ private readonly _cell = inject(GridCell); diff --git a/src/aria/listbox/listbox.ts b/src/aria/listbox/listbox.ts index e9a5343c6c38..842db23da374 100644 --- a/src/aria/listbox/listbox.ts +++ b/src/aria/listbox/listbox.ts @@ -228,7 +228,7 @@ export class Listbox { exportAs: 'ngOption', host: { 'role': 'option', - '[attr.data-active]': '_pattern.active()', + '[attr.data-active]': 'active()', '[attr.id]': '_pattern.id()', '[attr.tabindex]': '_pattern.tabIndex()', '[attr.aria-selected]': '_pattern.selected()', @@ -242,6 +242,9 @@ export class Option { /** A reference to the host element. */ readonly element = this._elementRef.nativeElement as HTMLElement; + /** Whether the option is currently active (focused). */ + active = computed(() => this._pattern.active()); + /** The parent Listbox. */ private readonly _listbox = inject(Listbox);