Aria-live vs Angular material live-announcer which one has better compatibility and performance

Question

I am working on a thumbnail component and need to announce each thumbnail's content. Here are two options 1) use [attr.aria-live]="polite" or use angular material a11y module. Not sure whether one has better performance and support more of browsers.

Basically, when a thumbnail is selected, announce its content.

solution1:

<thumbnail aria-live="polite" aria-atomic="true" [attr.aria-label]="selectObservable$ | async === currentThumbnailId ? currentThumbnailId : ''"></thumbnail>

solution2:

// template
<thumbnail></thumbnail>

// component.ts
@component
class ThumbnailComponent({
   constructor(liveAnnouncer: LiveAnnouncer){
      selectObservable$.pipe(
          filter(selectId => selectId === currentThumbnailId)
       ).subscribe( currentThumbnailId => 
          this.liveAnnouncer.announce(currentThumbnailId);
       )
  } 
})

Answer 1

I found the answer by testing it in both JAWS and NVDA. angular LiveAnnouncer is the good way to go. It creates a visiblly hidden 'cdk-live-announcer-element' with attributes 'aria-live' and 'aria-atomic', but insert announce message as text instead of 'aria-label' which makes it more compatible with most of screen reader. And also it adds 100ms delay to deal with somescreen reader.