refactor(multiple): rename skipDisabled to softDisabled (#32187)

The skipDisabled input is renamed to softDisabled to better align with accessibility best practices.

Author: tjshiu

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<string[]>([]);
   multiExpandable = signal(false);
   disabledGroup = signal(false);
-  skipDisabled = signal(true);
+  softDisabled = signal(false);
   wrap = signal(false);
 
   disableItem(itemValue: string, disabled: boolean) {

src/aria/accordion/accordion.ts

@@ -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});

src/aria/grid/grid.ts

@@ -65,8 +65,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');

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;

src/aria/listbox/listbox.ts

@@ -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');

src/aria/menu/menu.ts

@@ -184,7 +184,7 @@ export class Menu<V> {
       ...this,
       parent: computed(() => this.parent()?._pattern),
       multi: () => false,
-      skipDisabled: () => false,
+      softDisabled: () => true,
       focusMode: () => 'roving',
       orientation: () => 'vertical',
       selectionMode: () => 'explicit',
@@ -306,7 +306,7 @@ export class MenuBar<V> {
     this._pattern = new MenuBarPattern({
       ...this,
       multi: () => false,
-      skipDisabled: () => false,
+      softDisabled: () => true,
       focusMode: () => 'roving',
       orientation: () => 'horizontal',
       selectionMode: () => 'explicit',

src/aria/private/accordion/accordion.spec.ts

@@ -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')),
     };

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,

src/aria/private/behaviors/grid-focus/grid-focus.spec.ts

@@ -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,
     }),
   );
 
@@ -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();

src/aria/private/behaviors/grid-focus/grid-focus.ts

@@ -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. */
@@ -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. */