Dialog: Add aria-modal support

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>

diff --git a/tests/unit/dialog/core.js b/tests/unit/dialog/core.js
index d307504b80c8f737634e80266b555ea9ebcce7f7..c6bdec778c1d674717b0fdefde10349d9b14b15d 100644 (file)
--- a/tests/unit/dialog/core.js
+++ b/tests/unit/dialog/core.js
@@ -84,6 +84,39 @@ QUnit.test( "ARIA", function( assert ) {
        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 ) {
        assert.expect( 1 );
        var dialog = $( "<div>" ).appendTo( "#qunit-fixture" ).dialog();

diff --git a/ui/widgets/dialog.js b/ui/widgets/dialog.js
index 4ba9d11176519107b90eac11cf5735cc17dcf40e..756ad1cb10b860d61f1796b5ad1c74300cd5b8a5 100644 (file)
--- a/ui/widgets/dialog.js
+++ b/ui/widgets/dialog.js
@@ -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() );
 
@@ -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() {