AriaLabelReflectsContentDirective

aria-label-reflects-content.directive.ts

import { AfterViewInit, ChangeDetectorRef, Directive, ElementRef, HostBinding, OnDestroy } from '@angular/core';
import { NEVER, Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Directive({
  selector: '[ariaLabelReflectsContent]',
  exportAs: 'ariaLabelReflectsContent',
  standalone: true,
})
export class AriaLabelReflectsContentDirective implements AfterViewInit, OnDestroy {

  readonly htmlTagsRegexp: RegExp = /<\/?[^>]+(>|$)/g;

  @HostBinding('attr.aria-label')
  get attrAriaLabel(): string | null {
    return this.elementRef?.nativeElement.innerHTML.replace(this.htmlTagsRegexp, '').trim() || null;
  }

  private readonly destroyed$ = new Subject<void>();

  constructor(
    private readonly elementRef: ElementRef<HTMLElement>,
    private readonly changeDetectorRef: ChangeDetectorRef,
  ) {}

  ngAfterViewInit(): void {
    createMutationObserver(this.elementRef.nativeElement, {
      characterData: true,
      childList: true,
      subtree: true,
    }).pipe(
      takeUntil(this.destroyed$),
    ).subscribe(() => {
      this.changeDetectorRef.markForCheck();
    });
  }

  ngOnDestroy(): void {
    this.destroyed$.next();
    this.destroyed$.complete();
  }

}

export function createMutationObserver(
  element: HTMLElement,
  options?: MutationObserverInit,
): Observable<MutationRecord[]> {
  if (typeof MutationObserver === 'undefined') {
    return NEVER;
  }

  return new Observable(subscriber => {
    const observer = new MutationObserver(mutations => subscriber.next(mutations));

    observer.observe(element, options);

    return () => observer.disconnect();
  });
}