refactor(multiple): default softDisabled to true (#32240)

* refactor(multiple): default softDisabled to true

Updates the default value of the  input to  across all ARIA components. This allows disabled items to receive focus by default, improving keyboard accessibility.
- Grid focus coordinates behavior has also been updated to correctly handle focus when  is enabled.

* fix(cdk/a11y): update tests to reflect correct behavior

* refactor(cdk/a11y): refine softDisabled behavior and update tests\n\nThis commit refines the  behavior across several a11y components (List, Listbox, Accordion, Tree) to ensure correct interaction between disabled states and navigation/selection. Specifically:\n\n- In , the  method now explicitly checks if the list is disabled before allowing selection updates, preventing unintended selections when  permits navigation.\n- In , a new  method is introduced to clearly distinguish between a 'hard' disabled state (blocking all interaction) and a 'soft' disabled state (allowing navigation but blocking selection).\n- Corresponding tests in , , , and  have been updated and expanded to accurately reflect and verify these refined  interactions, ensuring that navigation and selection behave as expected in various disabled scenarios.

Author: tjshiu

src/aria/accordion/accordion.spec.ts

@@ -363,12 +363,19 @@ describe('AccordionGroup', () => {
     });
 
     it('should not allow keyboard navigation if group is disabled', () => {
-      configureAccordionComponent({disabledGroup: true});
+      configureAccordionComponent({disabledGroup: true, softDisabled: false});
 
       downArrowKey(triggerElements[0]);
       expect(isTriggerActive(triggerElements[1])).toBeFalse();
     });
 
+    it('should allow keyboard navigation if group is disabled', () => {
+      configureAccordionComponent({disabledGroup: true});
+
+      downArrowKey(triggerElements[0]);
+      expect(isTriggerActive(triggerElements[1])).toBeTrue();
+    });
+
     it('should not allow expansion if group is disabled', () => {
       configureAccordionComponent({disabledGroup: true});
 
@@ -419,7 +426,7 @@ class AccordionGroupExample {
   value = model<string[]>([]);
   multiExpandable = signal(false);
   disabledGroup = signal(false);
-  softDisabled = signal(false);
+  softDisabled = signal(true);
   wrap = signal(false);
 
   disableItem(itemValue: string, disabled: boolean) {

src/aria/accordion/accordion.ts

@@ -172,7 +172,7 @@ export class AccordionGroup {
   value = model<string[]>([]);
 
   /** Whether to allow disabled items to receive focus. */
-  softDisabled = input(false, {transform: booleanAttribute});
+  softDisabled = input(true, {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

@@ -66,7 +66,7 @@ export class Grid {
   readonly disabled = input(false, {transform: booleanAttribute});
 
   /** Whether to allow disabled items to receive focus. */
-  readonly softDisabled = input(false, {transform: booleanAttribute});
+  readonly softDisabled = input(true, {transform: booleanAttribute});
 
   /** The focus strategy used by the grid. */
   readonly focusMode = input<'roving' | 'activedescendant'>('roving');

src/aria/listbox/listbox.spec.ts

@@ -195,11 +195,16 @@ describe('Listbox', () => {
         expect(listboxElement.getAttribute('tabindex')).toBe('-1');
       });
 
-      it('should set tabindex="0" for the listbox when disabled and focusMode is "roving"', () => {
-        setupListbox({disabled: true, focusMode: 'roving'});
+      it('should set tabindex="0" for the listbox when disabled and focusMode is "roving when softDisabled is false"', () => {
+        setupListbox({disabled: true, focusMode: 'roving', softDisabled: false});
         expect(listboxElement.getAttribute('tabindex')).toBe('0');
       });
 
+      it('should set tabindex="-1" for the listbox when disabled and focusMode is "roving"', () => {
+        setupListbox({disabled: true, focusMode: 'roving'});
+        expect(listboxElement.getAttribute('tabindex')).toBe('-1');
+      });
+
       it('should set initial focus (tabindex="0") on the first non-disabled option if no value is set', () => {
         setupListbox({focusMode: 'roving'});
         expect(optionElements[0].getAttribute('tabindex')).toBe('0');
@@ -218,8 +223,23 @@ describe('Listbox', () => {
         expect(optionElements[4].getAttribute('tabindex')).toBe('-1');
       });
 
-      it('should set initial focus (tabindex="0") on the first non-disabled option if selected option is disabled', () => {
-        setupListbox({focusMode: 'roving', value: [1], disabledOptions: [1]});
+      it('should set initial focus (tabindex="0") on the first non-disabled option if selected option is disabled when softDisabled is false', () => {
+        setupListbox({
+          focusMode: 'roving',
+          value: [1],
+          disabledOptions: [0],
+          softDisabled: false,
+        });
+        expect(optionElements[0].getAttribute('tabindex')).toBe('-1');
+        expect(optionElements[1].getAttribute('tabindex')).toBe('0');
+      });
+
+      it('should set initial focus (tabindex="0") on the first option if selected option is disabled', () => {
+        setupListbox({
+          focusMode: 'roving',
+          value: [0],
+          disabledOptions: [0],
+        });
         expect(optionElements[0].getAttribute('tabindex')).toBe('0');
         expect(optionElements[1].getAttribute('tabindex')).toBe('-1');
       });
@@ -247,10 +267,20 @@ describe('Listbox', () => {
       });
 
       it('should set aria-activedescendant to the ID of the first non-disabled option if selected option is disabled', () => {
-        setupListbox({focusMode: 'activedescendant', value: [1], disabledOptions: [1]});
+        setupListbox({focusMode: 'activedescendant', value: [0], disabledOptions: [0]});
         expect(listboxElement.getAttribute('aria-activedescendant')).toBe(optionElements[0].id);
       });
 
+      it('should set aria-activedescendant to the ID of the first non-disabled option if selected option is disabled when softDisabled is false', () => {
+        setupListbox({
+          focusMode: 'activedescendant',
+          value: [1],
+          disabledOptions: [0],
+          softDisabled: false,
+        });
+        expect(listboxElement.getAttribute('aria-activedescendant')).toBe(optionElements[1].id);
+      });
+
       it('should set tabindex="-1" for all options', () => {
         setupListbox({focusMode: 'activedescendant'});
         expect(optionElements[0].getAttribute('tabindex')).toBe('-1');
@@ -553,17 +583,17 @@ describe('Listbox', () => {
     isFocused: (index: number) => boolean,
   ) {
     describe(`keyboard navigation (focusMode="${focusMode}")`, () => {
-      it('should move focus to the last enabled option on End', () => {
+      it('should move focus to the last focusable option on End', () => {
         setupListbox({focusMode, disabledOptions: [4]});
         end();
-        expect(isFocused(3)).toBe(true);
+        expect(isFocused(4)).toBe(true);
       });
 
-      it('should move focus to the first enabled option on Home', () => {
+      it('should move focus to the first focusable option on Home', () => {
         setupListbox({focusMode, disabledOptions: [0]});
         end();
         home();
-        expect(isFocused(1)).toBe(true);
+        expect(isFocused(0)).toBe(true);
       });
 
       it('should allow keyboard navigation if the group is readonly', () => {
@@ -614,6 +644,18 @@ describe('Listbox', () => {
           down();
           expect(isFocused(1)).toBe(true);
         });
+
+        it('should not skip disabled options with ArrowDown when completely disabled', () => {
+          setupListbox({
+            focusMode,
+            orientation: 'vertical',
+            softDisabled: true,
+            disabled: true,
+          });
+
+          down();
+          expect(isFocused(0)).toBe(true);
+        });
       });
 
       describe('horizontal orientation', () => {
@@ -774,7 +816,7 @@ class ListboxExample {
   value: number[] = [];
   disabled = false;
   readonly = false;
-  softDisabled = false;
+  softDisabled = true;
   focusMode: 'roving' | 'activedescendant' = 'roving';
   orientation: 'vertical' | 'horizontal' = 'vertical';
   multi = false;

src/aria/listbox/listbox.ts

@@ -98,7 +98,7 @@ export class Listbox<V> {
   wrap = input(true, {transform: booleanAttribute});
 
   /** Whether to allow disabled items in the list to receive focus. */
-  softDisabled = input(false, {transform: booleanAttribute});
+  softDisabled = input(true, {transform: booleanAttribute});
 
   /** The focus strategy used by the list. */
   focusMode = input<'roving' | 'activedescendant'>('roving');

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

@@ -66,7 +66,7 @@ describe('Accordion Pattern', () => {
       multiExpandable: signal(true),
       items: signal([]),
       expandedIds: signal<string[]>([]),
-      softDisabled: signal(false),
+      softDisabled: signal(true),
       wrap: signal(true),
       element: signal(document.createElement('div')),
     };

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

@@ -143,7 +143,7 @@ export class GridFocus<T extends GridFocusCell> {
 
   /** Moves focus to the cell at the given coordinates if it's part of a focusable cell. */
   focusCoordinates(coords: RowCol): boolean {
-    if (this.gridDisabled()) {
+    if (this.gridDisabled() && !this.inputs.softDisabled()) {
       return false;
     }