From 2ce0ccfd26697be774ada09964b81cd845b9b519 Mon Sep 17 00:00:00 2001 From: tjshiu <35056071+tjshiu@users.noreply.github.com> Date: Mon, 27 Oct 2025 23:10:07 -0700 Subject: [PATCH] refactor(multiple): rename skipDisabled to softDisabled The skipDisabled input is renamed to softDisabled to better align with accessibility best practices. --- src/aria/accordion/accordion.spec.ts | 20 ++-- src/aria/accordion/accordion.ts | 4 +- src/aria/grid/grid.ts | 4 +- src/aria/listbox/listbox.spec.ts | 26 ++-- src/aria/listbox/listbox.ts | 4 +- src/aria/menu/menu.ts | 4 +- src/aria/private/accordion/accordion.spec.ts | 2 +- src/aria/private/accordion/accordion.ts | 2 +- .../behaviors/grid-focus/grid-focus.spec.ts | 12 +- .../behaviors/grid-focus/grid-focus.ts | 6 +- .../grid-navigation/grid-navigation.spec.ts | 112 +++++++++--------- .../private/behaviors/grid/grid-focus.spec.ts | 26 ++-- src/aria/private/behaviors/grid/grid-focus.ts | 6 +- .../behaviors/grid/grid-navigation.spec.ts | 4 +- .../behaviors/grid/grid-selection.spec.ts | 2 +- src/aria/private/behaviors/grid/grid.spec.ts | 2 +- .../behaviors/list-focus/list-focus.spec.ts | 10 +- .../behaviors/list-focus/list-focus.ts | 6 +- .../list-navigation/list-navigation.spec.ts | 24 ++-- .../list-typeahead/list-typeahead.spec.ts | 4 +- src/aria/private/behaviors/list/list.spec.ts | 6 +- src/aria/private/combobox/combobox.spec.ts | 4 +- src/aria/private/listbox/listbox.spec.ts | 18 +-- src/aria/private/menu/menu.spec.ts | 4 +- src/aria/private/radio-group/radio-group.ts | 4 +- src/aria/private/radio-group/radio.spec.ts | 20 ++-- .../radio-group/toolbar-radio-group.spec.ts | 4 +- .../radio-group/toolbar-radio-group.ts | 2 +- src/aria/private/tabs/tabs.spec.ts | 8 +- src/aria/private/toolbar/toolbar.spec.ts | 14 +-- src/aria/private/toolbar/toolbar.ts | 6 +- src/aria/private/tree/tree.spec.ts | 50 ++++---- src/aria/private/tree/tree.ts | 6 +- src/aria/radio-group/radio-group.spec.ts | 40 +++---- src/aria/radio-group/radio-group.ts | 4 +- src/aria/tabs/tabs.spec.ts | 18 +-- src/aria/tabs/tabs.ts | 4 +- src/aria/toolbar/toolbar.spec.ts | 24 ++-- src/aria/toolbar/toolbar.ts | 6 +- src/aria/tree/tree.spec.ts | 32 ++--- src/aria/tree/tree.ts | 4 +- .../accordion-configurable-example.html | 4 +- .../accordion-configurable-example.ts | 2 +- .../accordion-disabled-focusable-example.html | 2 +- .../accordion-disabled-skipped-example.html | 2 +- .../cdk-accordion-configurable-example.html | 4 +- .../grid-configurable-example.html | 6 +- .../grid-configurable-example.ts | 2 +- .../listbox-configurable-example.html | 4 +- .../listbox-configurable-example.ts | 2 +- .../listbox-disabled-focusable-example.html | 2 +- .../listbox-disabled-skipped-example.html | 2 +- .../radio-group-configurable-example.html | 4 +- .../radio-group-configurable-example.ts | 2 +- ...adio-group-disabled-focusable-example.html | 2 +- .../tabs-disabled-focusable-example.html | 2 +- .../tabs-disabled-skipped-example.html | 2 +- .../tabs-configurable-example.html | 4 +- .../tabs-configurable-example.ts | 2 +- src/components-examples/aria/toolbar/index.ts | 2 +- .../toolbar-configurable-example.html | 4 +- .../toolbar-configurable-example.ts | 2 +- .../toolbar-soft-disabled-example.html} | 2 +- .../toolbar-soft-disabled-example.ts} | 8 +- .../tree-configurable-example.html | 4 +- .../tree-configurable-example.ts | 2 +- .../tree-disabled-focusable-example.html | 2 +- .../tree-disabled-skipped-example.html | 2 +- src/dev-app/aria-toolbar/toolbar-demo.html | 4 +- src/dev-app/aria-toolbar/toolbar-demo.ts | 4 +- 70 files changed, 322 insertions(+), 322 deletions(-) rename src/components-examples/aria/toolbar/{toolbar-skip-disabled/toolbar-skip-disabled-example.html => toolbar-soft-disabled/toolbar-soft-disabled-example.html} (92%) rename src/components-examples/aria/toolbar/{toolbar-skip-disabled/toolbar-skip-disabled-example.ts => toolbar-soft-disabled/toolbar-soft-disabled-example.ts} (83%) diff --git a/src/aria/accordion/accordion.spec.ts b/src/aria/accordion/accordion.spec.ts index a462023a5db2..ddee39132f8b 100644 --- a/src/aria/accordion/accordion.spec.ts +++ b/src/aria/accordion/accordion.spec.ts @@ -36,7 +36,7 @@ describe('AccordionGroup', () => { multiExpandable?: boolean; disabledGroup?: boolean; disabledItemValues?: string[]; - skipDisabled?: boolean; + softDisabled?: boolean; wrap?: boolean; } @@ -52,8 +52,8 @@ describe('AccordionGroup', () => { if (opts.disabledGroup !== undefined) { testComponent.disabledGroup.set(opts.disabledGroup); } - if (opts.skipDisabled !== undefined) { - testComponent.skipDisabled.set(opts.skipDisabled); + if (opts.softDisabled !== undefined) { + testComponent.softDisabled.set(opts.softDisabled); } if (opts.wrap !== undefined) { testComponent.wrap.set(opts.wrap); @@ -342,17 +342,17 @@ describe('AccordionGroup', () => { }); }); - describe('skipDisabled behavior', () => { - it('should skip disabled items if skipDisabled=true', () => { - configureAccordionComponent({skipDisabled: true, disabledItemValues: ['item-2']}); + describe('softDisabled behavior', () => { + it('should skip disabled items if softDisabled=false', () => { + configureAccordionComponent({softDisabled: false, disabledItemValues: ['item-2']}); expect(isTriggerActive(triggerElements[0])).toBeTrue(); downArrowKey(triggerElements[0]); expect(isTriggerActive(triggerElements[2])).toBeTrue(); }); - it('should focus disabled items if skipDisabled=false', () => { - configureAccordionComponent({skipDisabled: false, disabledItemValues: ['item-2']}); + it('should focus disabled items if softDisabled=true', () => { + configureAccordionComponent({softDisabled: true, disabledItemValues: ['item-2']}); expect(isTriggerActive(triggerElements[0])).toBeTrue(); downArrowKey(triggerElements[0]); @@ -385,7 +385,7 @@ describe('AccordionGroup', () => { [(value)]="value" [multiExpandable]="multiExpandable()" [disabled]="disabledGroup()" - [skipDisabled]="skipDisabled()" + [softDisabled]="softDisabled()" [wrap]="wrap()" > @for (item of items(); track item.value) { @@ -419,7 +419,7 @@ class AccordionGroupExample { value = model([]); multiExpandable = signal(false); disabledGroup = signal(false); - skipDisabled = signal(true); + softDisabled = signal(false); wrap = signal(false); disableItem(itemValue: string, disabled: boolean) { diff --git a/src/aria/accordion/accordion.ts b/src/aria/accordion/accordion.ts index 099380ef1b7e..cc41883ba81a 100644 --- a/src/aria/accordion/accordion.ts +++ b/src/aria/accordion/accordion.ts @@ -170,8 +170,8 @@ export class AccordionGroup { /** The values of the current selected/expanded accordions. */ value = model([]); - /** Whether disabled items should be skipped during keyboard navigation. */ - skipDisabled = input(true, {transform: booleanAttribute}); + /** Whether to allow disabled items to receive focus. */ + softDisabled = input(false, {transform: booleanAttribute}); /** Whether keyboard navigation should wrap around from the last item to the first, and vice-versa. */ wrap = input(false, {transform: booleanAttribute}); diff --git a/src/aria/grid/grid.ts b/src/aria/grid/grid.ts index 5408d8cf332b..6ef88f9f5116 100644 --- a/src/aria/grid/grid.ts +++ b/src/aria/grid/grid.ts @@ -61,8 +61,8 @@ export class Grid { /** Whether the grid is disabled. */ readonly disabled = input(false, {transform: booleanAttribute}); - /** Whether to skip disabled items during navigation. */ - readonly skipDisabled = input(true, {transform: booleanAttribute}); + /** Whether to allow disabled items to receive focus. */ + readonly softDisabled = input(false, {transform: booleanAttribute}); /** The focus strategy used by the grid. */ readonly focusMode = input<'roving' | 'activedescendant'>('roving'); diff --git a/src/aria/listbox/listbox.spec.ts b/src/aria/listbox/listbox.spec.ts index 6241478357f3..f956c66e405d 100644 --- a/src/aria/listbox/listbox.spec.ts +++ b/src/aria/listbox/listbox.spec.ts @@ -53,7 +53,7 @@ describe('Listbox', () => { disabled?: boolean; readonly?: boolean; value?: number[]; - skipDisabled?: boolean; + softDisabled?: boolean; focusMode?: 'roving' | 'activedescendant'; multi?: boolean; wrap?: boolean; @@ -74,7 +74,7 @@ describe('Listbox', () => { if (opts?.disabled !== undefined) testComponent.disabled = opts.disabled; if (opts?.readonly !== undefined) testComponent.readonly = opts.readonly; if (opts?.value !== undefined) testComponent.value = opts.value; - if (opts?.skipDisabled !== undefined) testComponent.skipDisabled = opts.skipDisabled; + if (opts?.softDisabled !== undefined) testComponent.softDisabled = opts.softDisabled; if (opts?.focusMode !== undefined) testComponent.focusMode = opts.focusMode; if (opts?.multi !== undefined) testComponent.multi = opts.multi; if (opts?.wrap !== undefined) testComponent.wrap = opts.wrap; @@ -593,22 +593,22 @@ describe('Listbox', () => { expect(isFocused(1)).toBe(true); }); - it('should skip disabled options with ArrowDown (skipDisabled="true")', () => { + it('should skip disabled options with ArrowDown (softDisabled="false")', () => { setupListbox({ focusMode, orientation: 'vertical', - skipDisabled: true, + softDisabled: false, disabledOptions: [1, 2], }); down(); expect(isFocused(3)).toBe(true); }); - it('should not skip disabled options with ArrowDown (skipDisabled="false")', () => { + it('should not skip disabled options with ArrowDown (softDisabled="true")', () => { setupListbox({ focusMode, orientation: 'vertical', - skipDisabled: false, + softDisabled: true, disabledOptions: [1, 2], }); down(); @@ -641,7 +641,7 @@ describe('Listbox', () => { }); it('should move focus to the clicked disabled option', () => { - setupListbox({focusMode, disabledOptions: [2], skipDisabled: false}); + setupListbox({focusMode, disabledOptions: [2], softDisabled: true}); click(2); expect(isFocused(2)).toBe(true); }); @@ -696,14 +696,14 @@ describe('Listbox', () => { expect(isFocused(0)).toBe(true); })); - it('should skip disabled options with typeahead (skipDisabled=true)', () => { - setupListbox({options: getOptions(), focusMode, disabledOptions: [2], skipDisabled: true}); + it('should skip disabled options with typeahead (softDisabled=false)', () => { + setupListbox({options: getOptions(), focusMode, disabledOptions: [2], softDisabled: false}); type('B'); expect(isFocused(3)).toBe(true); }); - it('should focus disabled options with typeahead if skipDisabled=false', () => { - setupListbox({options: getOptions(), focusMode, disabledOptions: [2], skipDisabled: false}); + it('should focus disabled options with typeahead if softDisabled=true', () => { + setupListbox({options: getOptions(), focusMode, disabledOptions: [2], softDisabled: true}); type('B'); expect(isFocused(2)).toBe(true); }); @@ -749,7 +749,7 @@ interface TestOption { [readonly]="readonly" [focusMode]="focusMode" [orientation]="orientation" - [skipDisabled]="skipDisabled" + [softDisabled]="softDisabled" [multi]="multi" [wrap]="wrap" [selectionMode]="selectionMode" @@ -773,7 +773,7 @@ class ListboxExample { value: number[] = []; disabled = false; readonly = false; - skipDisabled = true; + softDisabled = false; focusMode: 'roving' | 'activedescendant' = 'roving'; orientation: 'vertical' | 'horizontal' = 'vertical'; multi = false; diff --git a/src/aria/listbox/listbox.ts b/src/aria/listbox/listbox.ts index edfad643f061..36d24b8f21c5 100644 --- a/src/aria/listbox/listbox.ts +++ b/src/aria/listbox/listbox.ts @@ -97,8 +97,8 @@ export class Listbox { /** Whether focus should wrap when navigating. */ wrap = input(true, {transform: booleanAttribute}); - /** Whether disabled items in the list should be skipped when navigating. */ - skipDisabled = input(true, {transform: booleanAttribute}); + /** Whether to allow disabled items in the list to receive focus. */ + softDisabled = input(false, {transform: booleanAttribute}); /** The focus strategy used by the list. */ focusMode = input<'roving' | 'activedescendant'>('roving'); diff --git a/src/aria/menu/menu.ts b/src/aria/menu/menu.ts index 882206b6d8d6..01f226437214 100644 --- a/src/aria/menu/menu.ts +++ b/src/aria/menu/menu.ts @@ -166,7 +166,7 @@ export class Menu { ...this, parent: computed(() => this.parent()?._pattern), multi: () => false, - skipDisabled: () => false, + softDisabled: () => true, focusMode: () => 'roving', orientation: () => 'vertical', selectionMode: () => 'explicit', @@ -277,7 +277,7 @@ export class MenuBar { this._pattern = new MenuBarPattern({ ...this, multi: () => false, - skipDisabled: () => false, + softDisabled: () => true, focusMode: () => 'roving', orientation: () => 'horizontal', selectionMode: () => 'explicit', diff --git a/src/aria/private/accordion/accordion.spec.ts b/src/aria/private/accordion/accordion.spec.ts index ccbb5181ceb0..af7f65da0dda 100644 --- a/src/aria/private/accordion/accordion.spec.ts +++ b/src/aria/private/accordion/accordion.spec.ts @@ -66,7 +66,7 @@ describe('Accordion Pattern', () => { multiExpandable: signal(true), items: signal([]), expandedIds: signal([]), - skipDisabled: signal(true), + softDisabled: signal(false), wrap: signal(true), element: signal(document.createElement('div')), }; diff --git a/src/aria/private/accordion/accordion.ts b/src/aria/private/accordion/accordion.ts index 3855da7f5b8b..0ba4286e3d73 100644 --- a/src/aria/private/accordion/accordion.ts +++ b/src/aria/private/accordion/accordion.ts @@ -53,7 +53,7 @@ export class AccordionGroupPattern { this.multiExpandable = inputs.multiExpandable; this.items = inputs.items; this.expandedIds = inputs.expandedIds; - this.skipDisabled = inputs.skipDisabled; + this.softDisabled = inputs.softDisabled; this.focusManager = new ListFocus({ ...inputs, focusMode, 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 70f661556a21..91c75cd41649 100644 --- a/src/aria/private/behaviors/grid-focus/grid-focus.spec.ts +++ b/src/aria/private/behaviors/grid-focus/grid-focus.spec.ts @@ -75,7 +75,7 @@ export function setupGridFocus(inputs: TestSetupInputs = {}): { inputs.focusMode ? inputs.focusMode() : 'roving', ); const disabled = signal(inputs.disabled ? inputs.disabled() : false); - const skipDisabled = signal(inputs.skipDisabled ? inputs.skipDisabled() : true); + const softDisabled = signal(inputs.softDisabled ? inputs.softDisabled() : false); gridFocus.set( new GridFocus({ @@ -83,7 +83,7 @@ export function setupGridFocus(inputs: TestSetupInputs = {}): { activeCoords: activeCoords, focusMode: focusMode, disabled: disabled, - skipDisabled: skipDisabled, + softDisabled: softDisabled, }), ); @@ -292,11 +292,11 @@ describe('GridFocus', () => { expect(gridFocus.isFocusable(cells[0][2])).toBeTrue(); }); - it('should return false if cell is disabled and skipDisabled is true', () => { + it('should return false if cell is disabled and softDisabled is false', () => { const {gridFocus, cells} = setupGridFocus({ numRows: 1, numCols: 3, - skipDisabled: signal(true), + softDisabled: signal(false), }); cells[0][1].disabled.set(true); expect(gridFocus.isFocusable(cells[0][0])).toBeTrue(); @@ -304,11 +304,11 @@ describe('GridFocus', () => { expect(gridFocus.isFocusable(cells[0][2])).toBeTrue(); }); - it('should return true if cell is disabled but skipDisabled is false', () => { + it('should return true if cell is disabled but softDisabled is true', () => { const {gridFocus, cells} = setupGridFocus({ numRows: 1, numCols: 3, - skipDisabled: signal(false), + softDisabled: signal(true), }); cells[0][1].disabled.set(true); expect(gridFocus.isFocusable(cells[0][0])).toBeTrue(); diff --git a/src/aria/private/behaviors/grid-focus/grid-focus.ts b/src/aria/private/behaviors/grid-focus/grid-focus.ts index bacb2b5d9daa..49cec74330d9 100644 --- a/src/aria/private/behaviors/grid-focus/grid-focus.ts +++ b/src/aria/private/behaviors/grid-focus/grid-focus.ts @@ -47,8 +47,8 @@ export interface GridFocusInputs { /** The coordinates (row and column) of the current active cell. */ activeCoords: WritableSignalLike; - /** Whether disabled cells in the grid should be skipped when navigating. */ - skipDisabled: SignalLike; + /** Whether disabled cells in the grid should be focusable. */ + softDisabled: SignalLike; } /** Represents coordinates in a grid. */ @@ -163,7 +163,7 @@ export class GridFocus { /** Returns true if the given cell can be navigated to. */ isFocusable(cell: T): boolean { - return !cell.disabled() || !this.inputs.skipDisabled(); + return !cell.disabled() || this.inputs.softDisabled(); } /** Finds the top-left anchor coordinates of a given cell instance in the grid. */ diff --git a/src/aria/private/behaviors/grid-navigation/grid-navigation.spec.ts b/src/aria/private/behaviors/grid-navigation/grid-navigation.spec.ts index 6d48f217d17f..d7ff9e989d12 100644 --- a/src/aria/private/behaviors/grid-navigation/grid-navigation.spec.ts +++ b/src/aria/private/behaviors/grid-navigation/grid-navigation.spec.ts @@ -42,7 +42,7 @@ type TestGridNavInputs = Partial> & function createGridNav(config: TestGridNavInputs): {gridNav: TestGridNav; cells: TestCell[][]} { const wrap = signal(true); const disabled = signal(false); - const skipDisabled = signal(false); + const softDisabled = signal(true); const focusMode = signal('roving' as const); const activeCoords = signal({row: 0, col: 0}); const wrapBehavior = signal('continuous' as const); @@ -51,7 +51,7 @@ function createGridNav(config: TestGridNavInputs): {gridNav: TestGridNav; cells: disabled, focusMode, activeCoords, - skipDisabled, + softDisabled, ...config, }); @@ -60,7 +60,7 @@ function createGridNav(config: TestGridNavInputs): {gridNav: TestGridNav; cells: disabled, focusMode, activeCoords, - skipDisabled, + softDisabled, wrapBehavior, gridFocus, ...config, @@ -179,10 +179,10 @@ describe('GridNavigation', () => { expect(gridNav.inputs.activeCoords()).toEqual({row: 0, col: 1}); }); - it('(skip disabled: false) should be able to navigate through disabled cells', () => { + it('(soft disabled: true) should be able to navigate through disabled cells', () => { const {gridNav, cells} = createGridNav({ cells: gridA, - skipDisabled: signal(false), + softDisabled: signal(true), activeCoords: signal({row: 1, col: 1}), }); cells[0][1].disabled.set(true); @@ -190,10 +190,10 @@ describe('GridNavigation', () => { expect(gridNav.inputs.activeCoords()).toEqual({row: 0, col: 1}); }); - it('(skip disabled: true) should skip disabled cells', () => { + it('(soft disabled: false) should skip disabled cells', () => { const {gridNav, cells} = createGridNav({ cells: gridA, - skipDisabled: signal(true), + softDisabled: signal(false), activeCoords: signal({row: 2, col: 1}), }); cells[1][1].disabled.set(true); @@ -201,11 +201,11 @@ describe('GridNavigation', () => { expect(gridNav.inputs.activeCoords()).toEqual({row: 0, col: 1}); }); - it('(wrap: false) (skip disabled: true) should not navigate through disabled cells', () => { + it('(wrap: false) (soft disabled: false) should not navigate through disabled cells', () => { const {gridNav, cells} = createGridNav({ cells: gridA, wrap: signal(false), - skipDisabled: signal(true), + softDisabled: signal(false), activeCoords: signal({row: 1, col: 1}), }); cells[0][1].disabled.set(true); @@ -241,7 +241,7 @@ describe('GridNavigation', () => { const {gridNav, cells} = createGridNav({ cells: gridA, wrap: signal(true), - skipDisabled: signal(true), + softDisabled: signal(false), wrapBehavior: signal('loop'), activeCoords: signal({row: 0, col: 1}), }); @@ -254,7 +254,7 @@ describe('GridNavigation', () => { const {gridNav, cells} = createGridNav({ cells: gridA, wrap: signal(true), - skipDisabled: signal(true), + softDisabled: signal(false), wrapBehavior: signal('loop'), activeCoords: signal({row: 0, col: 1}), }); @@ -293,7 +293,7 @@ describe('GridNavigation', () => { const {gridNav, cells} = createGridNav({ cells: gridA, wrap: signal(true), - skipDisabled: signal(true), + softDisabled: signal(false), wrapBehavior: signal('continuous'), activeCoords: signal({row: 0, col: 1}), }); @@ -316,7 +316,7 @@ describe('GridNavigation', () => { const {gridNav, cells} = createGridNav({ cells: gridA, wrap: signal(true), - skipDisabled: signal(true), + softDisabled: signal(false), wrapBehavior: signal('continuous'), activeCoords: signal({row: 0, col: 1}), }); @@ -340,7 +340,7 @@ describe('GridNavigation', () => { const {gridNav, cells} = createGridNav({ cells: gridA, wrap: signal(true), - skipDisabled: signal(true), + softDisabled: signal(false), wrapBehavior: signal('continuous'), activeCoords: signal({row: 1, col: 1}), }); @@ -396,10 +396,10 @@ describe('GridNavigation', () => { expect(gridNav.inputs.activeCoords()).toEqual({row: 1, col: 0}); }); - it('(skip disabled: true) should skip disabled cells', () => { + it('(soft disabled: false) should skip disabled cells', () => { const {gridNav, cells} = createGridNav({ cells: gridB, - skipDisabled: signal(true), + softDisabled: signal(false), activeCoords: signal({row: 2, col: 2}), }); cells[0][2].disabled.set(true); @@ -458,10 +458,10 @@ describe('GridNavigation', () => { expect(gridNav.inputs.activeCoords()).toEqual({row: 2, col: 3}); }); - it('(skip disabled: true) should skip disabled cells', () => { + it('(soft disabled: false) should skip disabled cells', () => { const {gridNav, cells} = createGridNav({ cells: gridC, - skipDisabled: signal(true), + softDisabled: signal(false), activeCoords: signal({row: 1, col: 2}), }); cells[0][0].disabled.set(true); @@ -513,10 +513,10 @@ describe('GridNavigation', () => { expect(gridNav.inputs.activeCoords()).toEqual({row: 3, col: 3}); }); - it('(skip disabled: true) should skip disabled cells', () => { + it('(soft disabled: false) should skip disabled cells', () => { const {gridNav, cells} = createGridNav({ cells: gridD, - skipDisabled: signal(true), + softDisabled: signal(false), activeCoords: signal({row: 3, col: 3}), }); @@ -558,10 +558,10 @@ describe('GridNavigation', () => { expect(gridNav.inputs.activeCoords()).toEqual({row: 2, col: 1}); }); - it('(skip disabled: false) should be able to navigate through disabled cells', () => { + it('(soft disabled: true) should be able to navigate through disabled cells', () => { const {gridNav, cells} = createGridNav({ cells: gridA, - skipDisabled: signal(false), + softDisabled: signal(true), activeCoords: signal({row: 1, col: 1}), }); cells[2][1].disabled.set(true); @@ -569,10 +569,10 @@ describe('GridNavigation', () => { expect(gridNav.inputs.activeCoords()).toEqual({row: 2, col: 1}); }); - it('(skip disabled: true) should skip disabled cells', () => { + it('(soft disabled: false) should skip disabled cells', () => { const {gridNav, cells} = createGridNav({ cells: gridA, - skipDisabled: signal(true), + softDisabled: signal(false), activeCoords: signal({row: 0, col: 1}), }); cells[1][1].disabled.set(true); @@ -580,11 +580,11 @@ describe('GridNavigation', () => { expect(gridNav.inputs.activeCoords()).toEqual({row: 2, col: 1}); }); - it('(wrap: false) (skip disabled: true) should not navigate through disabled cells', () => { + it('(wrap: false) (soft disabled: false) should not navigate through disabled cells', () => { const {gridNav, cells} = createGridNav({ cells: gridA, wrap: signal(false), - skipDisabled: signal(true), + softDisabled: signal(false), activeCoords: signal({row: 1, col: 1}), }); cells[2][1].disabled.set(true); @@ -620,7 +620,7 @@ describe('GridNavigation', () => { const {gridNav, cells} = createGridNav({ cells: gridA, wrap: signal(true), - skipDisabled: signal(true), + softDisabled: signal(false), wrapBehavior: signal('loop'), activeCoords: signal({row: 2, col: 1}), }); @@ -633,7 +633,7 @@ describe('GridNavigation', () => { const {gridNav, cells} = createGridNav({ cells: gridA, wrap: signal(true), - skipDisabled: signal(true), + softDisabled: signal(false), wrapBehavior: signal('loop'), activeCoords: signal({row: 2, col: 1}), }); @@ -661,7 +661,7 @@ describe('GridNavigation', () => { const {gridNav, cells} = createGridNav({ cells: gridA, wrap: signal(true), - skipDisabled: signal(true), + softDisabled: signal(false), wrapBehavior: signal('continuous'), activeCoords: signal({row: 2, col: 1}), }); @@ -678,7 +678,7 @@ describe('GridNavigation', () => { const {gridNav, cells} = createGridNav({ cells: gridA, wrap: signal(true), - skipDisabled: signal(true), + softDisabled: signal(false), wrapBehavior: signal('continuous'), activeCoords: signal({row: 1, col: 1}), }); @@ -733,10 +733,10 @@ describe('GridNavigation', () => { expect(gridNav.inputs.activeCoords()).toEqual({row: 2, col: 2}); }); - it('(skip disabled: true) should skip disabled cells', () => { + it('(soft disabled: false) should skip disabled cells', () => { const {gridNav, cells} = createGridNav({ cells: gridB, - skipDisabled: signal(true), + softDisabled: signal(false), activeCoords: signal({row: 0, col: 0}), }); cells[1][0].disabled.set(true); @@ -789,10 +789,10 @@ describe('GridNavigation', () => { expect(gridNav.inputs.activeCoords()).toEqual({row: 1, col: 0}); }); - it('(skip disabled: false) should be able to navigate through disabled cells', () => { + it('(soft disabled: true) should be able to navigate through disabled cells', () => { const {gridNav, cells} = createGridNav({ cells: gridA, - skipDisabled: signal(false), + softDisabled: signal(true), activeCoords: signal({row: 1, col: 1}), }); cells[1][0].disabled.set(true); @@ -800,10 +800,10 @@ describe('GridNavigation', () => { expect(gridNav.inputs.activeCoords()).toEqual({row: 1, col: 0}); }); - it('(skip disabled: true) should skip disabled cells', () => { + it('(soft disabled: false) should skip disabled cells', () => { const {gridNav, cells} = createGridNav({ cells: gridA, - skipDisabled: signal(true), + softDisabled: signal(false), activeCoords: signal({row: 1, col: 2}), }); cells[1][1].disabled.set(true); @@ -811,11 +811,11 @@ describe('GridNavigation', () => { expect(gridNav.inputs.activeCoords()).toEqual({row: 1, col: 0}); }); - it('(wrap: false) (skip disabled: true) should not navigate through disabled cells', () => { + it('(wrap: false) (soft disabled: false) should not navigate through disabled cells', () => { const {gridNav, cells} = createGridNav({ cells: gridA, wrap: signal(false), - skipDisabled: signal(true), + softDisabled: signal(false), activeCoords: signal({row: 1, col: 1}), }); cells[1][0].disabled.set(true); @@ -851,7 +851,7 @@ describe('GridNavigation', () => { const {gridNav, cells} = createGridNav({ cells: gridA, wrap: signal(true), - skipDisabled: signal(true), + softDisabled: signal(false), wrapBehavior: signal('loop'), activeCoords: signal({row: 1, col: 0}), }); @@ -864,7 +864,7 @@ describe('GridNavigation', () => { const {gridNav, cells} = createGridNav({ cells: gridA, wrap: signal(true), - skipDisabled: signal(true), + softDisabled: signal(false), wrapBehavior: signal('loop'), activeCoords: signal({row: 1, col: 0}), }); @@ -892,7 +892,7 @@ describe('GridNavigation', () => { const {gridNav, cells} = createGridNav({ cells: gridA, wrap: signal(true), - skipDisabled: signal(true), + softDisabled: signal(false), wrapBehavior: signal('continuous'), activeCoords: signal({row: 1, col: 0}), }); @@ -909,7 +909,7 @@ describe('GridNavigation', () => { const {gridNav, cells} = createGridNav({ cells: gridA, wrap: signal(true), - skipDisabled: signal(true), + softDisabled: signal(false), wrapBehavior: signal('continuous'), activeCoords: signal({row: 1, col: 1}), }); @@ -973,10 +973,10 @@ describe('GridNavigation', () => { expect(gridNav.inputs.activeCoords()).toEqual({row: 2, col: 2}); }); - it('(skip disabled: true) should skip disabled cells', () => { + it('(soft disabled: false) should skip disabled cells', () => { const {gridNav, cells} = createGridNav({ cells: gridC, - skipDisabled: signal(true), + softDisabled: signal(false), activeCoords: signal({row: 0, col: 3}), }); @@ -1031,10 +1031,10 @@ describe('GridNavigation', () => { expect(gridNav.inputs.activeCoords()).toEqual({row: 1, col: 2}); }); - it('(skip disabled: false) should be able to navigate through disabled cells', () => { + it('(soft disabled: true) should be able to navigate through disabled cells', () => { const {gridNav, cells} = createGridNav({ cells: gridA, - skipDisabled: signal(false), + softDisabled: signal(true), activeCoords: signal({row: 1, col: 1}), }); cells[1][2].disabled.set(true); @@ -1042,10 +1042,10 @@ describe('GridNavigation', () => { expect(gridNav.inputs.activeCoords()).toEqual({row: 1, col: 2}); }); - it('(skip disabled: true) should skip disabled cells', () => { + it('(soft disabled: false) should skip disabled cells', () => { const {gridNav, cells} = createGridNav({ cells: gridA, - skipDisabled: signal(true), + softDisabled: signal(false), activeCoords: signal({row: 1, col: 0}), }); cells[1][1].disabled.set(true); @@ -1053,11 +1053,11 @@ describe('GridNavigation', () => { expect(gridNav.inputs.activeCoords()).toEqual({row: 1, col: 2}); }); - it('(wrap: false) (skip disabled: true) should not navigate through disabled cells', () => { + it('(wrap: false) (soft disabled: false) should not navigate through disabled cells', () => { const {gridNav, cells} = createGridNav({ cells: gridA, wrap: signal(false), - skipDisabled: signal(true), + softDisabled: signal(false), activeCoords: signal({row: 1, col: 1}), }); cells[1][2].disabled.set(true); @@ -1093,7 +1093,7 @@ describe('GridNavigation', () => { const {gridNav, cells} = createGridNav({ cells: gridA, wrap: signal(true), - skipDisabled: signal(true), + softDisabled: signal(false), wrapBehavior: signal('loop'), activeCoords: signal({row: 1, col: 2}), }); @@ -1106,7 +1106,7 @@ describe('GridNavigation', () => { const {gridNav, cells} = createGridNav({ cells: gridA, wrap: signal(true), - skipDisabled: signal(true), + softDisabled: signal(false), wrapBehavior: signal('loop'), activeCoords: signal({row: 1, col: 2}), }); @@ -1134,7 +1134,7 @@ describe('GridNavigation', () => { const {gridNav, cells} = createGridNav({ cells: gridA, wrap: signal(true), - skipDisabled: signal(true), + softDisabled: signal(false), wrapBehavior: signal('continuous'), activeCoords: signal({row: 1, col: 2}), }); @@ -1151,7 +1151,7 @@ describe('GridNavigation', () => { const {gridNav, cells} = createGridNav({ cells: gridA, wrap: signal(true), - skipDisabled: signal(true), + softDisabled: signal(false), wrapBehavior: signal('continuous'), activeCoords: signal({row: 1, col: 1}), }); @@ -1215,10 +1215,10 @@ describe('GridNavigation', () => { expect(gridNav.inputs.activeCoords()).toEqual({row: 0, col: 2}); }); - it('(skip disabled: true) should skip disabled cells', () => { + it('(soft disabled: false) should skip disabled cells', () => { const {gridNav, cells} = createGridNav({ cells: gridC, - skipDisabled: signal(true), + softDisabled: signal(false), activeCoords: signal({row: 0, col: 0}), }); cells[0][1].disabled.set(true); diff --git a/src/aria/private/behaviors/grid/grid-focus.spec.ts b/src/aria/private/behaviors/grid/grid-focus.spec.ts index d9f582dae2be..f9e26bcdeb66 100644 --- a/src/aria/private/behaviors/grid/grid-focus.spec.ts +++ b/src/aria/private/behaviors/grid/grid-focus.spec.ts @@ -40,7 +40,7 @@ function setupGridFocus( grid: gridData, focusMode: signal('roving'), disabled: signal(false), - skipDisabled: signal(true), + softDisabled: signal(false), ...gridFocusInputs, }); } @@ -261,18 +261,18 @@ describe('GridFocus', () => { expect(gridFocus.isFocusable(cells[1][1])).toBe(true); }); - it('should return false for a disabled cell when skipDisabled is true', () => { + it('should return false for a disabled cell when softDisabled is false', () => { const cells = createTestGrid(createGridA); - const gridFocus = setupGridFocus(signal(cells), {skipDisabled: signal(true)}); + const gridFocus = setupGridFocus(signal(cells), {softDisabled: signal(false)}); cells[1][1].disabled.set(true); expect(gridFocus.isFocusable(cells[1][1])).toBe(false); }); - it('should return true for a disabled cell when skipDisabled is false', () => { + it('should return true for a disabled cell when softDisabled is true', () => { const cells = createTestGrid(createGridA); - const gridFocus = setupGridFocus(signal(cells), {skipDisabled: signal(false)}); + const gridFocus = setupGridFocus(signal(cells), {softDisabled: signal(true)}); cells[1][1].disabled.set(true); @@ -292,9 +292,9 @@ describe('GridFocus', () => { expect(gridFocus.activeCoords()).toEqual({row: 1, col: 1}); }); - it('should not focus a disabled cell if skipDisabled is true', () => { + it('should not focus a disabled cell if softDisabled is false', () => { const cells = createTestGrid(createGridA); - const gridFocus = setupGridFocus(signal(cells), {skipDisabled: signal(true)}); + const gridFocus = setupGridFocus(signal(cells), {softDisabled: signal(false)}); gridFocus.focusCell(cells[0][0]); cells[1][1].disabled.set(true); @@ -306,9 +306,9 @@ describe('GridFocus', () => { expect(gridFocus.activeCoords()).toEqual({row: 0, col: 0}); }); - it('should focus a disabled cell if skipDisabled is false', () => { + it('should focus a disabled cell if softDisabled is true', () => { const cells = createTestGrid(createGridA); - const gridFocus = setupGridFocus(signal(cells), {skipDisabled: signal(false)}); + const gridFocus = setupGridFocus(signal(cells), {softDisabled: signal(true)}); cells[1][1].disabled.set(true); const result = gridFocus.focusCell(cells[1][1]); @@ -342,9 +342,9 @@ describe('GridFocus', () => { expect(gridFocus.activeCoords()).toEqual({row: 1, col: 2}); }); - it('should not focus coordinates of a disabled cell if skipDisabled is true', () => { + it('should not focus coordinates of a disabled cell if softDisabled is false', () => { const cells = createTestGrid(createGridD); - const gridFocus = setupGridFocus(signal(cells), {skipDisabled: signal(true)}); + const gridFocus = setupGridFocus(signal(cells), {softDisabled: signal(false)}); gridFocus.focusCoordinates({row: 0, col: 0}); cells[1][0].disabled.set(true); // This cell spans {row: 1, col: 2} @@ -356,9 +356,9 @@ describe('GridFocus', () => { expect(gridFocus.activeCoords()).toEqual({row: 0, col: 0}); }); - it('should focus coordinates of a disabled cell if skipDisabled is false', () => { + it('should focus coordinates of a disabled cell if softDisabled is true', () => { const cells = createTestGrid(createGridD); - const gridFocus = setupGridFocus(signal(cells), {skipDisabled: signal(false)}); + const gridFocus = setupGridFocus(signal(cells), {softDisabled: signal(true)}); cells[1][0].disabled.set(true); // This cell spans {row: 1, col: 2} const result = gridFocus.focusCoordinates({row: 1, col: 2}); diff --git a/src/aria/private/behaviors/grid/grid-focus.ts b/src/aria/private/behaviors/grid/grid-focus.ts index 435a5d6abfeb..74bb8f9e83d6 100644 --- a/src/aria/private/behaviors/grid/grid-focus.ts +++ b/src/aria/private/behaviors/grid/grid-focus.ts @@ -30,8 +30,8 @@ export interface GridFocusInputs { /** Whether the grid is disabled. */ disabled: SignalLike; - /** Whether disabled cells in the grid should be skipped when navigating. */ - skipDisabled: SignalLike; + /** Whether disabled cells in the grid should be focusable. */ + softDisabled: SignalLike; } /** Dependencies for the `GridFocus` class. */ @@ -118,7 +118,7 @@ export class GridFocus { /** Returns true if the given cell can be navigated to. */ isFocusable(cell: T): boolean { - return !cell.disabled() || !this.inputs.skipDisabled(); + return !cell.disabled() || this.inputs.softDisabled(); } /** Focuses the given cell. */ diff --git a/src/aria/private/behaviors/grid/grid-navigation.spec.ts b/src/aria/private/behaviors/grid/grid-navigation.spec.ts index f93d2cb52a09..0dd60cdf1850 100644 --- a/src/aria/private/behaviors/grid/grid-navigation.spec.ts +++ b/src/aria/private/behaviors/grid/grid-navigation.spec.ts @@ -51,7 +51,7 @@ function setupGridNavigation( const gridFocusInputs: GridFocusInputs = { focusMode: signal('roving'), disabled: signal(false), - skipDisabled: signal(true), + softDisabled: signal(false), }; const gridFocus = new GridFocus({ grid: gridData, @@ -90,7 +90,7 @@ describe('GridNavigation', () => { it('should return false if the cell cannot be focused', () => { const cells = createTestGrid(createGridA); const {gridNav, gridFocus} = setupGridNavigation(signal(cells), { - skipDisabled: signal(true), + softDisabled: signal(false), }); cells[1][1].disabled.set(true); diff --git a/src/aria/private/behaviors/grid/grid-selection.spec.ts b/src/aria/private/behaviors/grid/grid-selection.spec.ts index 75dd4b7c80c3..7f3fab28d58f 100644 --- a/src/aria/private/behaviors/grid/grid-selection.spec.ts +++ b/src/aria/private/behaviors/grid/grid-selection.spec.ts @@ -47,7 +47,7 @@ function setupGridSelection( const gridFocusInputs: GridFocusInputs = { focusMode: signal('roving'), disabled: signal(false), - skipDisabled: signal(true), + softDisabled: signal(false), }; const gridFocus = new GridFocus({ grid: gridData, diff --git a/src/aria/private/behaviors/grid/grid.spec.ts b/src/aria/private/behaviors/grid/grid.spec.ts index d2ceb823bf8b..332bba3ec424 100644 --- a/src/aria/private/behaviors/grid/grid.spec.ts +++ b/src/aria/private/behaviors/grid/grid.spec.ts @@ -43,7 +43,7 @@ function setupGrid( cells, focusMode: signal('roving'), disabled: signal(false), - skipDisabled: signal(true), + softDisabled: signal(false), rowWrap: signal('loop'), colWrap: signal('loop'), enableSelection: signal(true), 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 cb9cce52279f..676e396569ff 100644 --- a/src/aria/private/behaviors/list-focus/list-focus.spec.ts +++ b/src/aria/private/behaviors/list-focus/list-focus.spec.ts @@ -22,7 +22,7 @@ export function getListFocus(inputs: TestInputs = {}): ListFocus return new ListFocus({ activeItem: signal(items()[0]), disabled: signal(false), - skipDisabled: signal(false), + softDisabled: signal(true), focusMode: signal('roving'), element: signal({focus: () => {}} as HTMLElement), items: items, @@ -109,7 +109,7 @@ describe('List Focus', () => { describe('#isFocusable', () => { it('should return true for enabled items', () => { - const focusManager = getListFocus({skipDisabled: signal(true)}); + const focusManager = getListFocus({softDisabled: signal(false)}); const items = focusManager.inputs.items() as TestItem[]; expect(focusManager.isFocusable(items[0])).toBeTrue(); expect(focusManager.isFocusable(items[1])).toBeTrue(); @@ -117,7 +117,7 @@ describe('List Focus', () => { }); it('should return false for disabled items', () => { - const focusManager = getListFocus({skipDisabled: signal(true)}); + const focusManager = getListFocus({softDisabled: signal(false)}); const items = focusManager.inputs.items() as TestItem[]; items[1].disabled.set(true); @@ -126,8 +126,8 @@ describe('List Focus', () => { expect(focusManager.isFocusable(items[2])).toBeTrue(); }); - it('should return true for disabled items if skip disabled is false', () => { - const focusManager = getListFocus({skipDisabled: signal(false)}); + it('should return true for disabled items if soft disabled is true', () => { + const focusManager = getListFocus({softDisabled: signal(true)}); const items = focusManager.inputs.items() as TestItem[]; items[1].disabled.set(true); diff --git a/src/aria/private/behaviors/list-focus/list-focus.ts b/src/aria/private/behaviors/list-focus/list-focus.ts index 53e1c47fd174..5da16de7f18b 100644 --- a/src/aria/private/behaviors/list-focus/list-focus.ts +++ b/src/aria/private/behaviors/list-focus/list-focus.ts @@ -38,8 +38,8 @@ export interface ListFocusInputs { /** The active item. */ activeItem: WritableSignalLike; - /** Whether disabled items in the list should be skipped when navigating. */ - skipDisabled: SignalLike; + /** Whether disabled items in the list should be focusable. */ + softDisabled: SignalLike; element: SignalLike; } @@ -116,6 +116,6 @@ export class ListFocus { /** Returns true if the given item can be navigated to. */ isFocusable(item: T): boolean { - return !item.disabled() || !this.inputs.skipDisabled(); + return !item.disabled() || this.inputs.softDisabled(); } } diff --git a/src/aria/private/behaviors/list-navigation/list-navigation.spec.ts b/src/aria/private/behaviors/list-navigation/list-navigation.spec.ts index 04bc68f605af..a3f3e600c15d 100644 --- a/src/aria/private/behaviors/list-navigation/list-navigation.spec.ts +++ b/src/aria/private/behaviors/list-navigation/list-navigation.spec.ts @@ -73,7 +73,7 @@ describe('List Navigation', () => { }); it('should skip disabled items', () => { - const nav = getNavigation({skipDisabled: signal(true)}); + const nav = getNavigation({softDisabled: signal(false)}); const items = nav.inputs.items() as TestItem[]; items[1].disabled.set(true); nav.next(); // 0 -> 2 @@ -81,7 +81,7 @@ describe('List Navigation', () => { }); it('should not skip disabled items', () => { - const nav = getNavigation({skipDisabled: signal(false)}); + const nav = getNavigation({softDisabled: signal(true)}); const items = nav.inputs.items() as TestItem[]; items[1].disabled.set(true); nav.next(); // 0 -> 1 @@ -91,7 +91,7 @@ describe('List Navigation', () => { it('should wrap and skip disabled items', () => { const nav = getNavigation({ wrap: signal(true), - skipDisabled: signal(true), + softDisabled: signal(false), }); const items = nav.inputs.items() as TestItem[]; items[2].disabled.set(true); @@ -105,7 +105,7 @@ describe('List Navigation', () => { }); it('should do nothing if other items are disabled', () => { - const nav = getNavigation({skipDisabled: signal(true)}); + const nav = getNavigation({softDisabled: signal(false)}); const items = nav.inputs.items() as TestItem[]; items[1].disabled.set(true); items[2].disabled.set(true); @@ -150,7 +150,7 @@ describe('List Navigation', () => { }); it('should skip disabled items', () => { - const nav = getNavigation({skipDisabled: signal(true)}); + const nav = getNavigation({softDisabled: signal(false)}); nav.goto(nav.inputs.items()[2]); const items = nav.inputs.items() as TestItem[]; items[1].disabled.set(true); @@ -159,7 +159,7 @@ describe('List Navigation', () => { }); it('should not skip disabled items', () => { - const nav = getNavigation({skipDisabled: signal(false)}); + const nav = getNavigation({softDisabled: signal(true)}); nav.goto(nav.inputs.items()[2]); const items = nav.inputs.items() as TestItem[]; items[1].disabled.set(true); @@ -170,7 +170,7 @@ describe('List Navigation', () => { it('should wrap and skip disabled items', () => { const nav = getNavigation({ wrap: signal(true), - skipDisabled: signal(true), + softDisabled: signal(false), }); nav.goto(nav.inputs.items()[2]); const items = nav.inputs.items() as TestItem[]; @@ -182,7 +182,7 @@ describe('List Navigation', () => { it('should do nothing if other items are disabled', () => { const nav = getNavigation({ - skipDisabled: signal(true), + softDisabled: signal(false), }); const items = nav.inputs.items() as TestItem[]; items[1].disabled.set(true); @@ -209,7 +209,7 @@ describe('List Navigation', () => { }); it('should skip disabled items', () => { - const nav = getNavigation({skipDisabled: signal(true)}); + const nav = getNavigation({softDisabled: signal(false)}); nav.goto(nav.inputs.items()[2]); const items = nav.inputs.items() as TestItem[]; items[0].disabled.set(true); @@ -218,7 +218,7 @@ describe('List Navigation', () => { }); it('should not skip disabled items', () => { - const nav = getNavigation({skipDisabled: signal(false)}); + const nav = getNavigation({softDisabled: signal(true)}); nav.goto(nav.inputs.items()[2]); const items = nav.inputs.items() as TestItem[]; items[0].disabled.set(true); @@ -236,7 +236,7 @@ describe('List Navigation', () => { it('should skip disabled items', () => { const nav = getNavigation({ - skipDisabled: signal(true), + softDisabled: signal(false), }); const items = nav.inputs.items() as TestItem[]; items[4].disabled.set(true); @@ -246,7 +246,7 @@ describe('List Navigation', () => { it('should not skip disabled items', () => { const nav = getNavigation({ - skipDisabled: signal(false), + softDisabled: signal(true), }); const items = nav.inputs.items() as TestItem[]; items[4].disabled.set(true); diff --git a/src/aria/private/behaviors/list-typeahead/list-typeahead.spec.ts b/src/aria/private/behaviors/list-typeahead/list-typeahead.spec.ts index 34c57899e4ca..3d5296035a04 100644 --- a/src/aria/private/behaviors/list-typeahead/list-typeahead.spec.ts +++ b/src/aria/private/behaviors/list-typeahead/list-typeahead.spec.ts @@ -80,14 +80,14 @@ describe('List Typeahead', () => { it('should skip disabled items', () => { items[1].disabled.set(true); - (typeahead.inputs.skipDisabled as WritableSignal).set(true); + (typeahead.inputs.softDisabled as WritableSignal).set(false); typeahead.search('i'); expect(typeahead.inputs.focusManager.activeIndex()).toBe(2); }); it('should not skip disabled items', () => { items[1].disabled.set(true); - (typeahead.inputs.skipDisabled as WritableSignal).set(false); + (typeahead.inputs.softDisabled as WritableSignal).set(true); typeahead.search('i'); expect(typeahead.inputs.focusManager.activeIndex()).toBe(1); }); diff --git a/src/aria/private/behaviors/list/list.spec.ts b/src/aria/private/behaviors/list/list.spec.ts index 82e7c45c8ba7..34c7b7e578a8 100644 --- a/src/aria/private/behaviors/list/list.spec.ts +++ b/src/aria/private/behaviors/list/list.spec.ts @@ -33,7 +33,7 @@ describe('List Behavior', () => { orientation: inputs.orientation ?? signal('vertical'), element: signal({focus: () => {}} as HTMLElement), focusMode: inputs.focusMode ?? signal('roving'), - skipDisabled: inputs.skipDisabled ?? signal(true), + softDisabled: inputs.softDisabled ?? signal(false), selectionMode: signal('explicit'), ...inputs, }); @@ -187,8 +187,8 @@ describe('List Behavior', () => { expect(list.inputs.activeItem()).toBe(list.inputs.items()[0]); // Should skip back to 'Apple' }); - it('should not skip disabled items when skipDisabled is false', () => { - const {list, items} = getDefaultPatterns({skipDisabled: signal(false)}); + it('should not skip disabled items when softDisabled is true', () => { + const {list, items} = getDefaultPatterns({softDisabled: signal(true)}); items[1].disabled.set(true); // Disable second item expect(list.inputs.activeItem()).toBe(list.inputs.items()[0]); list.next(); diff --git a/src/aria/private/combobox/combobox.spec.ts b/src/aria/private/combobox/combobox.spec.ts index 18fe774b8b9b..0b78c7fc4670 100644 --- a/src/aria/private/combobox/combobox.spec.ts +++ b/src/aria/private/combobox/combobox.spec.ts @@ -128,7 +128,7 @@ function getListboxPattern( wrap: signal(true), readonly: signal(false), disabled: signal(false), - skipDisabled: signal(true), + softDisabled: signal(false), multi: signal(false), focusMode: signal('activedescendant'), textDirection: signal('ltr'), @@ -171,7 +171,7 @@ function getTreePattern( typeaheadDelay: signal(0.5), wrap: signal(true), disabled: signal(false), - skipDisabled: signal(true), + softDisabled: signal(false), multi: signal(false), focusMode: signal('activedescendant'), textDirection: signal('ltr'), diff --git a/src/aria/private/listbox/listbox.spec.ts b/src/aria/private/listbox/listbox.spec.ts index da3244c187b4..f926b500efe3 100644 --- a/src/aria/private/listbox/listbox.spec.ts +++ b/src/aria/private/listbox/listbox.spec.ts @@ -40,7 +40,7 @@ describe('Listbox Pattern', () => { wrap: inputs.wrap ?? signal(true), readonly: inputs.readonly ?? signal(false), disabled: inputs.disabled ?? signal(false), - skipDisabled: inputs.skipDisabled ?? signal(true), + softDisabled: inputs.softDisabled ?? signal(false), multi: inputs.multi ?? signal(false), focusMode: inputs.focusMode ?? signal('roving'), textDirection: inputs.textDirection ?? signal('ltr'), @@ -381,7 +381,7 @@ describe('Listbox Pattern', () => { }); it('should not change the selected state of disabled options on Shift + ArrowUp / ArrowDown', () => { - (listbox.inputs.skipDisabled as WritableSignal).set(false); + (listbox.inputs.softDisabled as WritableSignal).set(true); options[1].disabled.set(true); listbox.onKeydown(shift()); listbox.onKeydown(down({shift: true})); @@ -545,7 +545,7 @@ describe('Listbox Pattern', () => { it('should not select disabled options', () => { options[2].disabled.set(true); - (listbox.inputs.skipDisabled as WritableSignal).set(false); + (listbox.inputs.softDisabled as WritableSignal).set(true); expect(listbox.inputs.value()).toEqual(['Apple']); listbox.onKeydown(down()); expect(listbox.inputs.value()).toEqual(['Apricot']); @@ -714,7 +714,7 @@ describe('Listbox Pattern', () => { it('should select a range up to but not including a disabled option on shift + click', () => { const {listbox, options} = getDefaultPatterns({ multi: signal(true), - skipDisabled: signal(false), + softDisabled: signal(true), selectionMode: signal('follow'), }); options[2].disabled.set(true); @@ -730,7 +730,7 @@ describe('Listbox Pattern', () => { it('should do nothing on click if the option is disabled', () => { const {listbox, options} = getDefaultPatterns({ multi: signal(true), - skipDisabled: signal(true), + softDisabled: signal(false), selectionMode: signal('follow'), }); options[2].disabled.set(true); @@ -796,7 +796,7 @@ describe('Listbox Pattern', () => { it('should set the active index to the first focusable option', () => { const {listbox, options} = getDefaultPatterns({ - skipDisabled: signal(true), + softDisabled: signal(false), }); options[0].disabled.set(true); listbox.setDefaultState(); @@ -806,7 +806,7 @@ describe('Listbox Pattern', () => { it('should set the active index to the first selected option', () => { const {listbox} = getDefaultPatterns({ value: signal(['Banana']), - skipDisabled: signal(true), + softDisabled: signal(false), }); listbox.setDefaultState(); expect(listbox.inputs.activeItem()).toBe(listbox.inputs.items()[2]); @@ -815,7 +815,7 @@ describe('Listbox Pattern', () => { it('should set the active index to the first focusable selected option', () => { const {listbox, options} = getDefaultPatterns({ value: signal(['Banana', 'Blackberry']), - skipDisabled: signal(true), + softDisabled: signal(false), }); options[2].disabled.set(true); listbox.setDefaultState(); @@ -825,7 +825,7 @@ describe('Listbox Pattern', () => { it('should set the active index to the first option if no selected option is focusable', () => { const {listbox, options} = getDefaultPatterns({ value: signal(['Banana']), - skipDisabled: signal(true), + softDisabled: signal(false), }); options[2].disabled.set(true); listbox.setDefaultState(); diff --git a/src/aria/private/menu/menu.spec.ts b/src/aria/private/menu/menu.spec.ts index 689af41216f0..6dcb048e9cc9 100644 --- a/src/aria/private/menu/menu.spec.ts +++ b/src/aria/private/menu/menu.spec.ts @@ -60,7 +60,7 @@ function getMenuBarPattern(values: string[]) { value: signal([]), wrap: signal(true), typeaheadDelay: signal(0.5), - skipDisabled: signal(true), + softDisabled: signal(false), focusMode: signal('activedescendant'), element: signal(document.createElement('div')), }); @@ -97,7 +97,7 @@ function getMenuPattern( activeItem: signal(undefined), typeaheadDelay: signal(0.5), wrap: signal(true), - skipDisabled: signal(true), + softDisabled: signal(false), multi: signal(false), focusMode: signal('activedescendant'), textDirection: signal('ltr'), diff --git a/src/aria/private/radio-group/radio-group.ts b/src/aria/private/radio-group/radio-group.ts index 93026a3decd9..31fe4802cc72 100644 --- a/src/aria/private/radio-group/radio-group.ts +++ b/src/aria/private/radio-group/radio-group.ts @@ -164,9 +164,9 @@ export class RadioGroupPattern { validate(): string[] { const violations: string[] = []; - if (this.selectedItem()?.disabled() && this.inputs.skipDisabled()) { + if (this.selectedItem()?.disabled() && !this.inputs.softDisabled()) { violations.push( - "Accessibility Violation: The selected radio button is disabled while 'skipDisabled' is true, making the selection unreachable via keyboard.", + "Accessibility Violation: The selected radio button is disabled while 'softDisabled' is false, making the selection unreachable via keyboard.", ); } diff --git a/src/aria/private/radio-group/radio.spec.ts b/src/aria/private/radio-group/radio.spec.ts index adff7b0ac5d2..1292e71126e3 100644 --- a/src/aria/private/radio-group/radio.spec.ts +++ b/src/aria/private/radio-group/radio.spec.ts @@ -36,7 +36,7 @@ describe('RadioGroup Pattern', () => { element: signal(document.createElement('div')), readonly: inputs.readonly ?? signal(false), disabled: inputs.disabled ?? signal(false), - skipDisabled: inputs.skipDisabled ?? signal(true), + softDisabled: inputs.softDisabled ?? signal(false), focusMode: inputs.focusMode ?? signal('roving'), textDirection: inputs.textDirection ?? signal('ltr'), orientation: inputs.orientation ?? signal('vertical'), @@ -138,8 +138,8 @@ describe('RadioGroup Pattern', () => { expect(radioGroup.inputs.activeItem()).toBe(radioButtons[4]); }); - it('should skip disabled radios when skipDisabled is true', () => { - const {radioGroup, radioButtons} = getDefaultPatterns({skipDisabled: signal(true)}); + it('should skip disabled radios when softDisabled is false', () => { + const {radioGroup, radioButtons} = getDefaultPatterns({softDisabled: signal(false)}); radioButtons[1].disabled.set(true); radioGroup.onKeydown(down()); expect(radioGroup.inputs.activeItem()).toBe(radioButtons[2]); @@ -147,8 +147,8 @@ describe('RadioGroup Pattern', () => { expect(radioGroup.inputs.activeItem()).toBe(radioButtons[0]); }); - it('should not skip disabled radios when skipDisabled is false', () => { - const {radioGroup, radioButtons} = getDefaultPatterns({skipDisabled: signal(false)}); + it('should not skip disabled radios when softDisabled is true', () => { + const {radioGroup, radioButtons} = getDefaultPatterns({softDisabled: signal(true)}); radioButtons[1].disabled.set(true); radioGroup.onKeydown(down()); expect(radioGroup.inputs.activeItem()).toBe(radioButtons[1]); @@ -213,7 +213,7 @@ describe('RadioGroup Pattern', () => { it('should not select a disabled radio via keyboard', () => { const {radioGroup, radioButtons} = getPatterns(['A', 'B', 'C'], { - skipDisabled: signal(false), + softDisabled: signal(true), }); radioButtons[1].disabled.set(true); @@ -271,7 +271,7 @@ describe('RadioGroup Pattern', () => { }); it('should set the active index to the first focusable radio', () => { - const {radioGroup, radioButtons} = getDefaultPatterns({skipDisabled: signal(true)}); + const {radioGroup, radioButtons} = getDefaultPatterns({softDisabled: signal(false)}); radioButtons[0].disabled.set(true); radioGroup.setDefaultState(); expect(radioGroup.inputs.activeItem()).toBe(radioButtons[1]); @@ -286,7 +286,7 @@ describe('RadioGroup Pattern', () => { it('should set the active index to the first focusable radio if selected is disabled', () => { const {radioGroup, radioButtons} = getDefaultPatterns({ value: signal(['Cherry']), - skipDisabled: signal(true), + softDisabled: signal(false), }); radioButtons[2].disabled.set(true); // Disable Cherry radioGroup.setDefaultState(); @@ -295,10 +295,10 @@ describe('RadioGroup Pattern', () => { }); describe('validate', () => { - it('should report a violation if the selected item is disabled and skipDisabled is true', () => { + it('should report a violation if the selected item is disabled and softDisabled is false', () => { const {radioGroup, radioButtons} = getDefaultPatterns({ value: signal(['Banana']), - skipDisabled: signal(true), + softDisabled: signal(false), }); radioButtons[1].disabled.set(true); // Disable the selected item. const violations = radioGroup.validate(); diff --git a/src/aria/private/radio-group/toolbar-radio-group.spec.ts b/src/aria/private/radio-group/toolbar-radio-group.spec.ts index 449c6ca72841..52566c97215e 100644 --- a/src/aria/private/radio-group/toolbar-radio-group.spec.ts +++ b/src/aria/private/radio-group/toolbar-radio-group.spec.ts @@ -32,7 +32,7 @@ describe('ToolbarRadioGroup Pattern', () => { element: signal(document.createElement('div')), readonly: inputs.readonly ?? signal(false), disabled: inputs.disabled ?? signal(false), - skipDisabled: inputs.skipDisabled ?? signal(true), + softDisabled: inputs.softDisabled ?? signal(false), focusMode: inputs.focusMode ?? signal('roving'), textDirection: inputs.textDirection ?? signal('ltr'), orientation: inputs.orientation ?? signal('vertical'), @@ -79,7 +79,7 @@ describe('ToolbarRadioGroup Pattern', () => { orientation: signal('horizontal'), textDirection: signal('ltr'), disabled: signal(false), - skipDisabled: signal(true), + softDisabled: signal(false), wrap: signal(false), getItem: (e: Element) => undefined, }); diff --git a/src/aria/private/radio-group/toolbar-radio-group.ts b/src/aria/private/radio-group/toolbar-radio-group.ts index 80b7d0de16c8..c49adf79ec65 100644 --- a/src/aria/private/radio-group/toolbar-radio-group.ts +++ b/src/aria/private/radio-group/toolbar-radio-group.ts @@ -25,7 +25,7 @@ export class ToolbarRadioGroupPattern constructor(override readonly inputs: ToolbarRadioGroupInputs) { if (!!inputs.toolbar()) { inputs.orientation = inputs.toolbar()!.orientation; - inputs.skipDisabled = inputs.toolbar()!.skipDisabled; + inputs.softDisabled = inputs.toolbar()!.softDisabled; } super(inputs); diff --git a/src/aria/private/tabs/tabs.spec.ts b/src/aria/private/tabs/tabs.spec.ts index 6e7d381480a7..e9d592bca900 100644 --- a/src/aria/private/tabs/tabs.spec.ts +++ b/src/aria/private/tabs/tabs.spec.ts @@ -63,7 +63,7 @@ describe('Tabs Pattern', () => { focusMode: signal('roving'), disabled: signal(false), activeItem: signal(undefined), - skipDisabled: signal(true), + softDisabled: signal(false), items: signal([]), value: signal(['tab-1']), element: signal(document.createElement('div')), @@ -230,7 +230,7 @@ describe('Tabs Pattern', () => { expect(tabPatterns[1].active()).toBeFalse(); }); - it('skips the disabled tab when `skipDisabled` is set to true.', () => { + it('skips the disabled tab when `softDisabled` is set to false.', () => { tabInputs[1].disabled.set(true); tabListPattern.onKeydown(right()); expect(tabPatterns[0].active()).toBeFalse(); @@ -238,8 +238,8 @@ describe('Tabs Pattern', () => { expect(tabPatterns[2].active()).toBeTrue(); }); - it('does not skip the disabled tab when `skipDisabled` is set to false.', () => { - tabListInputs.skipDisabled.set(false); + it('does not skip the disabled tab when `softDisabled` is set to true.', () => { + tabListInputs.softDisabled.set(true); tabInputs[1].disabled.set(true); tabListPattern.onKeydown(right()); expect(tabPatterns[0].active()).toBeFalse(); diff --git a/src/aria/private/toolbar/toolbar.spec.ts b/src/aria/private/toolbar/toolbar.spec.ts index 2f1cfa673f27..bafc661029d6 100644 --- a/src/aria/private/toolbar/toolbar.spec.ts +++ b/src/aria/private/toolbar/toolbar.spec.ts @@ -103,7 +103,7 @@ describe('Toolbar Pattern', () => { orientation: signal('horizontal'), textDirection: signal('ltr'), disabled: signal(false), - skipDisabled: signal(true), + softDisabled: signal(false), wrap: signal(false), }; widgetInputs = [ @@ -172,14 +172,14 @@ describe('Toolbar Pattern', () => { expect(toolbarInputs.activeItem()).toBe(items[3]); }); - it('should skip a disabled toolbar widget when skipDisabled is true', () => { + it('should skip a disabled toolbar widget when softDisabled is false', () => { widgetInputs[1].disabled.set(true); toolbar.onKeydown(right()); expect(toolbarInputs.activeItem()).toBe(items[2]); }); - it('should not skip disabled items when skipDisabled is false', () => { - toolbarInputs.skipDisabled.set(false); + it('should not skip disabled items when softDisabled is true', () => { + toolbarInputs.softDisabled.set(true); widgetInputs[1].disabled.set(true); toolbar.onKeydown(right()); expect(toolbarInputs.activeItem()).toBe(items[1]); @@ -216,7 +216,7 @@ describe('Toolbar Pattern', () => { orientation: signal('horizontal'), textDirection: signal('ltr'), disabled: signal(false), - skipDisabled: signal(true), + softDisabled: signal(false), wrap: signal(false), }; const widgetInputs = [ @@ -261,7 +261,7 @@ describe('Toolbar Pattern', () => { orientation: signal('horizontal'), textDirection: signal('ltr'), disabled: signal(false), - skipDisabled: signal(true), + softDisabled: signal(false), wrap: signal(false), }; widgetInputs = [ @@ -329,7 +329,7 @@ describe('Toolbar Pattern', () => { orientation: signal('horizontal'), textDirection: signal('ltr'), disabled: signal(false), - skipDisabled: signal(true), + softDisabled: signal(false), wrap: signal(false), }; const widgetInputs = [ diff --git a/src/aria/private/toolbar/toolbar.ts b/src/aria/private/toolbar/toolbar.ts index ff704976cc6a..ec4e9f2031bb 100644 --- a/src/aria/private/toolbar/toolbar.ts +++ b/src/aria/private/toolbar/toolbar.ts @@ -30,8 +30,8 @@ export class ToolbarPattern { /** Whether the tablist is vertically or horizontally oriented. */ readonly orientation: SignalLike<'vertical' | 'horizontal'>; - /** Whether disabled items in the group should be skipped when navigating. */ - readonly skipDisabled: SignalLike; + /** Whether disabled items in the group should be focusable. */ + readonly softDisabled: SignalLike; /** Whether the toolbar is disabled. */ readonly disabled = computed(() => this.listBehavior.disabled()); @@ -189,7 +189,7 @@ export class ToolbarPattern { constructor(readonly inputs: ToolbarInputs) { this.orientation = inputs.orientation; - this.skipDisabled = inputs.skipDisabled; + this.softDisabled = inputs.softDisabled; this.listBehavior = new List({ ...inputs, diff --git a/src/aria/private/tree/tree.spec.ts b/src/aria/private/tree/tree.spec.ts index de0346ede026..726940cec797 100644 --- a/src/aria/private/tree/tree.spec.ts +++ b/src/aria/private/tree/tree.spec.ts @@ -147,7 +147,7 @@ describe('Tree Pattern', () => { multi: signal(false), orientation: signal('vertical'), selectionMode: signal('follow'), - skipDisabled: signal(true), + softDisabled: signal(false), textDirection: signal('ltr'), typeaheadDelay: signal(0), value: signal([]), @@ -201,7 +201,7 @@ describe('Tree Pattern', () => { multi: signal(false), orientation: signal('vertical'), selectionMode: signal('follow'), - skipDisabled: signal(true), + softDisabled: signal(false), textDirection: signal('ltr'), typeaheadDelay: signal(0), value: signal([]), @@ -257,7 +257,7 @@ describe('Tree Pattern', () => { multi: signal(false), orientation: signal('vertical'), selectionMode: signal('explicit'), - skipDisabled: signal(true), + softDisabled: signal(false), textDirection: signal('ltr'), typeaheadDelay: signal(0), value: signal([]), @@ -384,8 +384,8 @@ describe('Tree Pattern', () => { expect(tree.activeItem()).toBe(item2); }); - it('should skip disabled items when skipDisabled is true', () => { - treeInputs.skipDisabled.set(true); + it('should skip disabled items when softDisabled is false', () => { + treeInputs.softDisabled.set(false); const localTreeExample: TestTreeItem[] = [ {value: 'Item A', disabled: false, selectable: true}, {value: 'Item B', disabled: true, selectable: true}, @@ -401,8 +401,8 @@ describe('Tree Pattern', () => { expect(tree.activeItem()).toBe(itemC); }); - it('should not skip disabled items when skipDisabled is false', () => { - treeInputs.skipDisabled.set(false); + it('should not skip disabled items when softDisabled is true', () => { + treeInputs.softDisabled.set(true); const localTreeExample: TestTreeItem[] = [ {value: 'Item A', disabled: false, selectable: true}, {value: 'Item B', disabled: true, selectable: true}, @@ -443,7 +443,7 @@ describe('Tree Pattern', () => { multi: signal(false), orientation: signal('vertical'), selectionMode: signal('follow'), - skipDisabled: signal(true), + softDisabled: signal(false), textDirection: signal('ltr'), typeaheadDelay: signal(0), value: signal([]), @@ -511,7 +511,7 @@ describe('Tree Pattern', () => { multi: signal(false), orientation: signal('vertical'), selectionMode: signal('explicit'), - skipDisabled: signal(true), + softDisabled: signal(false), textDirection: signal('ltr'), typeaheadDelay: signal(0), value: signal([]), @@ -591,7 +591,7 @@ describe('Tree Pattern', () => { multi: signal(true), orientation: signal('vertical'), selectionMode: signal('explicit'), - skipDisabled: signal(true), + softDisabled: signal(false), textDirection: signal('ltr'), typeaheadDelay: signal(0), value: signal([]), @@ -708,7 +708,7 @@ describe('Tree Pattern', () => { {value: 'B', disabled: true, selectable: true}, {value: 'C', disabled: false, selectable: true}, ]; - treeInputs.skipDisabled.set(false); + treeInputs.softDisabled.set(true); const {tree, allItems} = createTree(localTreeData, treeInputs); const itemA = getItemByValue(allItems(), 'A'); @@ -767,7 +767,7 @@ describe('Tree Pattern', () => { multi: signal(true), orientation: signal('vertical'), selectionMode: signal('follow'), - skipDisabled: signal(true), + softDisabled: signal(false), textDirection: signal('ltr'), typeaheadDelay: signal(0), value: signal([]), @@ -882,7 +882,7 @@ describe('Tree Pattern', () => { {value: 'B', disabled: true, selectable: true}, {value: 'C', disabled: false, selectable: true}, ]; - treeInputs.skipDisabled.set(true); + treeInputs.softDisabled.set(false); const {tree, allItems} = createTree(localTreeData, treeInputs); treeInputs.value.set(['A']); tree.listBehavior.goto(getItemByValue(allItems(), 'A')); @@ -934,7 +934,7 @@ describe('Tree Pattern', () => { multi: signal(false), orientation: signal('vertical'), selectionMode: signal('follow'), - skipDisabled: signal(true), + softDisabled: signal(false), textDirection: signal('ltr'), typeaheadDelay: signal(0), value: signal([]), @@ -976,7 +976,7 @@ describe('Tree Pattern', () => { multi: signal(false), orientation: signal('vertical'), selectionMode: signal('explicit'), - skipDisabled: signal(true), + softDisabled: signal(false), textDirection: signal('ltr'), typeaheadDelay: signal(0), value: signal([]), @@ -1031,7 +1031,7 @@ describe('Tree Pattern', () => { multi: signal(true), orientation: signal('vertical'), selectionMode: signal('explicit'), - skipDisabled: signal(true), + softDisabled: signal(false), textDirection: signal('ltr'), typeaheadDelay: signal(0), value: signal([]), @@ -1081,7 +1081,7 @@ describe('Tree Pattern', () => { multi: signal(true), orientation: signal('vertical'), selectionMode: signal('follow'), - skipDisabled: signal(true), + softDisabled: signal(false), textDirection: signal('ltr'), typeaheadDelay: signal(0), value: signal([]), @@ -1177,7 +1177,7 @@ describe('Tree Pattern', () => { multi: signal(false), orientation: signal('vertical'), selectionMode: signal('explicit'), - skipDisabled: signal(true), + softDisabled: signal(false), textDirection: signal('ltr'), typeaheadDelay: signal(0), value: signal([]), @@ -1438,7 +1438,7 @@ describe('Tree Pattern', () => { multi: signal(false), orientation: signal('vertical'), selectionMode: signal('explicit'), - skipDisabled: signal(true), + softDisabled: signal(false), textDirection: signal('ltr'), typeaheadDelay: signal(0), value: signal([]), @@ -1460,12 +1460,12 @@ describe('Tree Pattern', () => { expect(treeInputs.activeItem()).toBe(allItems()[0]); }); - it('should set activeIndex to the first visible focusable disabled item if skipDisabled is false and no selection', () => { + it('should set activeIndex to the first visible focusable disabled item if softDisabled is true and no selection', () => { const localTreeData: TestTreeItem[] = [ {value: 'A', disabled: true, selectable: true}, {value: 'B', disabled: false, selectable: true}, ]; - treeInputs.skipDisabled.set(false); + treeInputs.softDisabled.set(true); const {tree, allItems} = createTree(localTreeData, treeInputs); tree.setDefaultState(); @@ -1498,28 +1498,28 @@ describe('Tree Pattern', () => { expect(treeInputs.activeItem()).toBe(allItems()[0]); }); - it('should skip a selected disabled item if skipDisabled is true', () => { + it('should skip a selected disabled item if softDisabled is false', () => { const localTreeData: TestTreeItem[] = [ {value: 'A', disabled: false, selectable: true}, {value: 'B', disabled: true, selectable: true}, {value: 'C', disabled: false, selectable: true}, ]; treeInputs.value.set(['B']); - treeInputs.skipDisabled.set(true); + treeInputs.softDisabled.set(false); const {tree, allItems} = createTree(localTreeData, treeInputs); tree.setDefaultState(); expect(treeInputs.activeItem()).toBe(allItems()[0]); }); - it('should select a selected disabled item if skipDisabled is false', () => { + it('should select a selected disabled item if softDisabled is true', () => { const localTreeData: TestTreeItem[] = [ {value: 'A', disabled: false, selectable: true}, {value: 'B', disabled: true, selectable: true}, {value: 'C', disabled: false, selectable: true}, ]; treeInputs.value.set(['B']); - treeInputs.skipDisabled.set(false); + treeInputs.softDisabled.set(true); const {tree, allItems} = createTree(localTreeData, treeInputs); tree.setDefaultState(); diff --git a/src/aria/private/tree/tree.ts b/src/aria/private/tree/tree.ts index 117b26ca1e68..2b21c2ac9b27 100644 --- a/src/aria/private/tree/tree.ts +++ b/src/aria/private/tree/tree.ts @@ -351,8 +351,8 @@ export class TreePattern { /** The currently active item in the tree. */ activeItem: WritableSignalLike | undefined> = signal(undefined); - /** Whether disabled items should be skipped when navigating. */ - skipDisabled: SignalLike; + /** Whether disabled items should be focusable. */ + softDisabled: SignalLike; /** Whether the focus should wrap when navigating past the first or last item. */ wrap: SignalLike; @@ -383,7 +383,7 @@ export class TreePattern { this.focusMode = inputs.focusMode; this.disabled = inputs.disabled; this.activeItem = inputs.activeItem; - this.skipDisabled = inputs.skipDisabled; + this.softDisabled = inputs.softDisabled; this.wrap = inputs.wrap; this.orientation = inputs.orientation; this.textDirection = inputs.textDirection; diff --git a/src/aria/radio-group/radio-group.spec.ts b/src/aria/radio-group/radio-group.spec.ts index b0643cd5a1cf..67f37cb36cf0 100644 --- a/src/aria/radio-group/radio-group.spec.ts +++ b/src/aria/radio-group/radio-group.spec.ts @@ -37,7 +37,7 @@ describe('RadioGroup', () => { disabled?: boolean; readonly?: boolean; value?: number | null; - skipDisabled?: boolean; + softDisabled?: boolean; focusMode?: 'roving' | 'activedescendant'; disabledOptions?: number[]; options?: TestOption[]; @@ -62,8 +62,8 @@ describe('RadioGroup', () => { if (opts?.value !== undefined) { testComponent.value = opts.value; } - if (opts?.skipDisabled !== undefined) { - testComponent.skipDisabled = opts.skipDisabled; + if (opts?.softDisabled !== undefined) { + testComponent.softDisabled = opts.softDisabled; } if (opts?.focusMode !== undefined) { testComponent.focusMode = opts.focusMode; @@ -376,22 +376,22 @@ describe('RadioGroup', () => { expect(isFocused(1)).toBe(true); }); - it('should skip disabled radio buttons (skipDisabled="true")', () => { + it('should skip disabled radio buttons when softDisabled is false', () => { setupRadioGroup({ focusMode, orientation: 'vertical', - skipDisabled: true, + softDisabled: false, disabledOptions: [1, 2], }); down(); expect(isFocused(3)).toBe(true); }); - it('should not skip disabled radio buttons (skipDisabled="false")', () => { + it('should not skip disabled radio buttons (softDisabled="true")', () => { setupRadioGroup({ focusMode, orientation: 'vertical', - skipDisabled: false, + softDisabled: true, disabledOptions: [1, 2], }); down(); @@ -414,22 +414,22 @@ describe('RadioGroup', () => { expect(isFocused(1)).toBe(true); }); - it('should skip disabled radio buttons (skipDisabled="true")', () => { + it('should skip disabled radio buttons (softDisabled="false")', () => { setupRadioGroup({ focusMode, orientation: 'horizontal', - skipDisabled: true, + softDisabled: false, disabledOptions: [1, 2], }); right(); expect(isFocused(3)).toBe(true); }); - it('should not skip disabled radio buttons (skipDisabled="false")', () => { + it('should not skip disabled radio buttons (softDisabled="true")', () => { setupRadioGroup({ focusMode, orientation: 'horizontal', - skipDisabled: false, + softDisabled: true, disabledOptions: [1, 2], }); right(); @@ -454,7 +454,7 @@ describe('RadioGroup', () => { it('should skip disabled radio buttons when navigating', () => { setupRadioGroup({ focusMode, - skipDisabled: true, + softDisabled: false, textDirection: 'rtl', disabledOptions: [1, 2], orientation: 'horizontal', @@ -473,14 +473,14 @@ describe('RadioGroup', () => { expect(isFocused(3)).toBe(true); }); - it('should move focus to the clicked radio button if the group is disabled (skipDisabled="true")', () => { - setupRadioGroup({focusMode, skipDisabled: true, disabled: true}); + it('should not move focus to the clicked radio button if the group is disabled (softDisabled="false")', () => { + setupRadioGroup({focusMode, softDisabled: false, disabled: true}); click(3); expect(isFocused(3)).toBe(false); }); - it('should not move focus to the clicked radio button if the group is disabled (skipDisabled="false")', () => { - setupRadioGroup({focusMode, skipDisabled: true, disabled: true}); + it('should not move focus to the clicked radio button if the group is disabled (softDisabled="true")', () => { + setupRadioGroup({focusMode, softDisabled: true, disabled: true}); click(3); expect(isFocused(0)).toBe(false); }); @@ -508,9 +508,9 @@ describe('RadioGroup', () => { }); describe('bad accessibility violations', () => { - it('should report when the selected radio button is disabled and skipDisabled is true', () => { + it('should report when the selected radio button is disabled and softDisabled is false', () => { spyOn(console, 'error'); - setupRadioGroup({value: 1, skipDisabled: true, disabledOptions: [1]}); + setupRadioGroup({value: 1, softDisabled: false, disabledOptions: [1]}); expect(console.error).toHaveBeenCalled(); }); }); @@ -531,7 +531,7 @@ interface TestOption { [readonly]="readonly" [focusMode]="focusMode" [orientation]="orientation" - [skipDisabled]="skipDisabled" + [softDisabled]="softDisabled" ngRadioGroup> @for (option of options(); track option.value) {
{{ option.label }}
@@ -552,7 +552,7 @@ class RadioGroupExample { value: number | null = null; disabled = false; readonly = false; - skipDisabled = true; + softDisabled = false; focusMode: 'roving' | 'activedescendant' = 'roving'; orientation: 'horizontal' | 'vertical' = 'horizontal'; } diff --git a/src/aria/radio-group/radio-group.ts b/src/aria/radio-group/radio-group.ts index d7f84fe2872b..da845f6b85c2 100644 --- a/src/aria/radio-group/radio-group.ts +++ b/src/aria/radio-group/radio-group.ts @@ -125,8 +125,8 @@ export class RadioGroup { /** Whether the radio group is vertically or horizontally oriented. */ readonly orientation = input<'vertical' | 'horizontal'>('vertical'); - /** Whether disabled items in the group should be skipped when navigating. */ - readonly skipDisabled = input(true, {transform: booleanAttribute}); + /** Whether disabled items in the group should be focusable. */ + readonly softDisabled = input(false, {transform: booleanAttribute}); /** The focus strategy used by the radio group. */ readonly focusMode = input<'roving' | 'activedescendant'>('roving'); diff --git a/src/aria/tabs/tabs.spec.ts b/src/aria/tabs/tabs.spec.ts index d7a7d7367a34..84dc700ed48a 100644 --- a/src/aria/tabs/tabs.spec.ts +++ b/src/aria/tabs/tabs.spec.ts @@ -79,7 +79,7 @@ describe('Tabs', () => { orientation?: 'horizontal' | 'vertical'; disabled?: boolean; wrap?: boolean; - skipDisabled?: boolean; + softDisabled?: boolean; focusMode?: 'roving' | 'activedescendant'; selectionMode?: 'follow' | 'explicit'; } = {}, @@ -89,7 +89,7 @@ describe('Tabs', () => { if (options.orientation !== undefined) testComponent.orientation.set(options.orientation); if (options.disabled !== undefined) testComponent.disabled.set(options.disabled); if (options.wrap !== undefined) testComponent.wrap.set(options.wrap); - if (options.skipDisabled !== undefined) testComponent.skipDisabled.set(options.skipDisabled); + if (options.softDisabled !== undefined) testComponent.softDisabled.set(options.softDisabled); if (options.focusMode !== undefined) testComponent.focusMode.set(options.focusMode); if (options.selectionMode !== undefined) testComponent.selectionMode.set(options.selectionMode); @@ -326,15 +326,15 @@ describe('Tabs', () => { expect(isTabFocused(2)).toBe(true); }); - it('should skip disabled tabs if skipDisabled is true', () => { - updateTabs({skipDisabled: true}); + it('should skip disabled tabs if softDisabled is false', () => { + updateTabs({softDisabled: false}); expect(isTabFocused(0)).toBe(true); right(); expect(isTabFocused(2)).toBe(true); }); - it('should not skip disabled tabs if skipDisabled is false', () => { - updateTabs({skipDisabled: false}); + it('should not skip disabled tabs if softDisabled is true', () => { + updateTabs({softDisabled: true}); tabListElement.focus(); fixture.detectChanges(); expect(isTabFocused(0)).toBe(true); @@ -644,7 +644,7 @@ describe('Tabs', () => { ], selectedTab: 'tab1', selectionMode: 'explicit', - skipDisabled: false, + softDisabled: true, }); expect(testComponent.selectedTab()).toBe('tab1'); right(); @@ -680,7 +680,7 @@ describe('Tabs', () => { [orientation]="orientation()" [disabled]="disabled()" [wrap]="wrap()" - [skipDisabled]="skipDisabled()" + [softDisabled]="softDisabled()" [focusMode]="focusMode()" [selectionMode]="selectionMode()"> @for (tabDef of tabsData(); track tabDef.value) { @@ -723,7 +723,7 @@ class TestTabsComponent { orientation = signal<'horizontal' | 'vertical'>('horizontal'); disabled = signal(false); wrap = signal(true); - skipDisabled = signal(true); + softDisabled = signal(false); focusMode = signal<'roving' | 'activedescendant'>('roving'); selectionMode = signal<'follow' | 'explicit'>('follow'); } diff --git a/src/aria/tabs/tabs.ts b/src/aria/tabs/tabs.ts index fe1322f3d239..beb4d460d282 100644 --- a/src/aria/tabs/tabs.ts +++ b/src/aria/tabs/tabs.ts @@ -158,8 +158,8 @@ export class TabList implements OnInit, OnDestroy { /** Whether focus should wrap when navigating. */ readonly wrap = input(true, {transform: booleanAttribute}); - /** Whether disabled items in the list should be skipped when navigating. */ - readonly skipDisabled = input(true, {transform: booleanAttribute}); + /** Whether to allow disabled items to receive focus. */ + readonly softDisabled = input(false, {transform: booleanAttribute}); /** The focus strategy used by the tablist. */ readonly focusMode = input<'roving' | 'activedescendant'>('roving'); diff --git a/src/aria/toolbar/toolbar.spec.ts b/src/aria/toolbar/toolbar.spec.ts index c6685baba582..2b8275b35757 100644 --- a/src/aria/toolbar/toolbar.spec.ts +++ b/src/aria/toolbar/toolbar.spec.ts @@ -71,7 +71,7 @@ describe('Toolbar', () => { widgetGroupDisabled?: boolean; orientation?: 'horizontal' | 'vertical'; wrap?: boolean; - skipDisabled?: boolean; + softDisabled?: boolean; } = {}, ) { if (config.disabled !== undefined) testComponent.disabled.set(config.disabled); @@ -79,7 +79,7 @@ describe('Toolbar', () => { testComponent.widgetGroupDisabled.set(config.widgetGroupDisabled); if (config.orientation !== undefined) testComponent.orientation.set(config.orientation); if (config.wrap !== undefined) testComponent.wrap.set(config.wrap); - if (config.skipDisabled !== undefined) testComponent.skipDisabled.set(config.skipDisabled); + if (config.softDisabled !== undefined) testComponent.softDisabled.set(config.softDisabled); fixture.detectChanges(); defineTestVariables(); @@ -202,14 +202,14 @@ describe('Toolbar', () => { expect(document.activeElement).toBe(widgetElements[0]); }); - it('should skip disabled widgets with arrow keys if skipDisabled=true', () => { - updateToolbar({skipDisabled: true}); + it('should skip disabled widgets with arrow keys if softDisabled=false', () => { + updateToolbar({softDisabled: false}); right(); expect(document.activeElement).toBe(widgetElements[2]); }); - it('should not skip disabled widgets with arrow keys if skipDisabled=false', () => { - updateToolbar({skipDisabled: false}); + it('should not skip disabled widgets with arrow keys if softDisabled=true', () => { + updateToolbar({softDisabled: true}); right(); expect(document.activeElement).toBe(widgetElements[1]); }); @@ -264,14 +264,14 @@ describe('Toolbar', () => { expect(document.activeElement).toBe(widgetElements[2]); }); - it('should move focus to the clicked disabled widget if skipDisabled=false', () => { - updateToolbar({skipDisabled: false}); + it('should move focus to the clicked disabled widget if softDisabled=true', () => { + updateToolbar({softDisabled: true}); click(widgetElements[1]); expect(document.activeElement).toBe(widgetElements[1]); }); - it('should not move focus to the clicked disabled widget if skipDisabled=true', () => { - updateToolbar({skipDisabled: true}); + it('should not move focus to the clicked disabled widget if softDisabled=false', () => { + updateToolbar({softDisabled: false}); const initiallyFocused = document.activeElement; click(widgetElements[1]); @@ -458,7 +458,7 @@ class TestToolbarWidgetGroup { [orientation]="orientation()" [disabled]="disabled()" [wrap]="wrap()" - [skipDisabled]="skipDisabled()" + [softDisabled]="softDisabled()" > @@ -473,5 +473,5 @@ class TestToolbarComponent { disabled = signal(false); widgetGroupDisabled = signal(false); wrap = signal(true); - skipDisabled = signal(true); + softDisabled = signal(false); } diff --git a/src/aria/toolbar/toolbar.ts b/src/aria/toolbar/toolbar.ts index cad2ec4ca83c..b1de5616c416 100644 --- a/src/aria/toolbar/toolbar.ts +++ b/src/aria/toolbar/toolbar.ts @@ -91,8 +91,8 @@ export class Toolbar { /** Whether the toolbar is vertically or horizontally oriented. */ readonly orientation = input<'vertical' | 'horizontal'>('horizontal'); - /** Whether disabled items in the group should be skipped when navigating. */ - readonly skipDisabled = input(false, {transform: booleanAttribute}); + /** Whether to allow disabled items to receive focus. */ + softDisabled = input(true, {transform: booleanAttribute}); /** Whether the toolbar is disabled. */ readonly disabled = input(false, {transform: booleanAttribute}); @@ -200,7 +200,7 @@ export class ToolbarWidget implements OnInit, OnDestroy { readonly disabled = input(false, {transform: booleanAttribute}); /** Whether the widget is 'hard' disabled, which is different from `aria-disabled`. A hard disabled widget cannot receive focus. */ - readonly hardDisabled = computed(() => this._pattern.disabled() && this._toolbar.skipDisabled()); + readonly hardDisabled = computed(() => this._pattern.disabled() && !this._toolbar.softDisabled()); /** The ToolbarWidget UIPattern. */ readonly _pattern = new ToolbarWidgetPattern({ diff --git a/src/aria/tree/tree.spec.ts b/src/aria/tree/tree.spec.ts index f19eb29f433b..61ae511ece27 100644 --- a/src/aria/tree/tree.spec.ts +++ b/src/aria/tree/tree.spec.ts @@ -80,7 +80,7 @@ describe('Tree', () => { orientation?: 'horizontal' | 'vertical'; multi?: boolean; wrap?: boolean; - skipDisabled?: boolean; + softDisabled?: boolean; focusMode?: 'roving' | 'activedescendant'; selectionMode?: 'follow' | 'explicit'; nav?: boolean; @@ -93,7 +93,7 @@ describe('Tree', () => { if (config.orientation !== undefined) testComponent.orientation.set(config.orientation); if (config.multi !== undefined) testComponent.multi.set(config.multi); if (config.wrap !== undefined) testComponent.wrap.set(config.wrap); - if (config.skipDisabled !== undefined) testComponent.skipDisabled.set(config.skipDisabled); + if (config.softDisabled !== undefined) testComponent.softDisabled.set(config.softDisabled); if (config.focusMode !== undefined) testComponent.focusMode.set(config.focusMode); if (config.selectionMode !== undefined) testComponent.selectionMode.set(config.selectionMode); if (config.nav !== undefined) testComponent.nav.set(config.nav); @@ -1004,10 +1004,10 @@ describe('Tree', () => { }); }); - it('should not select disabled items during Shift+ArrowKey navigation even if skipDisabled is false', () => { + it('should not select disabled items during Shift+ArrowKey navigation even if softDisabled is true', () => { right(); // Expands fruits updateTreeItemByValue('banana', {disabled: true}); - updateTree({value: ['apple'], skipDisabled: false}); + updateTree({value: ['apple'], softDisabled: true}); expect(getFocusedTreeItemValue()).toBe('apple'); keydown('Shift'); @@ -1259,20 +1259,20 @@ describe('Tree', () => { expect(isFocused('fruits')).toBe(true); }); - it('should skip disabled items with ArrowDown if skipDisabled=true', () => { + it('should skip disabled items with ArrowDown if softDisabled=false', () => { right(); // Expands fruits updateTreeItemByValue('apple', {disabled: true}); - updateTree({skipDisabled: true}); + updateTree({softDisabled: false}); expect(isFocused('fruits')).toBe(true); down(); expect(isFocused('banana')).toBe(true); }); - it('should not skip disabled items with ArrowDown if skipDisabled=false', () => { + it('should not skip disabled items with ArrowDown if softDisabled=true', () => { right(); // Expands fruits updateTreeItemByValue('apple', {disabled: true}); - updateTree({skipDisabled: false}); + updateTree({softDisabled: true}); expect(isFocused('fruits')).toBe(true); down(); @@ -1386,9 +1386,9 @@ describe('Tree', () => { expect(isFocused('vegetables')).toBe(true); }); - it('should move focus to the clicked disabled item if skipDisabled=false', () => { + it('should move focus to the clicked disabled item if softDisabled=true', () => { updateTreeItemByValue('vegetables', {disabled: true}); - updateTree({skipDisabled: false}); + updateTree({softDisabled: true}); const vegetablesEl = getTreeItemElementByValue('vegetables')!; click(vegetablesEl); expect(isFocused('vegetables')).toBe(true); @@ -1418,17 +1418,17 @@ describe('Tree', () => { expect(treeInstance.value()).toEqual([]); }); - it('should skip disabled items with typeahead if skipDisabled=true', () => { + it('should skip disabled items with typeahead if softDisabled=false', () => { right(); // Expands fruits updateTreeItemByValue('banana', {disabled: true}); - updateTree({skipDisabled: true}); + updateTree({softDisabled: false}); type('B'); expect(isFocused('berries')).toBe(true); }); - it('should focus disabled items with typeahead if skipDisabled=false', () => { + it('should focus disabled items with typeahead if softDisabled=true', () => { updateTreeItemByValue('vegetables', {disabled: true}); - updateTree({skipDisabled: false}); + updateTree({softDisabled: true}); type('V'); expect(isFocused('vegetables')).toBe(true); }); @@ -1454,7 +1454,7 @@ interface TestTreeNode { [selectionMode]="selectionMode()" [multi]="multi()" [wrap]="wrap()" - [skipDisabled]="skipDisabled()" + [softDisabled]="softDisabled()" [orientation]="orientation()" [disabled]="disabled()" [(value)]="value" @@ -1530,7 +1530,7 @@ class TestTreeComponent { orientation = signal<'vertical' | 'horizontal'>('vertical'); multi = signal(false); wrap = signal(true); - skipDisabled = signal(true); + softDisabled = signal(false); focusMode = signal<'roving' | 'activedescendant'>('roving'); selectionMode = signal<'explicit' | 'follow'>('explicit'); nav = signal(false); diff --git a/src/aria/tree/tree.ts b/src/aria/tree/tree.ts index 6a265f2d3c1a..d292c6ed1a25 100644 --- a/src/aria/tree/tree.ts +++ b/src/aria/tree/tree.ts @@ -117,8 +117,8 @@ export class Tree { /** Whether navigation wraps. */ readonly wrap = input(true, {transform: booleanAttribute}); - /** Whether to skip disabled items during navigation. */ - readonly skipDisabled = input(true, {transform: booleanAttribute}); + /** Whether to allow disabled items to receive focus. */ + readonly softDisabled = input(false, {transform: booleanAttribute}); /** Typeahead delay. */ readonly typeaheadDelay = input(0.5); diff --git a/src/components-examples/aria/accordion/accordion-configurable/accordion-configurable-example.html b/src/components-examples/aria/accordion/accordion-configurable/accordion-configurable-example.html index 28b6ca833bae..f2d4d84e1bbc 100644 --- a/src/components-examples/aria/accordion/accordion-configurable/accordion-configurable-example.html +++ b/src/components-examples/aria/accordion/accordion-configurable/accordion-configurable-example.html @@ -2,7 +2,7 @@ Wrap (ArrowKey-only) Multi Disabled - Skip Disabled + Soft Disabled Expanded Items @@ -19,7 +19,7 @@ class="example-accordion-group" [multiExpandable]="multi.value" [disabled]="disabled.value" - [skipDisabled]="skipDisabled.value" + [softDisabled]="softDisabled.value" [wrap]="wrap.value" [(value)]="expandedIds" > diff --git a/src/components-examples/aria/accordion/accordion-configurable/accordion-configurable-example.ts b/src/components-examples/aria/accordion/accordion-configurable/accordion-configurable-example.ts index 8f238c915eb8..1935a62a57f7 100644 --- a/src/components-examples/aria/accordion/accordion-configurable/accordion-configurable-example.ts +++ b/src/components-examples/aria/accordion/accordion-configurable/accordion-configurable-example.ts @@ -35,7 +35,7 @@ export class AccordionConfigurableExample { wrap = new FormControl(true, {nonNullable: true}); multi = new FormControl(true, {nonNullable: true}); disabled = new FormControl(false, {nonNullable: true}); - skipDisabled = new FormControl(true, {nonNullable: true}); + softDisabled = new FormControl(true, {nonNullable: true}); expandedIds = model(['item1']); // Example items diff --git a/src/components-examples/aria/accordion/accordion-disabled-focusable/accordion-disabled-focusable-example.html b/src/components-examples/aria/accordion/accordion-disabled-focusable/accordion-disabled-focusable-example.html index cda513b3a334..9fd34d37eda7 100644 --- a/src/components-examples/aria/accordion/accordion-disabled-focusable/accordion-disabled-focusable-example.html +++ b/src/components-examples/aria/accordion/accordion-disabled-focusable/accordion-disabled-focusable-example.html @@ -2,7 +2,7 @@ ngAccordionGroup class="example-accordion-group" [multiExpandable]="true" - [skipDisabled]="false" + [softDisabled]="true" [(value)]="expandedIds" >
diff --git a/src/components-examples/aria/accordion/accordion-disabled-skipped/accordion-disabled-skipped-example.html b/src/components-examples/aria/accordion/accordion-disabled-skipped/accordion-disabled-skipped-example.html index 5ab83008e14d..a4539fbea483 100644 --- a/src/components-examples/aria/accordion/accordion-disabled-skipped/accordion-disabled-skipped-example.html +++ b/src/components-examples/aria/accordion/accordion-disabled-skipped/accordion-disabled-skipped-example.html @@ -2,7 +2,7 @@ ngAccordionGroup class="example-accordion-group" [multiExpandable]="true" - [skipDisabled]="true" + [softDisabled]="false" [(value)]="expandedIds" >
diff --git a/src/components-examples/aria/accordion/cdk-accordion-configurable/cdk-accordion-configurable-example.html b/src/components-examples/aria/accordion/cdk-accordion-configurable/cdk-accordion-configurable-example.html index 8827996ad539..d48e5bcf6eca 100644 --- a/src/components-examples/aria/accordion/cdk-accordion-configurable/cdk-accordion-configurable-example.html +++ b/src/components-examples/aria/accordion/cdk-accordion-configurable/cdk-accordion-configurable-example.html @@ -2,7 +2,7 @@ Wrap (ArrowKey-only) Multi Disabled - Skip Disabled + Soft Disabled Expanded Items @@ -19,7 +19,7 @@ class="example-accordion-group" [multiExpandable]="multi.value" [disabled]="disabled.value" - [skipDisabled]="skipDisabled.value" + [softDisabled]="softDisabled.value" [wrap]="wrap.value" [(value)]="expandedIds" > diff --git a/src/components-examples/aria/grid/grid-configurable/grid-configurable-example.html b/src/components-examples/aria/grid/grid-configurable/grid-configurable-example.html index 710ce69c720a..f19a80b22bdd 100644 --- a/src/components-examples/aria/grid/grid-configurable/grid-configurable-example.html +++ b/src/components-examples/aria/grid/grid-configurable/grid-configurable-example.html @@ -13,9 +13,9 @@ Skip DisabledSoft Disabled @@ -97,7 +97,7 @@ [colWrap]="colWrap" [focusMode]="focusMode" [disabled]="disabled.value" - [skipDisabled]="skipDisabled.value" + [softDisabled]="softDisabled.value" [enableSelection]="enableSelection.value" #grid="ngGrid" > diff --git a/src/components-examples/aria/grid/grid-configurable/grid-configurable-example.ts b/src/components-examples/aria/grid/grid-configurable/grid-configurable-example.ts index 882acb789ea2..c44fc55d39a6 100644 --- a/src/components-examples/aria/grid/grid-configurable/grid-configurable-example.ts +++ b/src/components-examples/aria/grid/grid-configurable/grid-configurable-example.ts @@ -91,7 +91,7 @@ export class GridConfigurableExample { focusMode: 'roving' | 'activedescendant' = 'roving'; disabled = new FormControl(false, {nonNullable: true}); - skipDisabled = new FormControl(true, {nonNullable: true}); + softDisabled = new FormControl(false, {nonNullable: true}); enableSelection = new FormControl(false, {nonNullable: true}); gridData: Cell[][] = generateValidGrid(10, 10); diff --git a/src/components-examples/aria/listbox/listbox-configurable/listbox-configurable-example.html b/src/components-examples/aria/listbox/listbox-configurable/listbox-configurable-example.html index efff62d64e6c..f39e842e284e 100644 --- a/src/components-examples/aria/listbox/listbox-configurable/listbox-configurable-example.html +++ b/src/components-examples/aria/listbox/listbox-configurable/listbox-configurable-example.html @@ -3,7 +3,7 @@ Multi Disabled Readonly - Skip Disabled + Soft Disabled Selection @@ -57,7 +57,7 @@ [multi]="multi.value" [readonly]="readonly.value" [disabled]="disabled.value" - [skipDisabled]="skipDisabled.value" + [softDisabled]="softDisabled.value" [orientation]="orientation" [focusMode]="focusMode" [selectionMode]="selectionMode" diff --git a/src/components-examples/aria/listbox/listbox-configurable/listbox-configurable-example.ts b/src/components-examples/aria/listbox/listbox-configurable/listbox-configurable-example.ts index 167f579884f6..23dcf34e6c4b 100644 --- a/src/components-examples/aria/listbox/listbox-configurable/listbox-configurable-example.ts +++ b/src/components-examples/aria/listbox/listbox-configurable/listbox-configurable-example.ts @@ -33,7 +33,7 @@ export class ListboxConfigurableExample { multi = new FormControl(true, {nonNullable: true}); disabled = new FormControl(false, {nonNullable: true}); readonly = new FormControl(false, {nonNullable: true}); - skipDisabled = new FormControl(true, {nonNullable: true}); + softDisabled = new FormControl(false, {nonNullable: true}); fruits = [ 'Apple', diff --git a/src/components-examples/aria/listbox/listbox-disabled-focusable/listbox-disabled-focusable-example.html b/src/components-examples/aria/listbox/listbox-disabled-focusable/listbox-disabled-focusable-example.html index 90bf45b033e0..a8a4dcf9a179 100644 --- a/src/components-examples/aria/listbox/listbox-disabled-focusable/listbox-disabled-focusable-example.html +++ b/src/components-examples/aria/listbox/listbox-disabled-focusable/listbox-disabled-focusable-example.html @@ -2,7 +2,7 @@
    diff --git a/src/components-examples/aria/listbox/listbox-disabled-skipped/listbox-disabled-skipped-example.html b/src/components-examples/aria/listbox/listbox-disabled-skipped/listbox-disabled-skipped-example.html index b1187ccceec2..3976e66360cd 100644 --- a/src/components-examples/aria/listbox/listbox-disabled-skipped/listbox-disabled-skipped-example.html +++ b/src/components-examples/aria/listbox/listbox-disabled-skipped/listbox-disabled-skipped-example.html @@ -2,7 +2,7 @@
      diff --git a/src/components-examples/aria/radio-group/radio-group-configurable/radio-group-configurable-example.html b/src/components-examples/aria/radio-group/radio-group-configurable/radio-group-configurable-example.html index cda2bef0de4a..48ae573fac4a 100644 --- a/src/components-examples/aria/radio-group/radio-group-configurable/radio-group-configurable-example.html +++ b/src/components-examples/aria/radio-group/radio-group-configurable/radio-group-configurable-example.html @@ -1,7 +1,7 @@
      Disabled Readonly - Skip Disabled + Soft Disabled Disabled Radio Options @@ -34,7 +34,7 @@ ngRadioGroup [disabled]="disabled.value" [readonly]="readonly.value" - [skipDisabled]="skipDisabled.value" + [softDisabled]="softDisabled.value" [orientation]="orientation" [focusMode]="focusMode" class="example-radio-group example-parent" diff --git a/src/components-examples/aria/radio-group/radio-group-configurable/radio-group-configurable-example.ts b/src/components-examples/aria/radio-group/radio-group-configurable/radio-group-configurable-example.ts index 8c9db2e14332..e2a450967988 100644 --- a/src/components-examples/aria/radio-group/radio-group-configurable/radio-group-configurable-example.ts +++ b/src/components-examples/aria/radio-group/radio-group-configurable/radio-group-configurable-example.ts @@ -62,7 +62,7 @@ export class RadioGroupConfigurableExample { // New controls readonly = new FormControl(false, {nonNullable: true}); - skipDisabled = new FormControl(true, {nonNullable: true}); + softDisabled = new FormControl(false, {nonNullable: true}); focusMode: 'roving' | 'activedescendant' = 'roving'; // Control for which radio options are individually disabled diff --git a/src/components-examples/aria/radio-group/radio-group-disabled-focusable/radio-group-disabled-focusable-example.html b/src/components-examples/aria/radio-group/radio-group-disabled-focusable/radio-group-disabled-focusable-example.html index b33e2f7a3c07..a99742b60561 100644 --- a/src/components-examples/aria/radio-group/radio-group-disabled-focusable/radio-group-disabled-focusable-example.html +++ b/src/components-examples/aria/radio-group/radio-group-disabled-focusable/radio-group-disabled-focusable-example.html @@ -1,7 +1,7 @@
        diff --git a/src/components-examples/aria/tabs/disabled-focusable/tabs-disabled-focusable-example.html b/src/components-examples/aria/tabs/disabled-focusable/tabs-disabled-focusable-example.html index 97d542078fa8..89ba37a87145 100644 --- a/src/components-examples/aria/tabs/disabled-focusable/tabs-disabled-focusable-example.html +++ b/src/components-examples/aria/tabs/disabled-focusable/tabs-disabled-focusable-example.html @@ -1,5 +1,5 @@
        -
          +
          • tab 1
          • tab 2
          • tab 3
            • diff --git a/src/components-examples/aria/tabs/disabled-skipped/tabs-disabled-skipped-example.html b/src/components-examples/aria/tabs/disabled-skipped/tabs-disabled-skipped-example.html index 02900da93462..6235d52e00f9 100644 --- a/src/components-examples/aria/tabs/disabled-skipped/tabs-disabled-skipped-example.html +++ b/src/components-examples/aria/tabs/disabled-skipped/tabs-disabled-skipped-example.html @@ -1,5 +1,5 @@
            -
              +
              • tab 1
              • tab 2
              • tab 3
                • diff --git a/src/components-examples/aria/tabs/tabs-configurable/tabs-configurable-example.html b/src/components-examples/aria/tabs/tabs-configurable/tabs-configurable-example.html index c33f5e9481f0..ab9291f8282b 100644 --- a/src/components-examples/aria/tabs/tabs-configurable/tabs-configurable-example.html +++ b/src/components-examples/aria/tabs/tabs-configurable/tabs-configurable-example.html @@ -1,7 +1,7 @@
                Wrap Disabled - Skip Disabled + Soft Disabled Orientation @@ -44,7 +44,7 @@ class="example-tablist" [wrap]="wrap.value" [disabled]="disabled.value" - [skipDisabled]="skipDisabled.value" + [softDisabled]="softDisabled.value" [orientation]="orientation" [focusMode]="focusMode" [selectionMode]="selectionMode" diff --git a/src/components-examples/aria/tabs/tabs-configurable/tabs-configurable-example.ts b/src/components-examples/aria/tabs/tabs-configurable/tabs-configurable-example.ts index 44e274738a37..dc0e12eec010 100644 --- a/src/components-examples/aria/tabs/tabs-configurable/tabs-configurable-example.ts +++ b/src/components-examples/aria/tabs/tabs-configurable/tabs-configurable-example.ts @@ -30,5 +30,5 @@ export class TabsConfigurableExample { wrap = new FormControl(true, {nonNullable: true}); disabled = new FormControl(false, {nonNullable: true}); - skipDisabled = new FormControl(true, {nonNullable: true}); + softDisabled = new FormControl(false, {nonNullable: true}); } diff --git a/src/components-examples/aria/toolbar/index.ts b/src/components-examples/aria/toolbar/index.ts index a29a9a9a26ca..a4cdb0671061 100644 --- a/src/components-examples/aria/toolbar/index.ts +++ b/src/components-examples/aria/toolbar/index.ts @@ -2,4 +2,4 @@ export {ToolbarBasicHorizontalExample} from './toolbar-basic-horizontal/toolbar- export {ToolbarBasicVerticalExample} from './toolbar-basic-vertical/toolbar-basic-vertical-example'; export {ToolbarConfigurableExample} from './toolbar-configurable/toolbar-configurable-example'; export {ToolbarRtlExample} from './toolbar-rtl/toolbar-rtl-example'; -export {ToolbarSkipDisabledExample} from './toolbar-skip-disabled/toolbar-skip-disabled-example'; +export {ToolbarSoftDisabledExample} from './toolbar-soft-disabled/toolbar-soft-disabled-example'; diff --git a/src/components-examples/aria/toolbar/toolbar-configurable/toolbar-configurable-example.html b/src/components-examples/aria/toolbar/toolbar-configurable/toolbar-configurable-example.html index 1506f1b93a4a..fb71978b9330 100644 --- a/src/components-examples/aria/toolbar/toolbar-configurable/toolbar-configurable-example.html +++ b/src/components-examples/aria/toolbar/toolbar-configurable/toolbar-configurable-example.html @@ -1,7 +1,7 @@

                Toolbar Controls

                - Skip Disabled + Soft Disabled Wrap Disabled @@ -42,7 +42,7 @@

                Button

                -
                +
                -

                Toolbar Skip Disabled

                - +

                Toolbar Soft Disabled

                +

                Toolbar RTL

                diff --git a/src/dev-app/aria-toolbar/toolbar-demo.ts b/src/dev-app/aria-toolbar/toolbar-demo.ts index f603f80ea006..73c11a1c05ab 100644 --- a/src/dev-app/aria-toolbar/toolbar-demo.ts +++ b/src/dev-app/aria-toolbar/toolbar-demo.ts @@ -12,7 +12,7 @@ import { ToolbarBasicVerticalExample, ToolbarConfigurableExample, ToolbarRtlExample, - ToolbarSkipDisabledExample, + ToolbarSoftDisabledExample, } from '@angular/components-examples/aria/toolbar'; @Component({ @@ -22,7 +22,7 @@ import { ToolbarBasicVerticalExample, ToolbarConfigurableExample, ToolbarRtlExample, - ToolbarSkipDisabledExample, + ToolbarSoftDisabledExample, ], styleUrl: './toolbar-demo.css', encapsulation: ViewEncapsulation.None,