library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Dialog: Add aria-modal support

Browse Source 
Reflect the `modal` dialog option into the `aria-modal` attribute -
when `modal` is `true`, set `aria-modal` to `"true"`.

This helps some accessibility tools like VoiceOver with their rotor
functionality as it reduces the number of elements presented.

Fixes gh-2246
Closes gh-2257

Co-authored-by: Michał Gołębiowski-Owczarek <m.goleb@gmail.com>
This commit is contained in:
Ralf Koller 2024-06-14 13:04:00 +02:00 committed by GitHub
parent 1f251ca399
commit 376f142b9d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 39 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
tests/unit/dialog/core.js
View File

@ -84,6 +84,39 @@ QUnit.test( "ARIA", function( assert ) {
element.remove(); element.remove();
} ); } );
QUnit.test( "aria-modal", function( assert ) {
assert.expect( 9 );
var element, wrapper;
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", true );
assert.equal( wrapper.attr( "aria-modal" ), "true", "modal option set to true, aria-modal attribute added" );
element.remove();
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", false );
assert.equal( wrapper.attr( "aria-modal" ), undefined, "modal option set to false, aria-modal attribute not added" );
element.remove();
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.remove();
} );
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();

7
ui/widgets/dialog.js
View File

@ -347,7 +347,8 @@ $.widget( "ui.dialog", {
// Setting tabIndex makes the div focusable // Setting tabIndex makes the div focusable
tabIndex: -1, tabIndex: -1,
role: "dialog" role: "dialog",
"aria-modal": this.options.modal ? "true" : null
} ) } )
.appendTo( this._appendTo() ); .appendTo( this._appendTo() );
@ -762,6 +763,10 @@ $.widget( "ui.dialog", {
if ( key === "title" ) { if ( key === "title" ) {
this._title( this.uiDialogTitlebar.find( ".ui-dialog-title" ) ); this._title( this.uiDialogTitlebar.find( ".ui-dialog-title" ) );
} }
if ( key === "modal" ) {
uiDialog.attr( "aria-modal", value ? "true" : null );
}
}, },
_size: function() { _size: function() {