diff options
author | Rohit Sharma <rohit2sharma95@gmail.com> | 2020-06-04 10:35:09 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-06-04 10:35:09 +0300 |
commit | 5faf41eb4837491fa8193910c5816efadb4dbc5a (patch) | |
tree | 6fd1c3508ef5bc75401df650f363e51a526485e1 /js | |
parent | 358d637d1c664950fea501f928cc9f0247f2b8f0 (diff) |
Add role="dialog" in modals via JavaScript (#30936)
Diffstat (limited to 'js')
-rw-r--r-- | js/src/modal.js | 2 | ||||
-rw-r--r-- | js/tests/unit/modal.spec.js | 6 | ||||
-rw-r--r-- | js/tests/visual/modal.html | 8 |
3 files changed, 12 insertions, 4 deletions
diff --git a/js/src/modal.js b/js/src/modal.js index 749f47cef7..f5b5721f47 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -248,6 +248,7 @@ class Modal { this._element.style.display = 'block' this._element.removeAttribute('aria-hidden') this._element.setAttribute('aria-modal', true) + this._element.setAttribute('role', 'dialog') this._element.scrollTop = 0 if (modalBody) { @@ -323,6 +324,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.classList.remove(CLASS_NAME_OPEN) diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js index a72e93ca85..afb8f2c2d4 100644 --- a/js/tests/unit/modal.spec.js +++ b/js/tests/unit/modal.spec.js @@ -231,6 +231,7 @@ describe('Modal', () => { modalEl.addEventListener('shown.bs.modal', () => { expect(modalEl.getAttribute('aria-modal')).toEqual('true') + expect(modalEl.getAttribute('role')).toEqual('dialog') expect(modalEl.getAttribute('aria-hidden')).toEqual(null) expect(modalEl.style.display).toEqual('block') expect(document.querySelector('.modal-backdrop')).toBeDefined() @@ -254,6 +255,7 @@ describe('Modal', () => { modalEl.addEventListener('shown.bs.modal', () => { expect(modalEl.getAttribute('aria-modal')).toEqual('true') + expect(modalEl.getAttribute('role')).toEqual('dialog') expect(modalEl.getAttribute('aria-hidden')).toEqual(null) expect(modalEl.style.display).toEqual('block') expect(document.querySelector('.modal-backdrop')).toBeNull() @@ -731,6 +733,7 @@ describe('Modal', () => { modalEl.addEventListener('hidden.bs.modal', () => { expect(modalEl.getAttribute('aria-modal')).toEqual(null) + expect(modalEl.getAttribute('role')).toEqual(null) expect(modalEl.getAttribute('aria-hidden')).toEqual('true') expect(modalEl.style.display).toEqual('none') expect(document.querySelector('.modal-backdrop')).toBeNull() @@ -752,6 +755,7 @@ describe('Modal', () => { modalEl.addEventListener('hidden.bs.modal', () => { expect(modalEl.getAttribute('aria-modal')).toEqual(null) + expect(modalEl.getAttribute('role')).toEqual(null) expect(modalEl.getAttribute('aria-hidden')).toEqual('true') expect(modalEl.style.display).toEqual('none') expect(document.querySelector('.modal-backdrop')).toBeNull() @@ -859,6 +863,7 @@ describe('Modal', () => { modalEl.addEventListener('shown.bs.modal', () => { expect(modalEl.getAttribute('aria-modal')).toEqual('true') + expect(modalEl.getAttribute('role')).toEqual('dialog') expect(modalEl.getAttribute('aria-hidden')).toEqual(null) expect(modalEl.style.display).toEqual('block') expect(document.querySelector('.modal-backdrop')).toBeDefined() @@ -901,6 +906,7 @@ describe('Modal', () => { modalEl.addEventListener('shown.bs.modal', () => { expect(modalEl.getAttribute('aria-modal')).toEqual('true') + expect(modalEl.getAttribute('role')).toEqual('dialog') expect(modalEl.getAttribute('aria-hidden')).toEqual(null) expect(modalEl.style.display).toEqual('block') expect(document.querySelector('.modal-backdrop')).toBeDefined() diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html index 1efe12246d..fa043af00e 100644 --- a/js/tests/visual/modal.html +++ b/js/tests/visual/modal.html @@ -34,7 +34,7 @@ <div class="container mt-3"> <h1>Modal <small>Bootstrap Visual Test</small></h1> - <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> + <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> @@ -121,7 +121,7 @@ </div> </div> - <div class="modal fade" id="firefoxModal" tabindex="-1" role="dialog" aria-labelledby="firefoxModalLabel" aria-hidden="true"> + <div class="modal fade" id="firefoxModal" tabindex="-1" aria-labelledby="firefoxModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> @@ -147,7 +147,7 @@ </div> </div> - <div class="modal fade" id="slowModal" tabindex="-1" role="dialog" aria-labelledby="slowModalLabel" aria-hidden="true" style="transition-duration: 5s;"> + <div class="modal fade" id="slowModal" tabindex="-1" aria-labelledby="slowModalLabel" aria-hidden="true" style="transition-duration: 5s;"> <div class="modal-dialog" style="transition-duration: inherit;"> <div class="modal-content"> <div class="modal-header"> @@ -194,7 +194,7 @@ Tall body content to force the page to have a scrollbar. </div> - <button type="button" class="btn btn-secondary btn-lg" data-toggle="modal" data-target="<div class="modal fade the-bad" tabindex="-1" role="dialog"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">The Bad Modal</h4></div><div class="modal-body">This modal's HTTML source code is declared inline, inside the data-target attribute of it's show-button</div></div></div></div>"> + <button type="button" class="btn btn-secondary btn-lg" data-toggle="modal" data-target="<div class="modal fade the-bad" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">The Bad Modal</h4></div><div class="modal-body">This modal's HTTML source code is declared inline, inside the data-target attribute of it's show-button</div></div></div></div>"> Modal with an XSS inside the data-target </button> |