diff --git a/src/aria/accordion/accordion.ts b/src/aria/accordion/accordion.ts index f0d1eb730b65..0b21b144578f 100644 --- a/src/aria/accordion/accordion.ts +++ b/src/aria/accordion/accordion.ts @@ -95,7 +95,7 @@ export class AccordionPanel { '[attr.aria-controls]': '_pattern.controls()', '[attr.aria-disabled]': '_pattern.disabled()', '[attr.disabled]': 'hardDisabled() ? true : null', - '[attr.tabindex]': '_pattern.tabindex()', + '[attr.tabindex]': '_pattern.tabIndex()', '(keydown)': '_pattern.onKeydown($event)', '(pointerdown)': '_pattern.onPointerdown($event)', '(focusin)': '_pattern.onFocus($event)', @@ -122,7 +122,7 @@ export class AccordionTrigger { * * TODO(ok7sai): Consider move this to UI patterns. */ - readonly hardDisabled = computed(() => this._pattern.disabled() && this._pattern.tabindex() < 0); + readonly hardDisabled = computed(() => this._pattern.disabled() && this._pattern.tabIndex() < 0); /** The accordion panel pattern controlled by this trigger. This is set by AccordionGroup. */ readonly accordionPanel: WritableSignal = signal(undefined); diff --git a/src/aria/combobox/combobox.ts b/src/aria/combobox/combobox.ts index e583db721c60..b901c88facdc 100644 --- a/src/aria/combobox/combobox.ts +++ b/src/aria/combobox/combobox.ts @@ -123,7 +123,7 @@ export class Combobox { 'role': 'combobox', '[value]': 'value()', '[attr.aria-expanded]': 'combobox._pattern.expanded()', - '[attr.aria-activedescendant]': 'combobox._pattern.activedescendant()', + '[attr.aria-activedescendant]': 'combobox._pattern.activeDescendant()', '[attr.aria-controls]': 'combobox._pattern.popupId()', '[attr.aria-haspopup]': 'combobox._pattern.hasPopup()', '[attr.aria-autocomplete]': 'combobox._pattern.autocomplete()', diff --git a/src/aria/listbox/listbox.ts b/src/aria/listbox/listbox.ts index 92ba46214060..ffedeba632bb 100644 --- a/src/aria/listbox/listbox.ts +++ b/src/aria/listbox/listbox.ts @@ -46,12 +46,12 @@ import {ComboboxPopup} from '../combobox'; 'role': 'listbox', 'class': 'ng-listbox', '[attr.id]': 'id()', - '[attr.tabindex]': '_pattern.tabindex()', + '[attr.tabindex]': '_pattern.tabIndex()', '[attr.aria-readonly]': '_pattern.readonly()', '[attr.aria-disabled]': '_pattern.disabled()', '[attr.aria-orientation]': '_pattern.orientation()', '[attr.aria-multiselectable]': '_pattern.multi()', - '[attr.aria-activedescendant]': '_pattern.activedescendant()', + '[attr.aria-activedescendant]': '_pattern.activeDescendant()', '(keydown)': '_pattern.onKeydown($event)', '(pointerdown)': '_pattern.onPointerdown($event)', '(focusin)': 'onFocus()', @@ -198,7 +198,7 @@ export class Listbox { 'class': 'ng-option', '[attr.data-active]': '_pattern.active()', '[attr.id]': '_pattern.id()', - '[attr.tabindex]': '_pattern.tabindex()', + '[attr.tabindex]': '_pattern.tabIndex()', '[attr.aria-selected]': '_pattern.selected()', '[attr.aria-disabled]': '_pattern.disabled()', }, diff --git a/src/aria/menu/menu.ts b/src/aria/menu/menu.ts index 062a6487d208..4d7a74b65314 100644 --- a/src/aria/menu/menu.ts +++ b/src/aria/menu/menu.ts @@ -45,7 +45,7 @@ import {Directionality} from '@angular/cdk/bidi'; exportAs: 'ngMenuTrigger', host: { 'class': 'ng-menu-trigger', - '[attr.tabindex]': '_pattern.tabindex()', + '[attr.tabindex]': '_pattern.tabIndex()', '[attr.aria-haspopup]': '_pattern.hasPopup()', '[attr.aria-expanded]': '_pattern.expanded()', '[attr.aria-controls]': '_pattern.menu()?.id()', @@ -340,7 +340,7 @@ export class MenuBar { 'role': 'menuitem', 'class': 'ng-menu-item', '(focusin)': 'onFocusIn()', - '[attr.tabindex]': '_pattern.tabindex()', + '[attr.tabindex]': '_pattern.tabIndex()', '[attr.data-active]': '_pattern.isActive()', '[attr.aria-haspopup]': '_pattern.hasPopup()', '[attr.aria-expanded]': '_pattern.expanded()', diff --git a/src/aria/private/accordion/accordion.ts b/src/aria/private/accordion/accordion.ts index 0ba4286e3d73..5ce414af8df8 100644 --- a/src/aria/private/accordion/accordion.ts +++ b/src/aria/private/accordion/accordion.ts @@ -103,8 +103,8 @@ export class AccordionTriggerPattern { /** Id of the accordion panel controlled by the trigger. */ controls = computed(() => this.inputs.accordionPanel()?.id()); - /** The tabindex of the trigger. */ - tabindex = computed(() => (this.inputs.accordionGroup().focusManager.isFocusable(this) ? 0 : -1)); + /** The tab index of the trigger. */ + tabIndex = computed(() => (this.inputs.accordionGroup().focusManager.isFocusable(this) ? 0 : -1)); /** Whether the trigger is disabled. Disabling an accordion group disables all the triggers. */ disabled = computed(() => this.inputs.disabled() || this.inputs.accordionGroup().disabled()); diff --git a/src/aria/private/behaviors/grid-focus/grid-focus.spec.ts b/src/aria/private/behaviors/grid-focus/grid-focus.spec.ts index 91c75cd41649..414aa61c84b5 100644 --- a/src/aria/private/behaviors/grid-focus/grid-focus.spec.ts +++ b/src/aria/private/behaviors/grid-focus/grid-focus.spec.ts @@ -231,17 +231,17 @@ describe('GridFocus', () => { describe('getGridTabindex', () => { it('should return 0 if grid is disabled', () => { const {gridFocus} = setupGridFocus({disabled: signal(true)}); - expect(gridFocus.getGridTabindex()).toBe(0); + expect(gridFocus.getGridTabIndex()).toBe(0); }); it('should return -1 if focusMode is "roving" and grid is not disabled', () => { const {gridFocus} = setupGridFocus({focusMode: signal('roving')}); - expect(gridFocus.getGridTabindex()).toBe(-1); + expect(gridFocus.getGridTabIndex()).toBe(-1); }); it('should return 0 if focusMode is "activedescendant" and grid is not disabled', () => { const {gridFocus} = setupGridFocus({focusMode: signal('activedescendant')}); - expect(gridFocus.getGridTabindex()).toBe(0); + expect(gridFocus.getGridTabIndex()).toBe(0); }); }); @@ -252,9 +252,9 @@ describe('GridFocus', () => { numCols: 3, disabled: signal(true), }); - expect(gridFocus.getCellTabindex(cells[0][0])).toBe(-1); - expect(gridFocus.getCellTabindex(cells[0][1])).toBe(-1); - expect(gridFocus.getCellTabindex(cells[0][2])).toBe(-1); + expect(gridFocus.getCellTabIndex(cells[0][0])).toBe(-1); + expect(gridFocus.getCellTabIndex(cells[0][1])).toBe(-1); + expect(gridFocus.getCellTabIndex(cells[0][2])).toBe(-1); }); it('should return -1 if focusMode is "activedescendant"', () => { @@ -263,9 +263,9 @@ describe('GridFocus', () => { numCols: 3, focusMode: signal('activedescendant'), }); - expect(gridFocus.getCellTabindex(cells[0][0])).toBe(-1); - expect(gridFocus.getCellTabindex(cells[0][1])).toBe(-1); - expect(gridFocus.getCellTabindex(cells[0][2])).toBe(-1); + expect(gridFocus.getCellTabIndex(cells[0][0])).toBe(-1); + expect(gridFocus.getCellTabIndex(cells[0][1])).toBe(-1); + expect(gridFocus.getCellTabIndex(cells[0][2])).toBe(-1); }); it('should return 0 if focusMode is "roving" and cell is the activeCell', () => { @@ -275,9 +275,9 @@ describe('GridFocus', () => { focusMode: signal('roving'), }); - expect(gridFocus.getCellTabindex(cells[0][0])).toBe(0); - expect(gridFocus.getCellTabindex(cells[0][1])).toBe(-1); - expect(gridFocus.getCellTabindex(cells[0][2])).toBe(-1); + expect(gridFocus.getCellTabIndex(cells[0][0])).toBe(0); + expect(gridFocus.getCellTabIndex(cells[0][1])).toBe(-1); + expect(gridFocus.getCellTabIndex(cells[0][2])).toBe(-1); }); }); diff --git a/src/aria/private/behaviors/grid-focus/grid-focus.ts b/src/aria/private/behaviors/grid-focus/grid-focus.ts index 49cec74330d9..508026eb9726 100644 --- a/src/aria/private/behaviors/grid-focus/grid-focus.ts +++ b/src/aria/private/behaviors/grid-focus/grid-focus.ts @@ -96,16 +96,16 @@ export class GridFocus { return gridCells.length === 0 || gridCells.every(row => row.every(cell => cell.disabled())); } - /** The tabindex for the grid container. */ - getGridTabindex(): -1 | 0 { + /** The tab index for the grid container. */ + getGridTabIndex(): -1 | 0 { if (this.isGridDisabled()) { return 0; } return this.inputs.focusMode() === 'activedescendant' ? 0 : -1; } - /** Returns the tabindex for the given grid cell cell. */ - getCellTabindex(cell: T): -1 | 0 { + /** Returns the tab index for the given grid cell cell. */ + getCellTabIndex(cell: T): -1 | 0 { if (this.isGridDisabled()) { return -1; } diff --git a/src/aria/private/behaviors/grid/grid-focus.spec.ts b/src/aria/private/behaviors/grid/grid-focus.spec.ts index f9e26bcdeb66..d6faeafdbadc 100644 --- a/src/aria/private/behaviors/grid/grid-focus.spec.ts +++ b/src/aria/private/behaviors/grid/grid-focus.spec.ts @@ -220,7 +220,7 @@ describe('GridFocus', () => { gridFocus.focusCell(cells[1][1]); - expect(gridFocus.getCellTabindex(cells[1][1])).toBe(0); + expect(gridFocus.getCellTabIndex(cells[1][1])).toBe(0); }); it('should return -1 for inactive cells in roving mode', () => { @@ -231,8 +231,8 @@ describe('GridFocus', () => { gridFocus.focusCell(cells[1][1]); - expect(gridFocus.getCellTabindex(cells[0][0])).toBe(-1); - expect(gridFocus.getCellTabindex(cells[2][2])).toBe(-1); + expect(gridFocus.getCellTabIndex(cells[0][0])).toBe(-1); + expect(gridFocus.getCellTabIndex(cells[2][2])).toBe(-1); }); it('should return -1 for all cells in activedescendant mode', () => { @@ -243,14 +243,14 @@ describe('GridFocus', () => { gridFocus.focusCell(cells[1][1]); - expect(gridFocus.getCellTabindex(cells[0][0])).toBe(-1); - expect(gridFocus.getCellTabindex(cells[1][1])).toBe(-1); + expect(gridFocus.getCellTabIndex(cells[0][0])).toBe(-1); + expect(gridFocus.getCellTabIndex(cells[1][1])).toBe(-1); }); it('should return -1 for all cells when the grid is disabled', () => { const cells = createTestGrid(createGridA); const gridFocus = setupGridFocus(signal(cells), {disabled: signal(true)}); - expect(gridFocus.getCellTabindex(cells[1][1])).toBe(-1); + expect(gridFocus.getCellTabIndex(cells[1][1])).toBe(-1); }); }); diff --git a/src/aria/private/behaviors/grid/grid-focus.ts b/src/aria/private/behaviors/grid/grid-focus.ts index fa89ea784cfa..18def18c0b79 100644 --- a/src/aria/private/behaviors/grid/grid-focus.ts +++ b/src/aria/private/behaviors/grid/grid-focus.ts @@ -95,7 +95,7 @@ export class GridFocus { return gridCells.length === 0 || gridCells.every(row => row.every(cell => cell.disabled())); }); - /** The tabindex for the grid container. */ + /** The tab index for the grid container. */ readonly gridTabIndex = computed<-1 | 0>(() => { if (this.gridDisabled()) { return 0; @@ -105,8 +105,8 @@ export class GridFocus { constructor(readonly inputs: GridFocusInputs & GridFocusDeps) {} - /** Returns the tabindex for the given grid cell cell. */ - getCellTabindex(cell: T): -1 | 0 { + /** Returns the tab index for the given grid cell cell. */ + getCellTabIndex(cell: T): -1 | 0 { if (this.gridDisabled()) { return -1; } diff --git a/src/aria/private/behaviors/grid/grid.spec.ts b/src/aria/private/behaviors/grid/grid.spec.ts index 910e79ab5fb2..d78ed7ad05c9 100644 --- a/src/aria/private/behaviors/grid/grid.spec.ts +++ b/src/aria/private/behaviors/grid/grid.spec.ts @@ -74,7 +74,7 @@ describe('Grid', () => { }); describe('cellTabIndex', () => { - it('should return the tabindex for a cell', () => { + it('should return the tab index for a cell', () => { const cells = createTestGrid(createGridA); const grid = setupGrid(signal(cells)); diff --git a/src/aria/private/behaviors/grid/grid.ts b/src/aria/private/behaviors/grid/grid.ts index f6a2e46bab65..123171e61794 100644 --- a/src/aria/private/behaviors/grid/grid.ts +++ b/src/aria/private/behaviors/grid/grid.ts @@ -48,7 +48,7 @@ export class Grid { /** The anchor point for range selection, linked to the active coordinates. */ readonly selectionAnchor = linkedSignal(() => this.focusBehavior.activeCoords()); - /** The `tabindex` for the grid container. */ + /** The `tab index` for the grid container. */ readonly gridTabIndex = computed(() => this.focusBehavior.gridTabIndex()); /** Whether the grid is in a disabled state. */ @@ -84,9 +84,9 @@ export class Grid { return index !== undefined ? index + 1 : undefined; } - /** Gets the `tabindex` for a given cell. */ + /** Gets the `tab index` for a given cell. */ cellTabIndex(cell: T): -1 | 0 { - return this.focusBehavior.getCellTabindex(cell); + return this.focusBehavior.getCellTabIndex(cell); } /** Navigates to the cell above the currently active cell. */ diff --git a/src/aria/private/behaviors/list-focus/list-focus.spec.ts b/src/aria/private/behaviors/list-focus/list-focus.spec.ts index 676e396569ff..b6fa3c3c881b 100644 --- a/src/aria/private/behaviors/list-focus/list-focus.spec.ts +++ b/src/aria/private/behaviors/list-focus/list-focus.spec.ts @@ -51,22 +51,22 @@ describe('List Focus', () => { focusManager = getListFocus({focusMode: signal('roving')}); }); - it('should set the list tabindex to -1', () => { - expect(focusManager.getListTabindex()).toBe(-1); + it('should set the list to -1', () => { + expect(focusManager.getListTabIndex()).toBe(-1); }); - it('should set the activedescendant to undefined', () => { + it('should set the active descendant to undefined', () => { expect(focusManager.getActiveDescendant()).toBeUndefined(); }); - it('should set the tabindex based on the active index', () => { + it('should set the tab index based on the active index', () => { const items = focusManager.inputs.items() as TestItem[]; focusManager.inputs.activeItem.set(focusManager.inputs.items()[2]); - expect(focusManager.getItemTabindex(items[0])).toBe(-1); - expect(focusManager.getItemTabindex(items[1])).toBe(-1); - expect(focusManager.getItemTabindex(items[2])).toBe(0); - expect(focusManager.getItemTabindex(items[3])).toBe(-1); - expect(focusManager.getItemTabindex(items[4])).toBe(-1); + expect(focusManager.getItemTabIndex(items[0])).toBe(-1); + expect(focusManager.getItemTabIndex(items[1])).toBe(-1); + expect(focusManager.getItemTabIndex(items[2])).toBe(0); + expect(focusManager.getItemTabIndex(items[3])).toBe(-1); + expect(focusManager.getItemTabIndex(items[4])).toBe(-1); }); }); @@ -77,22 +77,22 @@ describe('List Focus', () => { focusManager = getListFocus({focusMode: signal('activedescendant')}); }); - it('should set the list tabindex to 0', () => { - expect(focusManager.getListTabindex()).toBe(0); + it('should set the list tab index to 0', () => { + expect(focusManager.getListTabIndex()).toBe(0); }); it('should set the activedescendant to the active items id', () => { expect(focusManager.getActiveDescendant()).toBe(focusManager.inputs.items()[0].id()); }); - it('should set the tabindex of all items to -1', () => { + it('should set the tab index of all items to -1', () => { const items = focusManager.inputs.items() as TestItem[]; focusManager.inputs.activeItem.set(focusManager.inputs.items()[0]); - expect(focusManager.getItemTabindex(items[0])).toBe(-1); - expect(focusManager.getItemTabindex(items[1])).toBe(-1); - expect(focusManager.getItemTabindex(items[2])).toBe(-1); - expect(focusManager.getItemTabindex(items[3])).toBe(-1); - expect(focusManager.getItemTabindex(items[4])).toBe(-1); + expect(focusManager.getItemTabIndex(items[0])).toBe(-1); + expect(focusManager.getItemTabIndex(items[1])).toBe(-1); + expect(focusManager.getItemTabIndex(items[2])).toBe(-1); + expect(focusManager.getItemTabIndex(items[3])).toBe(-1); + expect(focusManager.getItemTabIndex(items[4])).toBe(-1); }); it('should update the activedescendant of the list when navigating', () => { diff --git a/src/aria/private/behaviors/list-focus/list-focus.ts b/src/aria/private/behaviors/list-focus/list-focus.ts index 39d208814f96..729103258758 100644 --- a/src/aria/private/behaviors/list-focus/list-focus.ts +++ b/src/aria/private/behaviors/list-focus/list-focus.ts @@ -82,16 +82,16 @@ export class ListFocus { return this.inputs.activeItem()?.id() ?? undefined; } - /** The tabindex for the list. */ - getListTabindex(): -1 | 0 { + /** The tab index for the list. */ + getListTabIndex(): -1 | 0 { if (this.isListDisabledFocusable()) { return 0; } return this.inputs.focusMode() === 'activedescendant' ? 0 : -1; } - /** Returns the tabindex for the given item. */ - getItemTabindex(item: T): -1 | 0 { + /** Returns the tab index for the given item. */ + getItemTabIndex(item: T): -1 | 0 { if (this.isListDisabledFocusable()) { return -1; } diff --git a/src/aria/private/behaviors/list/list.spec.ts b/src/aria/private/behaviors/list/list.spec.ts index 0ae24a73a078..e4421c2d10fb 100644 --- a/src/aria/private/behaviors/list/list.spec.ts +++ b/src/aria/private/behaviors/list/list.spec.ts @@ -76,36 +76,36 @@ describe('List Behavior', () => { } describe('with focusMode: "activedescendant"', () => { - it('should set the list tabindex to 0', () => { + it('should set the list tab index to 0', () => { const {list} = getDefaultPatterns({focusMode: signal('activedescendant')}); - expect(list.tabindex()).toBe(0); + expect(list.tabIndex()).toBe(0); }); it('should set the active descendant to the active item id', () => { const {list} = getDefaultPatterns({focusMode: signal('activedescendant')}); - expect(list.activedescendant()).toBe('item-0'); + expect(list.activeDescendant()).toBe('item-0'); list.next(); - expect(list.activedescendant()).toBe('item-1'); + expect(list.activeDescendant()).toBe('item-1'); }); - it('should set item tabindex to -1', () => { + it('should set item tab index to -1', () => { const {list, items} = getDefaultPatterns({focusMode: signal('activedescendant')}); expect(list.getItemTabindex(items[0])).toBe(-1); }); }); describe('with focusMode: "roving"', () => { - it('should set the list tabindex to -1', () => { + it('should set the list tab index to -1', () => { const {list} = getDefaultPatterns({focusMode: signal('roving')}); - expect(list.tabindex()).toBe(-1); + expect(list.tabIndex()).toBe(-1); }); it('should not set the active descendant', () => { const {list} = getDefaultPatterns({focusMode: signal('roving')}); - expect(list.activedescendant()).toBeUndefined(); + expect(list.activeDescendant()).toBeUndefined(); }); - it('should set the active item tabindex to 0 and others to -1', () => { + it('should set the active item tab index to 0 and others to -1', () => { const {list, items} = getDefaultPatterns({focusMode: signal('roving')}); expect(list.getItemTabindex(items[0])).toBe(0); expect(list.getItemTabindex(items[1])).toBe(-1); @@ -140,8 +140,8 @@ describe('List Behavior', () => { expect(list.inputs.value()).toEqual([]); }); - it('should have a tabindex of 0', () => { - expect(list.tabindex()).toBe(0); + it('should have a tab index of 0', () => { + expect(list.tabIndex()).toBe(0); }); }); @@ -171,7 +171,7 @@ describe('List Behavior', () => { }); it('should have a tabindex of 0', () => { - expect(list.tabindex()).toBe(-1); + expect(list.tabIndex()).toBe(-1); }); }); diff --git a/src/aria/private/behaviors/list/list.ts b/src/aria/private/behaviors/list/list.ts index 81f6db0c1a41..447f792b5847 100644 --- a/src/aria/private/behaviors/list/list.ts +++ b/src/aria/private/behaviors/list/list.ts @@ -64,10 +64,10 @@ export class List, V> { disabled = computed(() => this.focusBehavior.isListDisabled()); /** The id of the current active item. */ - activedescendant = computed(() => this.focusBehavior.getActiveDescendant()); + activeDescendant = computed(() => this.focusBehavior.getActiveDescendant()); - /** The tabindex of the list. */ - tabindex = computed(() => this.focusBehavior.getListTabindex()); + /** The tab index of the list. */ + tabIndex = computed(() => this.focusBehavior.getListTabIndex()); /** The index of the currently active item in the list. */ activeIndex = computed(() => this.focusBehavior.activeIndex()); @@ -100,9 +100,9 @@ export class List, V> { }); } - /** Returns the tabindex for the given item. */ + /** Returns the tab index for the given item. */ getItemTabindex(item: T) { - return this.focusBehavior.getItemTabindex(item); + return this.focusBehavior.getItemTabIndex(item); } /** Navigates to the first option in the list. */ diff --git a/src/aria/private/combobox/combobox.ts b/src/aria/private/combobox/combobox.ts index 2af80ffcfdab..c6c73c74abac 100644 --- a/src/aria/private/combobox/combobox.ts +++ b/src/aria/private/combobox/combobox.ts @@ -116,7 +116,7 @@ export class ComboboxPattern, V> { expanded = signal(false); /** The ID of the active item in the combobox. */ - activedescendant = computed(() => this.inputs.popupControls()?.activeId() ?? null); + activeDescendant = computed(() => this.inputs.popupControls()?.activeId() ?? null); /** The currently highlighted item in the combobox. */ highlightedItem = signal(undefined); diff --git a/src/aria/private/grid/cell.ts b/src/aria/private/grid/cell.ts index 4ab9c2b8ff49..05338ec3f206 100644 --- a/src/aria/private/grid/cell.ts +++ b/src/aria/private/grid/cell.ts @@ -82,7 +82,7 @@ export class GridCellPattern implements GridCell { this.inputs.grid().gridBehavior.cellTabIndex(this), ); - /** The `tabindex` for the cell. If the cell contains a widget, the cell's tabindex is -1. */ + /** The tab index for the cell. If the cell contains a widget, the cell's tab index is -1. */ readonly tabIndex: SignalLike<-1 | 0> = computed(() => this.inputs.widget() !== undefined ? -1 : this._tabIndex(), ); @@ -101,7 +101,7 @@ export class GridCellPattern implements GridCell { this.selectable = inputs.selectable; } - /** Gets the `tabindex` for the widget within the cell. */ + /** Gets the tab index for the widget within the cell. */ widgetTabIndex(): -1 | 0 { return this._tabIndex(); } diff --git a/src/aria/private/grid/widget.ts b/src/aria/private/grid/widget.ts index e25688dcda5b..fbe55ef6619e 100644 --- a/src/aria/private/grid/widget.ts +++ b/src/aria/private/grid/widget.ts @@ -30,7 +30,7 @@ export class GridCellWidgetPattern { /** The html element that should receive focus. */ readonly element: SignalLike; - /** The `tabindex` for the widget. */ + /** The `tab index` for the widget. */ readonly tabIndex: SignalLike<-1 | 0> = computed(() => this.inputs.cell().widgetTabIndex()); /** Whether the widget is in an active state (i.e. its containing cell is active). */ diff --git a/src/aria/private/listbox/combobox-listbox.ts b/src/aria/private/listbox/combobox-listbox.ts index b331de3c358e..f4e7fb47aaea 100644 --- a/src/aria/private/listbox/combobox-listbox.ts +++ b/src/aria/private/listbox/combobox-listbox.ts @@ -28,13 +28,13 @@ export class ComboboxListboxPattern role = computed(() => 'listbox' as const); /** The id of the active (focused) item in the listbox. */ - activeId = computed(() => this.listBehavior.activedescendant()); + activeId = computed(() => this.listBehavior.activeDescendant()); /** The list of options in the listbox. */ items: SignalLike[]> = computed(() => this.inputs.items()); - /** The tabindex for the listbox. Always -1 because the combobox handles focus. */ - override tabindex: SignalLike<-1 | 0> = () => -1; + /** The tab index for the listbox. Always -1 because the combobox handles focus. */ + override tabIndex: SignalLike<-1 | 0> = () => -1; constructor(override readonly inputs: ComboboxListboxInputs) { if (inputs.combobox()) { diff --git a/src/aria/private/listbox/listbox.ts b/src/aria/private/listbox/listbox.ts index 5f5c034e4866..b4769c1ff061 100644 --- a/src/aria/private/listbox/listbox.ts +++ b/src/aria/private/listbox/listbox.ts @@ -34,11 +34,11 @@ export class ListboxPattern { /** Whether the listbox is readonly. */ readonly: SignalLike; - /** The tabindex of the listbox. */ - tabindex: SignalLike<-1 | 0> = computed(() => this.listBehavior.tabindex()); + /** The tab index of the listbox. */ + tabIndex: SignalLike<-1 | 0> = computed(() => this.listBehavior.tabIndex()); /** The id of the current active item. */ - activedescendant = computed(() => this.listBehavior.activedescendant()); + activeDescendant = computed(() => this.listBehavior.activeDescendant()); /** Whether multiple items in the list can be selected at once. */ multi: SignalLike; diff --git a/src/aria/private/listbox/option.ts b/src/aria/private/listbox/option.ts index 8ea16149d004..835090a002f4 100644 --- a/src/aria/private/listbox/option.ts +++ b/src/aria/private/listbox/option.ts @@ -53,8 +53,8 @@ export class OptionPattern { /** A reference to the parent listbox. */ listbox: SignalLike | undefined>; - /** The tabindex of the option. */ - tabindex = computed(() => this.listbox()?.listBehavior.getItemTabindex(this)); + /** The tab index of the option. */ + tabIndex = computed(() => this.listbox()?.listBehavior.getItemTabindex(this)); /** The html element that should receive focus. */ element: SignalLike; diff --git a/src/aria/private/menu/menu.ts b/src/aria/private/menu/menu.ts index e49dfa1e5dbc..db8cd421571d 100644 --- a/src/aria/private/menu/menu.ts +++ b/src/aria/private/menu/menu.ts @@ -515,8 +515,8 @@ export class MenuTriggerPattern { /** The menu associated with the trigger. */ menu: SignalLike | undefined>; - /** The tabindex of the menu trigger. */ - tabindex = computed(() => (this.expanded() && this.menu()?.inputs.activeItem() ? -1 : 0)); + /** The tab index of the menu trigger. */ + tabIndex = computed(() => (this.expanded() && this.menu()?.inputs.activeItem() ? -1 : 0)); /** Handles keyboard events for the menu trigger. */ keydownManager = computed(() => { @@ -607,8 +607,8 @@ export class MenuItemPattern implements ListItem { /** Whether the menu item is active. */ isActive = computed(() => this.inputs.parent()?.inputs.activeItem() === this); - /** The tabindex of the menu item. */ - tabindex = computed(() => { + /** The tab index of the menu item. */ + tabIndex = computed(() => { if (this.submenu() && this.submenu()?.inputs.activeItem()) { return -1; } diff --git a/src/aria/private/tabs/tabs.spec.ts b/src/aria/private/tabs/tabs.spec.ts index 3ceb1f9388a9..ea541399f350 100644 --- a/src/aria/private/tabs/tabs.spec.ts +++ b/src/aria/private/tabs/tabs.spec.ts @@ -158,15 +158,15 @@ describe('Tabs Pattern', () => { expect(tabPanelPatterns[1].hidden()).toBeTrue(); }); - it('should set a tabpanel tabindex to 0 if the tab is selected.', () => { + it('should set a tabpanel tab index to 0 if the tab is selected.', () => { tabListInputs.value.set(['tab-1']); - expect(tabPatterns[0].tabindex()).toBe(0); + expect(tabPatterns[0].tabIndex()).toBe(0); }); - it('should set a tabpanel tabindex to -1 if the tab is not selected.', () => { + it('should set a tabpanel tab index to -1 if the tab is not selected.', () => { tabListInputs.value.set(['tab-1']); - expect(tabPatterns[1].tabindex()).toBe(-1); - expect(tabPatterns[2].tabindex()).toBe(-1); + expect(tabPatterns[1].tabIndex()).toBe(-1); + expect(tabPatterns[2].tabIndex()).toBe(-1); }); it('should set a tabpanel aria-labelledby pointing to its tab id.', () => { diff --git a/src/aria/private/tabs/tabs.ts b/src/aria/private/tabs/tabs.ts index 95f593009343..01943593a62d 100644 --- a/src/aria/private/tabs/tabs.ts +++ b/src/aria/private/tabs/tabs.ts @@ -70,8 +70,8 @@ export class TabPattern { /** Whether the tab is selected. */ readonly selected = computed(() => !!this.inputs.tablist().inputs.value().includes(this.value())); - /** The tabindex of the tab. */ - readonly tabindex = computed(() => this.inputs.tablist().listBehavior.getItemTabindex(this)); + /** The tab index of the tab. */ + readonly tabIndex = computed(() => this.inputs.tablist().listBehavior.getItemTabindex(this)); /** The id of the tabpanel associated with the tab. */ readonly controls = computed(() => this.inputs.tabpanel()?.id()); @@ -111,8 +111,8 @@ export class TabPanelPattern { /** Whether the tabpanel is hidden. */ readonly hidden = computed(() => this.inputs.tab()?.expanded() === false); - /** The tabindex of this tabpanel. */ - readonly tabindex = computed(() => (this.hidden() ? -1 : 0)); + /** The tab index of this tabpanel. */ + readonly tabIndex = computed(() => (this.hidden() ? -1 : 0)); /** The aria-labelledby value for this tabpanel. */ readonly labelledBy = computed(() => @@ -149,11 +149,11 @@ export class TabListPattern { /** Whether the tablist is disabled. */ readonly disabled: SignalLike; - /** The tabindex of the tablist. */ - readonly tabindex = computed(() => this.listBehavior.tabindex()); + /** The tab index of the tablist. */ + readonly tabIndex = computed(() => this.listBehavior.tabIndex()); /** The id of the current active tab. */ - readonly activedescendant = computed(() => this.listBehavior.activedescendant()); + readonly activeDescendant = computed(() => this.listBehavior.activeDescendant()); /** Whether selection should follow focus. */ readonly followFocus = computed(() => this.inputs.selectionMode() === 'follow'); diff --git a/src/aria/private/toolbar/toolbar-widget.ts b/src/aria/private/toolbar/toolbar-widget.ts index e86247481968..ee7b329c594c 100644 --- a/src/aria/private/toolbar/toolbar-widget.ts +++ b/src/aria/private/toolbar/toolbar-widget.ts @@ -31,8 +31,8 @@ export class ToolbarWidgetPattern implements ListItem { /** A reference to the parent toolbar. */ readonly toolbar: SignalLike>; - /** The tabindex of the widgdet. */ - readonly tabindex = computed(() => this.toolbar().listBehavior.getItemTabindex(this)); + /** The tab index of the widgdet. */ + readonly tabIndex = computed(() => this.toolbar().listBehavior.getItemTabindex(this)); /** The text used by the typeahead search. */ readonly searchTerm = () => ''; // Unused because toolbar does not support typeahead. diff --git a/src/aria/private/toolbar/toolbar.ts b/src/aria/private/toolbar/toolbar.ts index ec4e9f2031bb..6228fbe47995 100644 --- a/src/aria/private/toolbar/toolbar.ts +++ b/src/aria/private/toolbar/toolbar.ts @@ -36,11 +36,11 @@ export class ToolbarPattern { /** Whether the toolbar is disabled. */ readonly disabled = computed(() => this.listBehavior.disabled()); - /** The tabindex of the toolbar (if using activedescendant). */ - readonly tabindex = computed(() => this.listBehavior.tabindex()); + /** The tab index of the toolbar (if using activedescendant). */ + readonly tabIndex = computed(() => this.listBehavior.tabIndex()); /** The id of the current active widget (if using activedescendant). */ - readonly activedescendant = computed(() => this.listBehavior.activedescendant()); + readonly activeDescendant = computed(() => this.listBehavior.activeDescendant()); /** The key used to navigate to the previous widget. */ private readonly _prevKey = computed(() => { diff --git a/src/aria/private/tree/combobox-tree.ts b/src/aria/private/tree/combobox-tree.ts index 70fed29206c3..5e3953ce9baf 100644 --- a/src/aria/private/tree/combobox-tree.ts +++ b/src/aria/private/tree/combobox-tree.ts @@ -27,13 +27,13 @@ export class ComboboxTreePattern role = () => 'tree' as const; /* The id of the active (focused) item in the tree. */ - activeId = computed(() => this.listBehavior.activedescendant()); + activeId = computed(() => this.listBehavior.activeDescendant()); /** The list of items in the tree. */ items = computed(() => this.inputs.allItems()); - /** The tabindex for the tree. Always -1 because the combobox handles focus. */ - override tabindex: SignalLike<-1 | 0> = () => -1; + /** The tab index for the tree. Always -1 because the combobox handles focus. */ + override tabIndex: SignalLike<-1 | 0> = () => -1; constructor(override readonly inputs: ComboboxTreeInputs) { if (inputs.combobox()) { diff --git a/src/aria/private/tree/tree.spec.ts b/src/aria/private/tree/tree.spec.ts index 16bd5fc53349..5507950a1cbc 100644 --- a/src/aria/private/tree/tree.spec.ts +++ b/src/aria/private/tree/tree.spec.ts @@ -282,10 +282,10 @@ describe('Tree Pattern', () => { expect(item1.active()).toBe(true); }); - it('should correctly compute tabindex state', () => { + it('should correctly compute tab index state', () => { const {tree, allItems} = createTree(treeExample, treeInputs); const item0 = getItemByValue(allItems(), 'Item 0'); - expect(item0.tabindex()).toBe(tree.listBehavior.getItemTabindex(item0)); + expect(item0.tabIndex()).toBe(tree.listBehavior.getItemTabindex(item0)); }); it('should navigate next on ArrowDown (vertical)', () => { diff --git a/src/aria/private/tree/tree.ts b/src/aria/private/tree/tree.ts index 2b21c2ac9b27..b39024812695 100644 --- a/src/aria/private/tree/tree.ts +++ b/src/aria/private/tree/tree.ts @@ -93,8 +93,8 @@ export class TreeItemPattern implements ListItem, ExpansionItem { /** Whether the item is active. */ readonly active = computed(() => this.tree().activeItem() === this); - /** The tabindex of the item. */ - readonly tabindex = computed(() => this.tree().listBehavior.getItemTabindex(this)); + /** The tab index of the item. */ + readonly tabIndex = computed(() => this.tree().listBehavior.getItemTabindex(this)); /** Whether the item is selected. */ readonly selected: SignalLike = computed(() => { @@ -188,11 +188,11 @@ export class TreePattern { /** The roow is always visible. */ readonly visible = () => true; - /** The tabindex of the tree. */ - readonly tabindex: SignalLike<-1 | 0> = computed(() => this.listBehavior.tabindex()); + /** The tab index of the tree. */ + readonly tabIndex: SignalLike<-1 | 0> = computed(() => this.listBehavior.tabIndex()); /** The id of the current active item. */ - readonly activedescendant = computed(() => this.listBehavior.activedescendant()); + readonly activeDescendant = computed(() => this.listBehavior.activeDescendant()); /** The direct children of the root (top-level tree items). */ readonly children = computed(() => diff --git a/src/aria/tabs/tabs.ts b/src/aria/tabs/tabs.ts index 11084d8adde7..9fc4bf5ff096 100644 --- a/src/aria/tabs/tabs.ts +++ b/src/aria/tabs/tabs.ts @@ -125,10 +125,10 @@ export class Tabs { host: { 'role': 'tablist', 'class': 'ng-tablist', - '[attr.tabindex]': '_pattern.tabindex()', + '[attr.tabindex]': '_pattern.tabIndex()', '[attr.aria-disabled]': '_pattern.disabled()', '[attr.aria-orientation]': '_pattern.orientation()', - '[attr.aria-activedescendant]': '_pattern.activedescendant()', + '[attr.aria-activedescendant]': '_pattern.activeDescendant()', '(keydown)': '_pattern.onKeydown($event)', '(pointerdown)': '_pattern.onPointerdown($event)', '(focusin)': 'onFocus()', @@ -232,7 +232,7 @@ export class TabList implements OnInit, OnDestroy { 'class': 'ng-tab', '[attr.data-active]': '_pattern.active()', '[attr.id]': '_pattern.id()', - '[attr.tabindex]': '_pattern.tabindex()', + '[attr.tabindex]': '_pattern.tabIndex()', '[attr.aria-selected]': '_pattern.selected()', '[attr.aria-disabled]': '_pattern.disabled()', '[attr.aria-controls]': '_pattern.controls()', @@ -301,7 +301,7 @@ export class Tab implements HasElement, OnInit, OnDestroy { 'role': 'tabpanel', 'class': 'ng-tabpanel', '[attr.id]': '_pattern.id()', - '[attr.tabindex]': '_pattern.tabindex()', + '[attr.tabindex]': '_pattern.tabIndex()', '[attr.inert]': '_pattern.hidden() ? true : null', '[attr.aria-labelledby]': '_pattern.labelledBy()', }, diff --git a/src/aria/toolbar/toolbar.ts b/src/aria/toolbar/toolbar.ts index 8df53db3f665..027bef21cfb8 100644 --- a/src/aria/toolbar/toolbar.ts +++ b/src/aria/toolbar/toolbar.ts @@ -65,7 +65,7 @@ function sortDirectives(a: HasElement, b: HasElement) { host: { 'role': 'toolbar', 'class': 'ng-toolbar', - '[attr.tabindex]': '_pattern.tabindex()', + '[attr.tabindex]': '_pattern.tabIndex()', '[attr.aria-disabled]': '_pattern.disabled()', '[attr.aria-orientation]': '_pattern.orientation()', '(keydown)': '_pattern.onKeydown($event)', @@ -170,7 +170,7 @@ export class Toolbar { host: { 'class': 'ng-toolbar-widget', '[attr.data-active]': '_pattern.active()', - '[attr.tabindex]': '_pattern.tabindex()', + '[attr.tabindex]': '_pattern.tabIndex()', '[attr.inert]': 'hardDisabled() ? true : null', '[attr.disabled]': 'hardDisabled() ? true : null', '[attr.aria-disabled]': '_pattern.disabled()', diff --git a/src/aria/tree/tree.ts b/src/aria/tree/tree.ts index 867f12a0d9e6..6e9d679018a8 100644 --- a/src/aria/tree/tree.ts +++ b/src/aria/tree/tree.ts @@ -77,8 +77,8 @@ function sortDirectives(a: HasElement, b: HasElement) { '[attr.aria-orientation]': '_pattern.orientation()', '[attr.aria-multiselectable]': '_pattern.multi()', '[attr.aria-disabled]': '_pattern.disabled()', - '[attr.aria-activedescendant]': '_pattern.activedescendant()', - '[tabindex]': '_pattern.tabindex()', + '[attr.aria-activedescendant]': '_pattern.activeDescendant()', + '[tabindex]': '_pattern.tabIndex()', '(keydown)': '_pattern.onKeydown($event)', '(pointerdown)': '_pattern.onPointerdown($event)', '(focusin)': 'onFocus()', @@ -230,7 +230,7 @@ export class Tree { '[attr.aria-level]': '_pattern.level()', '[attr.aria-setsize]': '_pattern.setsize()', '[attr.aria-posinset]': '_pattern.posinset()', - '[attr.tabindex]': '_pattern.tabindex()', + '[attr.tabindex]': '_pattern.tabIndex()', }, }) export class TreeItem extends DeferredContentAware implements OnInit, OnDestroy, HasElement {