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
This commit is contained in:
Ralf Koller 2024-09-09 17:55:58 +02:00 committed by GitHub
parent fd1b8a03b2
commit d564731f20
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 48 additions and 1 deletions

View File

@ -34,6 +34,7 @@ common.testWidget( "dialog", {
resizable: true, resizable: true,
show: null, show: null,
title: null, title: null,
uiDialogTitleHeadingLevel: 0,
width: 300, width: 300,
// Callbacks // Callbacks

View File

@ -33,6 +33,7 @@ common.testWidget( "dialog", {
resizable: true, resizable: true,
show: null, show: null,
title: null, title: null,
uiDialogTitleHeadingLevel: 0,
width: 300, width: 300,
// Callbacks // Callbacks

View File

@ -117,6 +117,44 @@ QUnit.test( "aria-modal", function( assert ) {
element.remove(); 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 ) { QUnit.test( "widget method", function( assert ) {
assert.expect( 1 ); assert.expect( 1 );
var dialog = $( "<div>" ).appendTo( "#qunit-fixture" ).dialog(); var dialog = $( "<div>" ).appendTo( "#qunit-fixture" ).dialog();

View File

@ -81,6 +81,7 @@ $.widget( "ui.dialog", {
resizable: true, resizable: true,
show: null, show: null,
title: null, title: null,
uiDialogTitleHeadingLevel: 0,
width: 300, width: 300,
// Callbacks // 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._addClass( uiDialogTitle, "ui-dialog-title" );
this._title( uiDialogTitle ); this._title( uiDialogTitle );