Skip to content

Dialog: Add aria-modal support #2257

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Jun 14, 2024
Merged

Dialog: Add aria-modal support #2257

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
a8a6e26
Add aria-modal attribute true to dialog modal wrapper
rpkoller May 24, 2024
729c6d0
Add a test if aria-modal attribute is there and true
rpkoller May 24, 2024
268dc62
fix: increasing # of expected asserts from 4 to 5
rpkoller May 24, 2024
7f88e7f
only add aria-modal when this.options.modal is set to true
rpkoller May 31, 2024
22ea1a7
revert the ARIA test back to its initial form per @mgols recommendation
rpkoller Jun 7, 2024
546144d
Initial draft for the aria-modal test
rpkoller Jun 11, 2024
2506b1c
Fixing initial draft that contained odd unintended changes
rpkoller Jun 11, 2024
4810065
change option to options for the dialog modal options
rpkoller Jun 12, 2024
8283b78
Add check for modal to _setOption method
rpkoller Jun 14, 2024
42edf77
applying mgol's suggested changes to the aria-modal test
rpkoller Jun 14, 2024
174bb27
Apply suggestions from code review
mgol Jun 14, 2024
e42ab78
Avoid setting the modal option to null
mgol Jun 14, 2024
3da0e24
Update tests/unit/dialog/core.js
mgol Jun 14, 2024
67490a0
Only declare element & wrapper once in tests
mgol Jun 14, 2024
2b40401
Fix indentation
mgol Jun 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions tests/unit/dialog/core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,43 @@ QUnit.test( "ARIA", function( assert ) {
element.remove();
} );

QUnit.test( "aria-modal", function( assert ) {
assert.expect( 12 );

var element = $( "<div>" ).dialog( { modal: true } ),
wrapper = element.dialog( "widget" );
assert.equal( wrapper.attr( "aria-modal" ), "true", "modal option set to true, aria-modal attribute added" );
element.dialog( "option", "modal", false );
assert.equal( wrapper.attr( "aria-modal" ), undefined, "modal option set to false, aria-modal attribute not added" );
element.dialog( "option", "modal", null );
assert.equal( wrapper.attr( "aria-modal" ), undefined, "modal option not set, aria-modal attribute not added" );
element.dialog( "option", "modal", true );
assert.equal( wrapper.attr( "aria-modal" ), "true", "modal option set to true, aria-modal attribute added" );
element.remove();

var element = $( "<div>" ).dialog( { modal: false } ),
wrapper = element.dialog( "widget" );
assert.equal( wrapper.attr( "aria-modal" ), undefined, "modal option set to false, aria-modal attribute not added" );
element.dialog( "option", "modal", true );
assert.equal( wrapper.attr( "aria-modal" ), "true", "modal option set to true, aria-modal attribute added" );
element.dialog( "option", "modal", null );
assert.equal( wrapper.attr( "aria-modal" ), undefined, "modal option not set, aria-modal attribute not added" );
element.dialog( "option", "modal", false );
assert.equal( wrapper.attr( "aria-modal" ), undefined, "modal option set to false, aria-modal attribute not added" );
element.remove();

var element = $( "<div>" ).dialog(),
wrapper = element.dialog( "widget" );
assert.equal( wrapper.attr( "aria-modal" ), undefined, "modal option not set, aria-modal attribute not added" );
element.dialog( "option", "modal", true );
assert.equal( wrapper.attr( "aria-modal" ), "true", "modal option set to true, aria-modal attribute added" );
element.dialog( "option", "modal", false );
assert.equal( wrapper.attr( "aria-modal" ), undefined, "modal option set to false, aria-modal attribute not added" );
element.dialog( "option", "modal", null );
assert.equal( wrapper.attr( "aria-modal" ), null, "modal option not set, aria-modal attribute not added" );
element.remove();
} );

QUnit.test( "widget method", function( assert ) {
assert.expect( 1 );
var dialog = $( "<div>" ).appendTo( "#qunit-fixture" ).dialog();
Expand Down
7 changes: 6 additions & 1 deletion ui/widgets/dialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,7 +347,8 @@ $.widget( "ui.dialog", {

// Setting tabIndex makes the div focusable
tabIndex: -1,
role: "dialog"
role: "dialog",
"aria-modal": this.options.modal ? "true" : null
} )
.appendTo( this._appendTo() );

Expand Down Expand Up @@ -762,6 +763,10 @@ $.widget( "ui.dialog", {
if ( key === "title" ) {
this._title( this.uiDialogTitlebar.find( ".ui-dialog-title" ) );
}

if ( key === "modal" ) {
uiDialog.attr( "aria-modal", value ? "true" : null );
}
},

_size: function() {
Expand Down