How do you add ARIA attributes to a custom Angular component to make it accessible?

You bind ARIA attributes directly in the component template using Angular's attribute binding syntax, describing the role and current state of a custom element so a screen reader can correctly announce it, especially when a native HTML element does not already provide that meaning on its own.

@Component({
  selector: 'app-menu-button',
  template: `
    <button [attr.aria-expanded]="isOpen" aria-label="Open navigation menu" (click)="toggle()">
      Menu
    </button>
  `
})
export class MenuButtonComponent {
  isOpen = false;
  toggle() { this.isOpen = !this.isOpen; }
}