Skip to content

Commit 4edfaed

Browse files
committed
fix(cdk/a11y): ensure that aria describer ID is unique (#24982)
Adds the unique application ID to the ARIA describer ID so that it's unique even if Angular is loaded multiple times. Fixes #24917. (cherry picked from commit b1ed1c5)
1 parent 2c5b158 commit 4edfaed

File tree

1 file changed

+6
-5
lines changed

1 file changed

+6
-5
lines changed

src/cdk/a11y/aria-describer/aria-describer.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
import {DOCUMENT} from '@angular/common';
10-
import {Inject, Injectable, OnDestroy} from '@angular/core';
10+
import {Inject, Injectable, OnDestroy, APP_ID, inject} from '@angular/core';
1111
import {Platform} from '@angular/cdk/platform';
1212
import {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

Comments
 (0)