CngxAriaExpanded

Manages aria-expanded and optionally aria-controls on the host element.

Pairs a disclosure trigger (button) with its controlled region via standard WAI-ARIA attributes. Supports accordions, dropdowns, tree items, and any disclosure pattern where a control toggles visibility of another element.

Unlike manual [attr.aria-expanded] binding, this directive couples both attributes (aria-expanded + aria-controls) in a single declaration, preventing mismatches where one is set without the other.

Simple disclosure#

<button [cngxAriaExpanded]="open()" [controls]="'panel-id'" (click)="open.set(!open())">
  Toggle
</button>
<div id="panel-id" role="region" [hidden]="!open()">Panel content</div>

Accordion with multiple panels#

@for (panel of panels(); track panel.id) {
  <button [cngxAriaExpanded]="panel.open" [controls]="panel.id" (click)="toggle(panel)">
    {{ panel.label }}
  </button>
  @if (panel.open) {
    <div [id]="panel.id" role="region">{{ panel.content }}</div>
  }
}

https://cngxjs.github.io/cngx/examples/#/common/a11y/aria-expanded/accordion-multiple-panels https://cngxjs.github.io/cngx/examples/#/common/a11y/aria-expanded/disclosure-pattern