Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions src/aria/accordion/accordion.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ describe('AccordionGroup', () => {
multiExpandable?: boolean;
disabledGroup?: boolean;
disabledItemValues?: string[];
skipDisabled?: boolean;
softDisabled?: boolean;
wrap?: boolean;
}

Expand All @@ -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);
Expand Down Expand Up @@ -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]);
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -419,7 +419,7 @@ class AccordionGroupExample {
value = model<string[]>([]);
multiExpandable = signal(false);
disabledGroup = signal(false);
skipDisabled = signal(true);
softDisabled = signal(false);
wrap = signal(false);

disableItem(itemValue: string, disabled: boolean) {
Expand Down
4 changes: 2 additions & 2 deletions src/aria/accordion/accordion.ts
Original file line number Diff line number Diff line change
Expand Up @@ -170,8 +170,8 @@ export class AccordionGroup {
/** The values of the current selected/expanded accordions. */
value = model<string[]>([]);

/** 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});
Expand Down
4 changes: 2 additions & 2 deletions src/aria/grid/grid.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
26 changes: 13 additions & 13 deletions src/aria/listbox/listbox.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ describe('Listbox', () => {
disabled?: boolean;
readonly?: boolean;
value?: number[];
skipDisabled?: boolean;
softDisabled?: boolean;
focusMode?: 'roving' | 'activedescendant';
multi?: boolean;
wrap?: boolean;
Expand All @@ -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;
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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);
});
Expand Down Expand Up @@ -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);
});
Expand Down Expand Up @@ -749,7 +749,7 @@ interface TestOption {
[readonly]="readonly"
[focusMode]="focusMode"
[orientation]="orientation"
[skipDisabled]="skipDisabled"
[softDisabled]="softDisabled"
[multi]="multi"
[wrap]="wrap"
[selectionMode]="selectionMode"
Expand All @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/aria/listbox/listbox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,8 @@ export class Listbox<V> {
/** 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');
Expand Down
4 changes: 2 additions & 2 deletions src/aria/menu/menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ export class Menu<V> {
...this,
parent: computed(() => this.parent()?._pattern),
multi: () => false,
skipDisabled: () => false,
softDisabled: () => true,
focusMode: () => 'roving',
orientation: () => 'vertical',
selectionMode: () => 'explicit',
Expand Down Expand Up @@ -277,7 +277,7 @@ export class MenuBar<V> {
this._pattern = new MenuBarPattern({
...this,
multi: () => false,
skipDisabled: () => false,
softDisabled: () => true,
focusMode: () => 'roving',
orientation: () => 'horizontal',
selectionMode: () => 'explicit',
Expand Down
2 changes: 1 addition & 1 deletion src/aria/private/accordion/accordion.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ describe('Accordion Pattern', () => {
multiExpandable: signal(true),
items: signal([]),
expandedIds: signal<string[]>([]),
skipDisabled: signal(true),
softDisabled: signal(false),
wrap: signal(true),
element: signal(document.createElement('div')),
};
Expand Down
2 changes: 1 addition & 1 deletion src/aria/private/accordion/accordion.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
12 changes: 6 additions & 6 deletions src/aria/private/behaviors/grid-focus/grid-focus.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -75,15 +75,15 @@ 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<TestGridCell>({
cells: cells,
activeCoords: activeCoords,
focusMode: focusMode,
disabled: disabled,
skipDisabled: skipDisabled,
softDisabled: softDisabled,
}),
);

Expand Down Expand Up @@ -292,23 +292,23 @@ 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();
expect(gridFocus.isFocusable(cells[0][1])).toBeFalse();
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();
Expand Down
6 changes: 3 additions & 3 deletions src/aria/private/behaviors/grid-focus/grid-focus.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@ export interface GridFocusInputs<T extends GridFocusCell> {
/** The coordinates (row and column) of the current active cell. */
activeCoords: WritableSignalLike<RowCol>;

/** Whether disabled cells in the grid should be skipped when navigating. */
skipDisabled: SignalLike<boolean>;
/** Whether disabled cells in the grid should be focusable. */
softDisabled: SignalLike<boolean>;
}

/** Represents coordinates in a grid. */
Expand Down Expand Up @@ -163,7 +163,7 @@ export class GridFocus<T extends GridFocusCell> {

/** 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. */
Expand Down
Loading
Loading