accessebility: replace <span> tag with header tag in modal(js dialog) title accessebility/darshan/mark-model-heading-with-header-tag

- The title of the modal window is currently marked with a <span> tag instead of an appropriate heading
tag (such as <h2> , <h3> , etc.).
- This affects the semantic structure of the page and makes it difficult for
users with assistive technologies like screen readers to effectively navigate the page.
- The modal title is not recognized as such, which hinders orientation and understanding of the content.

- Solution:
- replace <span> tag with <h2>(header tag) for `ui-dialog-title`.
- to make font-size consistent added css rule for `ui-dialog-title`.

Note: this will change all js dialog title withg header tags ( not only specific to writer but also effeted for every document type)
Signed-off-by: Darshan-upadhyay1110 <darshan.upadhyay@collabora.com>
Change-Id: I5a1e276c3a129400aa5834e186a263db95f01833

2 files changed, 2 insertions, 1 deletions

diff --git a/browser/css/cool.css b/browser/css/cool.css
index d49c268497..b86f1d4745 100644
--- a/browser/css/cool.css
+++ b/browser/css/cool.css
@@ -819,6 +819,7 @@ nav.spreadsheet-color-indicator ~ #sidebar-dock-wrapper {
 
 .ui-dialog-title {
 	min-height: 1em;
+	font-size: var(--header-font-size);
 }
 
 .lokdialog_container.ui-dialog.ui-widget-content {
diff --git a/browser/src/control/Control.JSDialog.js b/browser/src/control/Control.JSDialog.js
index 7e48b99d0a..0b6f2d9d86 100644
--- a/browser/src/control/Control.JSDialog.js
+++ b/browser/src/control/Control.JSDialog.js
@@ -262,7 +262,7 @@ L.Control.JSDialog = L.Control.extend({
 
 		if (instance.haveTitlebar) {
 			instance.titlebar = L.DomUtil.create('div', 'ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix', instance.form);
-			var title = L.DomUtil.create('span', 'ui-dialog-title', instance.titlebar);
+			var title = L.DomUtil.create('h2', 'ui-dialog-title', instance.titlebar);
 			title.innerText = instance.title;
 			instance.titleCloseButton = L.DomUtil.create('button', 'ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close', instance.titlebar);
 			instance.titleCloseButton.setAttribute('aria-label', _('Close dialog'));