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,11 @@ export class CdkAccordionPanel {
     '[attr.aria-expanded]': 'pattern.expanded()',
     '[attr.aria-controls]': 'pattern.controls()',
     '[attr.aria-disabled]': 'pattern.disabled()',
+    '[attr.inert]': 'pattern.tabindex() < 0 ? true : null',
     '[attr.tabindex]': 'pattern.tabindex()',
     '(keydown)': 'pattern.onKeydown($event)',
     '(pointerdown)': 'pattern.onPointerdown($event)',
-    '(focusin)': 'pattern.onFocus($event)',
+    '(focusin)': 'pattern.onFocus()',
   },
 })
 export class CdkAccordionTrigger {

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

src/components-examples/cdk-experimental/accordion/cdk-accordion/cdk-accordion-example.html

@@ -40,7 +40,7 @@ <h3 class="example-accordion-header">
 
   <div class="example-accordion-container">
     <h3 class="example-accordion-header">
-      <button cdkAccordionTrigger value="item2" disabled>
+      <button cdkAccordionTrigger value="item2" [disabled]="true">
         Item 2 Trigger (disabled)
         <mat-icon aria-hidden="true">{{expansionIcon('item2')()}}</mat-icon>
       </button>