aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorRalf Koller <1665422+rpkoller@users.noreply.github.com>2024-06-14 13:04:00 +0200
committerGitHub <noreply@github.com>2024-06-14 13:04:00 +0200
commit376f142b9de42241a20efa9c89644ff5425da174 (patch)
tree129292775f86739ece147a04442c13039428d4c0
parent1f251ca399ec01c75d24293e49ac767938a547e2 (diff)
downloadjquery-ui-376f142b9de42241a20efa9c89644ff5425da174.tar.gz
jquery-ui-376f142b9de42241a20efa9c89644ff5425da174.zip
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>
-rw-r--r--tests/unit/dialog/core.js33
-rw-r--r--ui/widgets/dialog.js7
2 files changed, 39 insertions, 1 deletions
diff --git a/tests/unit/dialog/core.js b/tests/unit/dialog/core.js
index d307504b8..c6bdec778 100644
--- 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 4ba9d1117..756ad1cb1 100644
--- 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() {