add support for custom chartId and fix modal ARIA labeling

Author: Sarath Pillai

packages/core/src/components/essentials/modal.ts

@@ -104,7 +104,7 @@ export class Modal extends Component {
 		<div class="cds--modal-container">
 			<div class="cds--modal-header">
 
-				<p class="cds--modal-header__label cds--type-delta" id="modal-title">${title}</p>
+				<p class="cds--modal-header__label cds--type-delta" id="${id}__modal-title">${title}</p>
 
 				<p class="cds--modal-header__heading cds--type-beta" id="${id}__modal-description">${sanitizeText(
 					options.title

packages/core/src/interfaces/charts.ts

@@ -34,6 +34,10 @@ import type {
  * Base chart options common to any chart
  */
 export interface BaseChartOptions {
+	/**
+	 * Optional custom chart ID
+	 */
+	chartId?: string
 	/*
 	 * aria-labels and other accessibility options
 	 */

packages/core/src/services/essentials/dom-utils.ts

@@ -251,7 +251,15 @@ export class DOMUtils extends Service {
 	}
 
 	private initializeID() {
-		this.chartID = Math.floor((1 + Math.random()) * 0x1000000000000).toString(16)
+		// Check if user provided a custom chartId in options
+		const customId = this.model.getOptions().chartId
+		
+		if (customId) {
+			this.chartID = customId
+		} else {
+			// Generate random ID as fallback
+			this.chartID = Math.floor((1 + Math.random()) * 0x1000000000000).toString(16)
+		}
 	}
 
 	addMainContainer() {