mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-11 16:14:04 +02:00
Code Issues Releases Wiki Activity

Add aria-modal to modals (#27780)

Browse Source 
Dynamically set/remove `aria-modal="true"` when a modal is shown/hidden
This commit is contained in:
Patrick H. Lauke
2018-12-05 18:58:09 +00:00
committed by XhmikosR
parent 8fb6e84fa0
commit 6c00dd08bc
2 changed files with 19 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/src/modal.js
View File

@@ -243,6 +243,7 @@ class Modal {
this._element.style.display = 'block' this._element.style.display = 'block'
this._element.removeAttribute('aria-hidden') this._element.removeAttribute('aria-hidden')
this._element.setAttribute('aria-modal', true)
this._element.scrollTop = 0 this._element.scrollTop = 0
if (transition) { if (transition) {
@@ -314,6 +315,7 @@ class Modal {
_hideModal() { _hideModal() {
this._element.style.display = 'none' this._element.style.display = 'none'
this._element.setAttribute('aria-hidden', true) this._element.setAttribute('aria-hidden', true)
this._element.removeAttribute('aria-modal')
this._isTransitioning = false this._isTransitioning = false
this._showBackdrop(() => { this._showBackdrop(() => {
$(document.body).removeClass(ClassName.OPEN) $(document.body).removeClass(ClassName.OPEN)

17
js/tests/unit/modal.js
View File

@@ -280,6 +280,23 @@ $(function () {
.bootstrapModal('show') .bootstrapModal('show')
}) })
QUnit.test('should add aria-modal attribute when shown, remove it again when hidden', function (assert) {
assert.expect(3)
var done = assert.async()
$('<div id="modal-test"/>')
.on('shown.bs.modal', function () {
assert.ok($('#modal-test').is('[aria-modal]'), 'aria-modal attribute added')
assert.strictEqual($('#modal-test').attr('aria-modal'), 'true', 'correct aria-modal="true" added')
$(this).bootstrapModal('hide')
})
.on('hidden.bs.modal', function () {
assert.notOk($('#modal-test').is('[aria-modal]'), 'aria-modal attribute removed')
done()
})
.bootstrapModal('show')
})
QUnit.test('should close reopened modal with [data-dismiss="modal"] click', function (assert) { QUnit.test('should close reopened modal with [data-dismiss="modal"] click', function (assert) {
assert.expect(2) assert.expect(2)
var done = assert.async() var done = assert.async()