diff --git a/js/src/modal.js b/js/src/modal.js
index 7338ffd376c5..f898d0c46536 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -265,6 +265,7 @@ class Modal {
this._element.style.display = 'block'
this._element.removeAttribute('aria-hidden')
this._element.setAttribute('aria-modal', true)
+ this._element.setAttribute('role', 'dialog')
if ($(this._dialog).hasClass(CLASS_NAME_SCROLLABLE) && modalBody) {
modalBody.scrollTop = 0
@@ -344,6 +345,7 @@ class Modal {
this._element.style.display = 'none'
this._element.setAttribute('aria-hidden', true)
this._element.removeAttribute('aria-modal')
+ this._element.removeAttribute('role')
this._isTransitioning = false
this._showBackdrop(() => {
$(document.body).removeClass(CLASS_NAME_OPEN)
diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js
index fefd84fceb9b..5434987d8bfe 100644
--- a/js/tests/unit/modal.js
+++ b/js/tests/unit/modal.js
@@ -297,6 +297,23 @@ $(function () {
.bootstrapModal('show')
})
+ QUnit.test('should add role="dialog" attribute when shown, remove it again when hidden', function (assert) {
+ assert.expect(3)
+ var done = assert.async()
+
+ $('')
+ .on('shown.bs.modal', function () {
+ assert.ok($('#modal-test').is('[role]'), 'role attribute added')
+ assert.strictEqual($('#modal-test').attr('role'), 'dialog', 'correct role="dialog" added')
+ $(this).bootstrapModal('hide')
+ })
+ .on('hidden.bs.modal', function () {
+ assert.notOk($('#modal-test').is('[role]'), 'role attribute removed')
+ done()
+ })
+ .bootstrapModal('show')
+ })
+
QUnit.test('should close reopened modal with [data-dismiss="modal"] click', function (assert) {
assert.expect(2)
var done = assert.async()
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index 872c8d402fae..4ec8214f5782 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -34,7 +34,7 @@
Modal Bootstrap Visual Test
-
+
-
+
-
+
-