PrimeNG多层嵌套Accordion三级展开折叠异常解决方案咨询

针对第三层级展开后随即折叠、因aria-hidden属性与后代焦点冲突导致的问题，可尝试以下几种解决思路：

• 手动同步aria-hidden属性
  利用Accordion面板的onExpand和onCollapse事件，手动修正对应层级元素的aria-hidden状态，确保展开时设为false，折叠时设为true，避免父级与子级的属性状态冲突。
  示例代码：

  handleExpand(event: any) {
    const panelEl = event.panel.el.nativeElement;
    panelEl.setAttribute('aria-hidden', 'false');
    // 同步父级面板的aria-hidden状态
    const parentPanel = panelEl.closest('.p-accordion-panel');
    if (parentPanel) {
      parentPanel.setAttribute('aria-hidden', 'false');
    }
  }
  
  handleCollapse(event: any) {
    const panelEl = event.panel.el.nativeElement;
    panelEl.setAttribute('aria-hidden', 'true');
  }
  

  模板中绑定事件：

  <p-accordionPanel (onExpand)="handleExpand($event)" (onCollapse)="handleCollapse($event)">
    <!-- 嵌套的Accordion内容 -->
  </p-accordionPanel>
  

• 禁用第三层级的自动焦点管理
  PrimeNG Accordion默认会在展开时将焦点移至面板内容，多层嵌套时易触发焦点冲突。可通过自定义指令拦截焦点设置行为：

  import { Directive, HostListener } from '@angular/core';
  import { AccordionPanel } from 'primeng/accordion';
  
  @Directive({
    selector: '[appDisableAccordionFocus]'
  })
  export class DisableAccordionFocusDirective {
    constructor(private panel: AccordionPanel) {}
  
    @HostListener('onExpand')
    onExpand() {
      setTimeout(() => {
        // 移除面板内容的焦点
        const focusable = this.panel.el.nativeElement.querySelector('[tabindex]:not([tabindex="-1"])');
        if (focusable) {
          (focusable as HTMLElement).blur();
        }
      }, 0);
    }
  }
  

  模板中使用指令：

  <p-accordionPanel appDisableAccordionFocus>
    <!-- 第三层级面板内容 -->
  </p-accordionPanel>
  

• 调整嵌套结构，拆分独立Accordion
  将第三层级内容从父级面板中拆分出来，改为独立的Accordion组件，减少层级嵌套带来的aria属性冲突：

  <p-accordion>
    <p-accordionPanel header="第一层级">
      <p-accordion>
        <p-accordionPanel header="第二层级">
          <!-- 独立的第三层级Accordion -->
          <p-accordion>
            <p-accordionPanel header="第三层级">
              <!-- 内容 -->
            </p-accordionPanel>
          </p-accordion>
        </p-accordionPanel>
      </p-accordion>
    </p-accordionPanel>
  </p-accordion>
  

• 全局样式强制修正aria-hidden状态
  通过CSS强制设置展开状态下面板的aria-hidden属性为false，覆盖默认的冲突逻辑：

  .p-accordion-panel-expanded .p-accordion-content {
    aria-hidden: false !important;
  }
  

内容的提问来源于stack exchange，提问作者Nesan Mano