Accessibility: Change (modal) pop-up title from <h4> to <h1>

0
Dear all,  the pop-up title is defined as <h4> by default. Is it possible to change it to <h1>? .modal-dialog { .modal-content { .modal-header { h4 { } .close { } } }
asked
2 answers
1

Hi Minh,

No it is not possible to change the DOM structure on that level.

Why do you need this?

Not sure if you need to start with H1, the heading 1,2,3, etc. It used for navigation. And popups are not part of you standard navigation structure.  

https://www.w3.org/WAI/tutorials/page-structure/headings/

Cheers, Andries

answered
0

The question is changing <hX> to <h1>

The feature is not available out of the box. You can implement the following mutation ovserver in an HTMLSnippet, which you can also extend to do other manipulations you cant perform directly in the Mendix IDE

//------------------------------------------------------------------------------
//hdl
//------------------------------------------------------------------------------
function hdlElIns(nod,elsel,cb){
	var onMutationsObserved=function(muts){
		muts.forEach(function(mut){
			if(mut.addedNodes.length){
				var els=$(mut.addedNodes).find(elsel);
				for (var i=0,len=els.length;i<len;i++){
					cb(els[i]);
				}
			}
		});
	};
	var tgt=$(nod)[0];
	var cfg={childList:true,subtree:true};
	var MutationObserver=window.MutationObserver||window.WebKitMutationObserver;
	var obs=new MutationObserver(onMutationsObserved);	
	obs.observe(tgt,cfg);

}
//------------------------------------------------------------------------------
//hdlspec
//------------------------------------------------------------------------------
hdlElIns('body','.caption',function(element){
	$(element).replaceWith(function(){
		return $(
			"<h1>",
			{
				"class":this.className,
				"html": $(this).html()
			}
		);
	});
})


The callback will fire on creation of  .caption elements and replace the node maintaining the content, classes, and ids.

Test code:

//------------------------------------------------------------------------------
//tst
//------------------------------------------------------------------------------
var dlg=new mxui.widget.DialogMessage({
	caption:"Test Caption",
	content:"Test Content "+(new Date().getTime()),
	type:"info"
});
dlg.show()
//------------------------------------------------------------------------------


Output:

answered