fix(modal-domUtils):chartID initialization and addition of chartID in…

… modal ARIA attributes (#1722)

* fix(modal-domUtils):chartId initialization and addition of chartId in modal ARIA attributes

* chartID added as prefix to modal id

---------

Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

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

@@ -24,13 +24,14 @@ export class Modal extends Component {
 	}
 
 	handleShowModal = () => {
+		const id = this.services.domUtils.getChartID()
 		this.modal
 			.attr('data-modal', true)
 			.attr('class', 'cds--modal')
 			.attr('role', 'dialog')
 			.attr('aria-modal', true)
-			.attr('aria-labelledby', 'modal-title')
-			.attr('aria-describedby', 'modal-description')
+			.attr('aria-labelledby', `${id}__modal-title`)
+			.attr('aria-describedby', `${id}__modal-description`)
 			.attr('tabindex', -1)
 
 		this.modal.html(this.getModalHTML())
@@ -68,6 +69,8 @@ export class Modal extends Component {
 	}
 
 	getModalHTML() {
+		const id = this.services.domUtils.getChartID()
+
 		const options = this.model.getOptions()
 
 		const chartprefix = getProperty(options, 'style', 'prefix')
@@ -77,9 +80,9 @@ export class Modal extends Component {
 		return `
 		<div class="cds--modal-container cds--modal-container">
 			<div class="cds--modal-header cds--modal-header">
-				<p class="cds--modal-header__label cds--type-delta cds--modal-header__label cds--type-delta" id="modal-title">Tabular representation</p>
+				<p class="cds--modal-header__label cds--type-delta cds--modal-header__label cds--type-delta" id="${id}__modal-title">Tabular representation</p>
 
-				<p class="cds--modal-header__heading cds--type-beta cds--modal-header__heading cds--type-beta" id="modal-description">${sanitizeText(
+				<p class="cds--modal-header__heading cds--type-beta cds--modal-header__heading cds--type-beta" id="${id}__modal-description">${sanitizeText(
 					options.title
 				)}</p>
 

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

@@ -23,7 +23,7 @@ export interface getSVGElementSizeOptions {
 }
 
 export class DOMUtils extends Service {
-	private chartID = '' // initialized in initializeID() called by init()
+	private chartID!: string // initialized in initializeID() called by init()
 
 	constructor(model: ChartModel, services: any) {
 		super(model, services)
@@ -209,12 +209,12 @@ export class DOMUtils extends Service {
 	protected height: string
 
 	init() {
-		// Add width & height to the chart holder if necessary, and add a classname
-		this.styleHolderElement()
-
 		// Initialize chart ID
 		this.initializeID()
 
+		// Add width & height to the chart holder if necessary, and add a classname
+		this.styleHolderElement()
+
 		this.addMainContainer()
 
 		if (this.model.getOptions().resizable) {