77 */
88
99import { DOCUMENT } from '@angular/common' ;
10- import { Inject , Injectable , OnDestroy } from '@angular/core' ;
10+ import { Inject , Injectable , OnDestroy , APP_ID , inject } from '@angular/core' ;
1111import { Platform } from '@angular/cdk/platform' ;
1212import { addAriaReferencedId , getAriaReferenceIds , removeAriaReferencedId } from './aria-reference' ;
1313
@@ -74,6 +74,7 @@ export class AriaDescriber implements OnDestroy {
7474 private _platform ?: Platform ,
7575 ) {
7676 this . _document = _document ;
77+ this . _id = inject ( APP_ID ) + '-' + nextId ++ ;
7778 }
7879
7980 /**
@@ -97,7 +98,7 @@ export class AriaDescriber implements OnDestroy {
9798
9899 if ( typeof message !== 'string' ) {
99100 // We need to ensure that the element has an ID.
100- setMessageId ( message ) ;
101+ setMessageId ( message , this . _id ) ;
101102 this . _messageRegistry . set ( key , { messageElement : message , referenceCount : 0 } ) ;
102103 } else if ( ! this . _messageRegistry . has ( key ) ) {
103104 this . _createMessageElement ( message , role ) ;
@@ -162,7 +163,7 @@ export class AriaDescriber implements OnDestroy {
162163 */
163164 private _createMessageElement ( message : string , role ?: string ) {
164165 const messageElement = this . _document . createElement ( 'div' ) ;
165- setMessageId ( messageElement ) ;
166+ setMessageId ( messageElement , this . _id ) ;
166167 messageElement . textContent = message ;
167168
168169 if ( role ) {
@@ -297,8 +298,8 @@ function getKey(message: string | Element, role?: string): string | Element {
297298}
298299
299300/** Assigns a unique ID to an element, if it doesn't have one already. */
300- function setMessageId ( element : HTMLElement ) {
301+ function setMessageId ( element : HTMLElement , serviceId : string ) {
301302 if ( ! element . id ) {
302- element . id = `${ CDK_DESCRIBEDBY_ID_PREFIX } -${ nextId ++ } ` ;
303+ element . id = `${ CDK_DESCRIBEDBY_ID_PREFIX } -${ serviceId } - ${ nextId ++ } ` ;
303304 }
304305}
0 commit comments