From 5cd9d08908dcde1aac7e29260e7662753ea20ca9 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Fri, 27 May 2022 10:27:13 +0200
Subject: [PATCH] fix(cdk/a11y): ensure that aria describer ID is unique

Adds the unique application ID to the ARIA describer ID so that it's unique even if Angular is loaded multiple times.

Fixes #24917.
---
 src/cdk/a11y/aria-describer/aria-describer.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/cdk/a11y/aria-describer/aria-describer.ts b/src/cdk/a11y/aria-describer/aria-describer.ts
index c7129e135306..47563593c78c 100644
--- a/src/cdk/a11y/aria-describer/aria-describer.ts
+++ b/src/cdk/a11y/aria-describer/aria-describer.ts
@@ -7,7 +7,7 @@
  */
 
 import {DOCUMENT} from '@angular/common';
-import {Inject, Injectable, OnDestroy} from '@angular/core';
+import {Inject, Injectable, OnDestroy, APP_ID, inject} from '@angular/core';
 import {Platform} from '@angular/cdk/platform';
 import {addAriaReferencedId, getAriaReferenceIds, removeAriaReferencedId} from './aria-reference';
 
@@ -74,6 +74,7 @@ export class AriaDescriber implements OnDestroy {
     private _platform?: Platform,
   ) {
     this._document = _document;
+    this._id = inject(APP_ID) + '-' + nextId++;
   }
 
   /**
@@ -97,7 +98,7 @@ export class AriaDescriber implements OnDestroy {
 
     if (typeof message !== 'string') {
       // We need to ensure that the element has an ID.
-      setMessageId(message);
+      setMessageId(message, this._id);
       this._messageRegistry.set(key, {messageElement: message, referenceCount: 0});
     } else if (!this._messageRegistry.has(key)) {
       this._createMessageElement(message, role);
@@ -162,7 +163,7 @@ export class AriaDescriber implements OnDestroy {
    */
   private _createMessageElement(message: string, role?: string) {
     const messageElement = this._document.createElement('div');
-    setMessageId(messageElement);
+    setMessageId(messageElement, this._id);
     messageElement.textContent = message;
 
     if (role) {
@@ -297,8 +298,8 @@ function getKey(message: string | Element, role?: string): string | Element {
 }
 
 /** Assigns a unique ID to an element, if it doesn't have one already. */
-function setMessageId(element: HTMLElement) {
+function setMessageId(element: HTMLElement, serviceId: string) {
   if (!element.id) {
-    element.id = `${CDK_DESCRIBEDBY_ID_PREFIX}-${nextId++}`;
+    element.id = `${CDK_DESCRIBEDBY_ID_PREFIX}-${serviceId}-${nextId++}`;
   }
 }