79379245

Date: 2025-01-22 21:26:57
Score: 0.5
Natty:
Report link

Issue is most likely related to how ARIA attributes interact with focus managment in nested accordions. when expanding accordion or collapsing focus can inadvertenly move to a descendant and cause parent to interpret this as a collapse.


there are few ways of handling this, not sure what is your use case but you can try at least to use any of these methods to suit your needs


Control Focus Managment Explicitly


    import { Component, ElementRef, ViewChild } from '@angular/core';
    
    @Component({
      selector: 'app-accordion',
      template: `
        <button #accordionHeader (click)="toggleAccordion()">Accordion Header</button>
        @if (isExpanded) {
          <div role="region">
            <p>Content here...</p>
          </div>
        }
      `,
    })
    export class AccordionComponent {
      @ViewChild('accordionHeader') accordionHeader!: ElementRef<HTMLButtonElement>;
      isExpanded = false;
    
      toggleAccordion() {
        this.isExpanded = !this.isExpanded;
        this.accordionHeader.nativeElement.focus();
      }
    }

Update ARIA attributes Dynamically

<button
  (click)="toggleAccordion()"
  [attr.aria-expanded]="isExpanded"
  aria-controls="panel"
>
  Accordion Header
</button>
<div id="panel" [attr.aria-hidden]="!isExpanded" *ngIf="isExpanded">
  <p>Content...</p>
</div>

these two solutions won't be accurate as you did not provide any code what so ever so either you could provide us some code to look at or try these two and leave a comment which of them helped you out.

Reasons:
  • Blacklisted phrase (1): what is your
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: David Khvedelidze