[5.3] Joomla Dialog add support for aria-label (#46090)

Author: Fedik

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 <dialog> 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 <dialog> not to the <JoomlaDialog>, 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