diff --git a/build/media_source/system/js/joomla-dialog.w-c.es6.js b/build/media_source/system/js/joomla-dialog.w-c.es6.js index bd5d547201bf6..96ce4c32c400e 100644 --- a/build/media_source/system/js/joomla-dialog.w-c.es6.js +++ b/build/media_source/system/js/joomla-dialog.w-c.es6.js @@ -116,6 +116,8 @@ class JoomlaDialog extends HTMLElement { this.preferredParent = null; // @internal. Parent of the popupContent for cases when it is HTMLElement. Need for recovery on destroy(). this.popupContentSrcLocation = null; + // @internal. Hold properties addressed directly to element, like "aria-". + this.dialogProps = {}; if (!config) return; @@ -127,6 +129,13 @@ class JoomlaDialog extends HTMLElement { } }); + // Check for properties which should be applied to the not to the , like "aria-". + ['ariaLabelledby', 'ariaLabel'].forEach((key) => { + if (config[key] !== undefined) { + this.dialogProps[key] = config[key]; + } + }); + // Check class name if (config.className) { this.classList.add(...config.className.split(' ')); @@ -191,6 +200,11 @@ class JoomlaDialog extends HTMLElement { this.dialog.addEventListener('close', onClose); this.appendChild(this.dialog); + // Apply dialog properties if any + Object.entries(this.dialogProps).forEach(([k, v]) => { + this.dialog[k] = v; + }); + // Get template parts this.popupTmplH = this.dialog.querySelector('.joomla-dialog-header'); this.popupTmplB = this.dialog.querySelector('.joomla-dialog-body'); @@ -214,6 +228,11 @@ class JoomlaDialog extends HTMLElement { i.classList.add(...this.iconHeader.split(' ')); this.popupTmplH.insertAdjacentElement('afterbegin', i); } + + // Set aria-label if it is still missing + if (!this.dialog.ariaLabel) { + this.dialog.ariaLabel = this.textHeader; + } } // Set the body