fix(cdk-experimental/accordion): fix disabled trigger button can't be focused when skipDisabled=false

Author: ok7sai

src/cdk-experimental/accordion/accordion.ts

@@ -93,10 +93,12 @@ export class CdkAccordionPanel {
     '[attr.aria-expanded]': 'pattern.expanded()',
     '[attr.aria-controls]': 'pattern.controls()',
     '[attr.aria-disabled]': 'pattern.disabled()',
+    '[attr.inert]': 'hardDisabled() ? true : null',
+    '[attr.disabled]': 'hardDisabled() ? true : null',
     '[attr.tabindex]': 'pattern.tabindex()',
     '(keydown)': 'pattern.onKeydown($event)',
     '(pointerdown)': 'pattern.onPointerdown($event)',
-    '(focusin)': 'pattern.onFocus($event)',
+    '(focusin)': 'pattern.onFocus()',
   },
 })
 export class CdkAccordionTrigger {
@@ -115,6 +117,13 @@ export class CdkAccordionTrigger {
   /** Whether the trigger is disabled. */
   disabled = input(false, {transform: booleanAttribute});
 
+  /**
+   * Whether this trigger is completely inaccessible.
+   *
+   * TODO(ok7sai): Consider move this to UI patterns.
+   */
+  readonly hardDisabled = computed(() => this.pattern.disabled() && this.pattern.tabindex() < 0);
+
   /** The accordion panel pattern controlled by this trigger. This is set by CdkAccordionGroup. */
   readonly accordionPanel: WritableSignal<AccordionPanelPattern | undefined> = signal(undefined);
 

src/cdk-experimental/ui-patterns/accordion/accordion.ts

@@ -158,44 +158,29 @@ export class AccordionTriggerPattern {
   /** The pointerdown event manager for the accordion trigger. */
   pointerdown = computed(() => {
     return new PointerEventManager().on(e => {
-      const item = this._getItem(e);
-
-      if (item) {
-        this.accordionGroup().navigation.goto(item);
-        this.expansionControl.toggle();
-      }
+      this.accordionGroup().navigation.goto(this);
+      this.expansionControl.toggle();
     });
   });
 
   /** Handles keydown events on the trigger, delegating to the group if not disabled. */
-  onKeydown(event: KeyboardEvent): void {
+  onKeydown(event: KeyboardEvent) {
     this.keydown().handle(event);
   }
 
   /** Handles pointerdown events on the trigger, delegating to the group if not disabled. */
-  onPointerdown(event: PointerEvent): void {
+  onPointerdown(event: PointerEvent) {
     this.pointerdown().handle(event);
   }
 
   /** Handles focus events on the trigger. This ensures the tabbing changes the active index. */
-  onFocus(event: FocusEvent): void {
-    const item = this._getItem(event);
+  onFocus() {
+    if (this.disabled() && this.accordionGroup().skipDisabled()) return;
 
-    if (item && this.inputs.accordionGroup().focusManager.isFocusable(item)) {
-      this.accordionGroup().focusManager.focus(item);
+    if (this.inputs.accordionGroup().focusManager.isFocusable(this)) {
+      this.accordionGroup().focusManager.focus(this);
     }
   }
-
-  private _getItem(e: Event) {
-    if (!(e.target instanceof HTMLElement)) {
-      return;
-    }
-
-    const element = e.target.closest('[role="button"]');
-    return this.accordionGroup()
-      .items()
-      .find(i => i.element() === element);
-  }
 }
 
 /** Represents the required inputs for the AccordionPanelPattern. */