Dialog: Add option to put the dialog title in a header element

Implement a new option: `uiDialogTitleHeadingLevel`, allowing to change
the `span` wrapping the dialog title into a heading element (`h1`-`h6`).
Value `0` represents the `span`, values 1-6 - a heading at the specified
level.

Fixes gh-2271
Closes gh-2275

diff --git a/tests/unit/dialog/common-deprecated.js b/tests/unit/dialog/common-deprecated.js
index 1efdcb030183aec9dd05c3e7883aad6e1e4fba8d..2cdae9681d8074f5385f6ee6d7aac041f60f8f32 100644 (file)
--- a/tests/unit/dialog/common-deprecated.js
+++ b/tests/unit/dialog/common-deprecated.js
@@ -34,6 +34,7 @@ common.testWidget( "dialog", {
                resizable: true,
                show: null,
                title: null,
+               uiDialogTitleHeadingLevel: 0,
                width: 300,
 
                // Callbacks

diff --git a/tests/unit/dialog/common.js b/tests/unit/dialog/common.js
index c8d885ad03f13ef8101d133975666513bd990e73..f3118104760c73fc704ffda1a967fe13539e55f4 100644 (file)
--- a/tests/unit/dialog/common.js
+++ b/tests/unit/dialog/common.js
@@ -33,6 +33,7 @@ common.testWidget( "dialog", {
                resizable: true,
                show: null,
                title: null,
+               uiDialogTitleHeadingLevel: 0,
                width: 300,
 
                // Callbacks

diff --git a/tests/unit/dialog/core.js b/tests/unit/dialog/core.js
index c6bdec778c1d674717b0fdefde10349d9b14b15d..a8cc9678e53dce93149abcc6f2e844c5580a0fb3 100644 (file)
--- a/tests/unit/dialog/core.js
+++ b/tests/unit/dialog/core.js
@@ -117,6 +117,44 @@ QUnit.test( "aria-modal", function( assert ) {
        element.remove();
 } );
 
+QUnit.test( "ui dialog title heading level", function( assert ) {
+       assert.expect( 8 );
+
+       var element, nodeName;
+
+       element = $( "<div>" ).dialog( { modal: true } );
+       nodeName = element.dialog( "widget" ).find( ".ui-dialog-title" ).get( 0 ).nodeName.toLowerCase();
+       assert.equal( nodeName, "span", "Element wrapping the dialog title is span" );
+
+       element = $( "<div>" ).dialog( { modal: true, uiDialogTitleHeadingLevel: 0 } );
+       nodeName = element.dialog( "widget" ).find( ".ui-dialog-title" ).get( 0 ).nodeName.toLowerCase();
+       assert.equal( nodeName, "span", "Element wrapping the dialog title is span" );
+
+       element = $( "<div>" ).dialog( { modal: true, uiDialogTitleHeadingLevel: 1 } );
+       nodeName = element.dialog( "widget" ).find( ".ui-dialog-title" ).get( 0 ).nodeName.toLowerCase();
+       assert.equal( nodeName, "h1", "Element wrapping the dialog title is h1" );
+
+       element = $( "<div>" ).dialog( { modal: true, uiDialogTitleHeadingLevel: 6 } );
+       nodeName = element.dialog( "widget" ).find( ".ui-dialog-title" ).get( 0 ).nodeName.toLowerCase();
+       assert.equal( nodeName, "h6", "Element wrapping the dialog title is h6" );
+
+       element = $( "<div>" ).dialog( { modal: true, uiDialogTitleHeadingLevel: 9 } );
+       nodeName = element.dialog( "widget" ).find( ".ui-dialog-title" ).get( 0 ).nodeName.toLowerCase();
+       assert.equal( nodeName, "span", "Element wrapping the dialog title is span" );
+
+       element = $( "<div>" ).dialog( { modal: true, uiDialogTitleHeadingLevel: -9 } );
+       nodeName = element.dialog( "widget" ).find( ".ui-dialog-title" ).get( 0 ).nodeName.toLowerCase();
+       assert.equal( nodeName, "span", "Element wrapping the dialog title is span" );
+
+       element = $( "<div>" ).dialog( { modal: true, uiDialogTitleHeadingLevel: 2.3 } );
+       nodeName = element.dialog( "widget" ).find( ".ui-dialog-title" ).get( 0 ).nodeName.toLowerCase();
+       assert.equal( nodeName, "span", "Element wrapping the dialog title is span" );
+
+       element = $( "<div>" ).dialog( { modal: true, uiDialogTitleHeadingLevel: "foo" } );
+       nodeName = element.dialog( "widget" ).find( ".ui-dialog-title" ).get( 0 ).nodeName.toLowerCase();
+       assert.equal( nodeName, "span", "Element wrapping the dialog title is span" );
+} );
+
 QUnit.test( "widget method", function( assert ) {
        assert.expect( 1 );
        var dialog = $( "<div>" ).appendTo( "#qunit-fixture" ).dialog();

diff --git a/ui/widgets/dialog.js b/ui/widgets/dialog.js
index 756ad1cb10b860d61f1796b5ad1c74300cd5b8a5..1ef2fa3d6f43828889512d9d539ff10fcdd4ab01 100644 (file)
--- a/ui/widgets/dialog.js
+++ b/ui/widgets/dialog.js
@@ -81,6 +81,7 @@ $.widget( "ui.dialog", {
                resizable: true,
                show: null,
                title: null,
+               uiDialogTitleHeadingLevel: 0,
                width: 300,
 
                // Callbacks
@@ -437,7 +438,13 @@ $.widget( "ui.dialog", {
                        }
                } );
 
-               uiDialogTitle = $( "<span>" ).uniqueId().prependTo( this.uiDialogTitlebar );
+               var uiDialogHeadingLevel = Number.isInteger( this.options.uiDialogTitleHeadingLevel ) &&
+                       this.options.uiDialogTitleHeadingLevel > 0 &&
+                       this.options.uiDialogTitleHeadingLevel <= 6 ?
+                       "h" + this.options.uiDialogTitleHeadingLevel : "span";
+
+               uiDialogTitle = $( "<" + uiDialogHeadingLevel + ">" )
+                       .uniqueId().prependTo( this.uiDialogTitlebar );
                this._addClass( uiDialogTitle, "ui-dialog-title" );
                this._title( uiDialogTitle );