Merge branch 'master' into release-drafter

10 files changed, 112 insertions, 117 deletions

diff --git a/js/tests/integration/index.html b/js/tests/integration/index.html
index 354577bd7..0c8dd482e 100644
--- a/js/tests/integration/index.html
+++ b/js/tests/integration/index.html
@@ -25,21 +25,21 @@
           </ol>
           <div class="carousel-inner">
             <div class="carousel-item">
-              <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide" alt="First slide [800x400]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_167a6f826cb%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_167a6f826cb%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22217.7%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
+              <img class="d-block w-100" alt="First slide [800x400]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_167a6f826cb%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_167a6f826cb%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22217.7%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E">
               <div class="carousel-caption d-none d-md-block">
                 <h5>First slide label</h5>
                 <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
               </div>
             </div>
             <div class="carousel-item active">
-              <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=666&amp;fg=444&amp;text=Second slide" alt="Second slide [800x400]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_167a6f826ce%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_167a6f826ce%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22217.7%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
+              <img class="d-block w-100" alt="Second slide [800x400]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_167a6f826ce%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_167a6f826ce%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22217.7%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E">
               <div class="carousel-caption d-none d-md-block">
                 <h5>Second slide label</h5>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
               </div>
             </div>
             <div class="carousel-item">
-              <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=555&amp;fg=333&amp;text=Third slide" alt="Third slide [800x400]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_167a6f826cf%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_167a6f826cf%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22217.7%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
+              <img class="d-block w-100" alt="Third slide [800x400]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_167a6f826cf%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_167a6f826cf%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22217.7%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E">
               <div class="carousel-caption d-none d-md-block">
                 <h5>Third slide label</h5>
                 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
diff --git a/js/tests/unit/carousel.spec.js b/js/tests/unit/carousel.spec.js
index a163f9ae4..be32d19d9 100644
--- a/js/tests/unit/carousel.spec.js
+++ b/js/tests/unit/carousel.spec.js
@@ -5,12 +5,11 @@ import EventHandler from '../../src/dom/event-handler'
 import { getFixture, clearFixture, createEvent, jQueryMock } from '../helpers/fixture'
 
 describe('Carousel', () => {
-  const { Simulator, PointerEvent, MSPointerEvent } = window
-  const originWinPointerEvent = PointerEvent || MSPointerEvent
-  const supportPointerEvent = Boolean(PointerEvent || MSPointerEvent)
+  const { Simulator, PointerEvent } = window
+  const originWinPointerEvent = PointerEvent
+  const supportPointerEvent = Boolean(PointerEvent)
 
-  window.MSPointerEvent = null
-  const cssStyleCarousel = '.carousel.pointer-event { -ms-touch-action: none; touch-action: none; }'
+  const cssStyleCarousel = '.carousel.pointer-event { touch-action: none; }'
 
   const stylesCarousel = document.createElement('style')
   stylesCarousel.type = 'text/css'
diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index c5fbc3a27..52676844f 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -382,40 +382,40 @@ describe('Modal', () => {
       modal.show()
     })
 
-    it('should set modal body scroll top to 0 if .modal-dialog-scrollable', done => {
+    it('should set .modal\'s scroll top to 0', done => {
       fixtureEl.innerHTML = [
         '<div class="modal fade">',
-        '  <div class="modal-dialog modal-dialog-scrollable">',
-        '    <div class="modal-body"></div>',
+        '  <div class="modal-dialog">',
         '  </div>',
         '</div>'
       ].join('')
 
       const modalEl = fixtureEl.querySelector('.modal')
-      const modalBody = modalEl.querySelector('.modal-body')
       const modal = new Modal(modalEl)
 
       modalEl.addEventListener('shown.bs.modal', () => {
-        expect(modalBody.scrollTop).toEqual(0)
+        expect(modalEl.scrollTop).toEqual(0)
         done()
       })
 
       modal.show()
     })
 
-    it('should set .modal\'s scroll top to 0 if .modal-dialog-scrollable and modal body do not exists', done => {
+    it('should set modal body scroll top to 0 if modal body do not exists', done => {
       fixtureEl.innerHTML = [
         '<div class="modal fade">',
-        '  <div class="modal-dialog modal-dialog-scrollable">',
+        '  <div class="modal-dialog">',
+        '    <div class="modal-body"></div>',
         '  </div>',
         '</div>'
       ].join('')
 
       const modalEl = fixtureEl.querySelector('.modal')
+      const modalBody = modalEl.querySelector('.modal-body')
       const modal = new Modal(modalEl)
 
       modalEl.addEventListener('shown.bs.modal', () => {
-        expect(modalEl.scrollTop).toEqual(0)
+        expect(modalBody.scrollTop).toEqual(0)
         done()
       })
 
diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
index 3e45f4d03..70aa8eb33 100644
--- a/js/tests/unit/tab.spec.js
+++ b/js/tests/unit/tab.spec.js
@@ -129,8 +129,8 @@ describe('Tab', () => {
     it('should not fire shown when tab is already active', done => {
       fixtureEl.innerHTML = [
         '<ul class="nav nav-tabs" role="tablist">',
-        '  <li class="nav-item"><a href="#home" class="nav-link active" role="tab">Home</a></li>',
-        '  <li class="nav-item"><a href="#profile" class="nav-link" role="tab">Profile</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#home" class="nav-link active" role="tab">Home</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#profile" class="nav-link" role="tab">Profile</a></li>',
         '</ul>',
         '<div class="tab-content">',
         '  <div class="tab-pane active" id="home" role="tabpanel"></div>',
@@ -155,8 +155,8 @@ describe('Tab', () => {
     it('should not fire shown when tab is disabled', done => {
       fixtureEl.innerHTML = [
         '<ul class="nav nav-tabs" role="tablist">',
-        '  <li class="nav-item"><a href="#home" class="nav-link active" role="tab">Home</a></li>',
-        '  <li class="nav-item"><a href="#profile" class="nav-link disabled" role="tab">Profile</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#home" class="nav-link active" role="tab">Home</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#profile" class="nav-link disabled" role="tab">Profile</a></li>',
         '</ul>',
         '<div class="tab-content">',
         '  <div class="tab-pane active" id="home" role="tabpanel"></div>',
@@ -181,8 +181,8 @@ describe('Tab', () => {
     it('show and shown events should reference correct relatedTarget', done => {
       fixtureEl.innerHTML = [
         '<ul class="nav nav-tabs" role="tablist">',
-        '  <li class="nav-item"><a href="#home" class="nav-link active" role="tab">Home</a></li>',
-        '  <li class="nav-item"><a id="triggerProfile" href="#profile" class="nav-link" role="tab">Profile</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#home" class="nav-link active" role="tab">Home</a></li>',
+        '  <li class="nav-item" role="presentation"><a id="triggerProfile" href="#profile" class="nav-link" role="tab">Profile</a></li>',
         '</ul>',
         '<div class="tab-content">',
         '  <div class="tab-pane active" id="home" role="tabpanel"></div>',
@@ -275,17 +275,17 @@ describe('Tab', () => {
     it('should handle removed tabs', done => {
       fixtureEl.innerHTML = [
         '<ul class="nav nav-tabs" role="tablist">',
-        '  <li class="nav-item">',
+        '  <li class="nav-item" role="presentation">',
         '    <a class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">',
         '      <button class="close"><span aria-hidden="true">&times;</span></button>',
         '    </a>',
         '  </li>',
-        '  <li class="nav-item">',
+        '  <li class="nav-item" role="presentation">',
         '    <a id="secondNav" class="nav-link nav-tab" href="#buzz" role="tab" data-toggle="tab">',
         '      <button class="close"><span aria-hidden="true">&times;</span></button>',
         '    </a>',
         '  </li>',
-        '  <li class="nav-item">',
+        '  <li class="nav-item" role="presentation">',
         '    <a class="nav-link nav-tab" href="#references" role="tab" data-toggle="tab">',
         '      <button id="btnClose" class="close"><span aria-hidden="true">&times;</span></button>',
         '    </a>',
@@ -418,8 +418,8 @@ describe('Tab', () => {
     it('should create dynamically a tab', done => {
       fixtureEl.innerHTML = [
         '<ul class="nav nav-tabs" role="tablist">',
-        '  <li class="nav-item"><a href="#home" class="nav-link active" role="tab">Home</a></li>',
-        '  <li class="nav-item"><a id="triggerProfile" data-toggle="tab" href="#profile" class="nav-link" role="tab">Profile</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#home" class="nav-link active" role="tab">Home</a></li>',
+        '  <li class="nav-item" role="presentation"><a id="triggerProfile" data-toggle="tab" href="#profile" class="nav-link" role="tab">Profile</a></li>',
         '</ul>',
         '<div class="tab-content">',
         '  <div class="tab-pane active" id="home" role="tabpanel"></div>',
@@ -504,8 +504,8 @@ describe('Tab', () => {
     it('should not remove fade class if no active pane is present', done => {
       fixtureEl.innerHTML = [
         '<ul class="nav nav-tabs" role="tablist">',
-        '  <li class="nav-item"><a id="tab-home" href="#home" class="nav-link" data-toggle="tab" role="tab">Home</a></li>',
-        '  <li class="nav-item"><a id="tab-profile" href="#profile" class="nav-link" data-toggle="tab" role="tab">Profile</a></li>',
+        '  <li class="nav-item" role="presentation"><a id="tab-home" href="#home" class="nav-link" data-toggle="tab" role="tab">Home</a></li>',
+        '  <li class="nav-item" role="presentation"><a id="tab-profile" href="#profile" class="nav-link" data-toggle="tab" role="tab">Profile</a></li>',
         '</ul>',
         '<div class="tab-content">',
         '  <div class="tab-pane fade" id="home" role="tabpanel"></div>',
@@ -541,10 +541,10 @@ describe('Tab', () => {
     it('should not add show class to tab panes if there is no `.fade` class', done => {
       fixtureEl.innerHTML = [
         '<ul class="nav nav-tabs" role="tablist">',
-        '  <li class="nav-item">',
+        '  <li class="nav-item" role="presentation">',
         '    <a class="nav-link nav-tab" href="#home" role="tab" data-toggle="tab">Home</a>',
         '  </li>',
-        '  <li class="nav-item">',
+        '  <li class="nav-item" role="presentation">',
         '    <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>',
         '  </li>',
         '</ul>',
@@ -567,10 +567,10 @@ describe('Tab', () => {
     it('should add show class to tab panes if there is a `.fade` class', done => {
       fixtureEl.innerHTML = [
         '<ul class="nav nav-tabs" role="tablist">',
-        '  <li class="nav-item">',
+        '  <li class="nav-item" role="presentation">',
         '    <a class="nav-link nav-tab" href="#home" role="tab" data-toggle="tab">Home</a>',
         '  </li>',
-        '  <li class="nav-item">',
+        '  <li class="nav-item" role="presentation">',
         '    <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>',
         '  </li>',
         '</ul>',
diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js
index ed89315e0..5e3bb9326 100644
--- a/js/tests/unit/tooltip.spec.js
+++ b/js/tests/unit/tooltip.spec.js
@@ -913,7 +913,7 @@ describe('Tooltip', () => {
 
       tooltip.setElementContent(tooltip.getTipElement(), 'test')
 
-      expect(tooltip.getTipElement().innerText).toEqual('test')
+      expect(tooltip.getTipElement().textContent).toEqual('test')
     })
   })
 
diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html
index 1e1f7f967..0bc82923e 100644
--- a/js/tests/visual/collapse.html
+++ b/js/tests/visual/collapse.html
@@ -11,7 +11,7 @@
       <h1>Collapse <small>Bootstrap Visual Test</small></h1>
 
       <div id="accordion" role="tablist">
-        <div class="card">
+        <div class="card" role="presentation">
           <div class="card-header" role="tab" id="headingOne">
             <h5 class="mb-0">
               <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
@@ -26,7 +26,7 @@
             </div>
           </div>
         </div>
-        <div class="card">
+        <div class="card" role="presentation">
           <div class="card-header" role="tab" id="headingTwo">
             <h5 class="mb-0">
               <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
@@ -40,7 +40,7 @@
             </div>
           </div>
         </div>
-        <div class="card">
+        <div class="card" role="presentation">
           <div class="card-header" role="tab" id="headingThree">
             <h5 class="mb-0">
               <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
@@ -54,7 +54,7 @@
             </div>
           </div>
         </div>
-        <div class="card">
+        <div class="card" role="presentation">
           <div class="card-header" role="tab" id="headingFour">
             <h5 class="mb-0">
               <a class="collapsed" data-toggle="collapse" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
index 3205b3de6..0b54a125a 100644
--- a/js/tests/visual/dropdown.html
+++ b/js/tests/visual/dropdown.html
@@ -29,11 +29,11 @@
             </li>
             <li class="nav-item dropdown">
               <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
-              <div class="dropdown-menu" aria-labelledby="dropdown">
-                <a class="dropdown-item" href="#">Action</a>
-                <a class="dropdown-item" href="#">Another action</a>
-                <a class="dropdown-item" href="#">Something else here</a>
-              </div>
+              <ul class="dropdown-menu" aria-labelledby="dropdown">
+                <li><a class="dropdown-item" href="#">Action</a></li>
+                <li><a class="dropdown-item" href="#">Another action</a></li>
+                <li><a class="dropdown-item" href="#">Something else here</a></li>
+              </ul>
             </li>
           </ul>
         </div>
@@ -51,11 +51,11 @@
         </li>
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
-          <div class="dropdown-menu" aria-labelledby="dropdown2">
-            <a class="dropdown-item" href="#">Action</a>
-            <a class="dropdown-item" href="#">Another action</a>
-            <a class="dropdown-item" href="#">Something else here</a>
-          </div>
+          <ul class="dropdown-menu" aria-labelledby="dropdown2">
+            <li><a class="dropdown-item" href="#">Action</a></li>
+            <li><a class="dropdown-item" href="#">Another action</a></li>
+            <li><a class="dropdown-item" href="#">Something else here</a></li>
+          </ul>
         </li>
       </ul>
 
@@ -72,20 +72,20 @@
             <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
               <span class="sr-only">Dropup split</span>
             </button>
-            <div class="dropdown-menu">
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-            </div>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
           </div>
 
           <div class="btn-group dropup">
             <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropup</button>
-            <div class="dropdown-menu">
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-            </div>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
           </div>
 
           <div class="btn-group">
@@ -173,11 +173,11 @@
         <div class="col-sm-3 mt-4">
           <div class="btn-group dropdown">
             <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-offset="10,20">Dropdown offset</button>
-            <div class="dropdown-menu">
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-            </div>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
           </div>
         </div>
         <div class="col-sm-3 mt-4">
@@ -186,11 +186,11 @@
             <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
               <span class="sr-only">Dropdown split</span>
             </button>
-            <div class="dropdown-menu">
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-            </div>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
           </div>
         </div>
         <div class="col-sm-3 mt-4">
@@ -198,11 +198,11 @@
             <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" data-display="static" aria-expanded="false">
               Dropdown menu without Popper.js
             </button>
-            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-            </div>
+            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
           </div>
         </div>
       </div>
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index e08f591ef..0d8804678 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -55,7 +55,7 @@
               <p><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">This link</a> and <a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">that link</a> should have tooltips on hover.</p>
 
               <div id="accordion" role="tablist">
-                <div class="card">
+                <div class="card" role="presentation">
                   <div class="card-header" role="tab" id="headingOne">
                     <h5 class="mb-0">
                       <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
@@ -70,7 +70,7 @@
                     </div>
                   </div>
                 </div>
-                <div class="card">
+                <div class="card" role="presentation">
                   <div class="card-header" role="tab" id="headingTwo">
                     <h5 class="mb-0">
                       <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
@@ -84,7 +84,7 @@
                     </div>
                   </div>
                 </div>
-                <div class="card">
+                <div class="card" role="presentation">
                   <div class="card-header" role="tab" id="headingThree">
                     <h5 class="mb-0">
                       <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
index 30ce86e1f..03e62c1f4 100644
--- a/js/tests/visual/scrollspy.html
+++ b/js/tests/visual/scrollspy.html
@@ -25,11 +25,11 @@
           </li>
           <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
-            <div class="dropdown-menu" aria-labelledby="dropdown">
-              <a class="dropdown-item" href="#one">One</a>
-              <a class="dropdown-item" href="#two">Two</a>
-              <a class="dropdown-item" href="#three">Three</a>
-            </div>
+            <ul class="dropdown-menu" aria-labelledby="dropdown">
+              <li><a class="dropdown-item" href="#one">One</a></li>
+              <li><a class="dropdown-item" href="#two">Two</a></li>
+              <li><a class="dropdown-item" href="#three">Three</a></li>
+            </ul>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#final">Final</a>
diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html
index cc7fa6821..e5bc0448b 100644
--- a/js/tests/visual/tab.html
+++ b/js/tests/visual/tab.html
@@ -18,18 +18,17 @@
       <h4>Tabs without fade</h4>
 
       <ul class="nav nav-tabs" role="tablist">
-        <li class="nav-item">
+        <li class="nav-item" role="presentation">
           <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
         </li>
-        <li class="nav-item">
+        <li class="nav-item" role="presentation">
           <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
         </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
-          <div class="dropdown-menu" aria-labelledby="dropdown">
-            <a class="dropdown-item" data-toggle="tab" href="#fat" role="tab">@fat</a>
-            <a class="dropdown-item" data-toggle="tab" href="#mdo" role="tab">@mdo</a>
-          </div>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link" data-toggle="tab" href="#fat" role="tab">@fat</a>
+        </li>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link" data-toggle="tab" href="#mdo" role="tab">@mdo</a>
         </li>
       </ul>
 
@@ -55,18 +54,17 @@
       <h4>Tabs with fade</h4>
 
       <ul class="nav nav-tabs" role="tablist">
-        <li class="nav-item">
+        <li class="nav-item" role="presentation">
           <a class="nav-link active" data-toggle="tab" href="#home2" role="tab">Home</a>
         </li>
-        <li class="nav-item">
+        <li class="nav-item" role="presentation">
           <a class="nav-link" data-toggle="tab" href="#profile2" role="tab">Profile</a>
         </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
-          <div class="dropdown-menu" aria-labelledby="dropdown2">
-            <a class="dropdown-item" data-toggle="tab" href="#fat2" role="tab">@fat</a>
-            <a class="dropdown-item" data-toggle="tab" href="#mdo2" role="tab">@mdo</a>
-          </div>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link" data-toggle="tab" href="#fat2" role="tab">@fat</a>
+        </li>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link" data-toggle="tab" href="#mdo2" role="tab">@mdo</a>
         </li>
       </ul>
 
@@ -92,18 +90,17 @@
       <h4>Tabs without fade (no initially active pane)</h4>
 
       <ul class="nav nav-tabs" role="tablist">
-        <li class="nav-item">
+        <li class="nav-item" role="presentation">
           <a class="nav-link" data-toggle="tab" href="#home3" role="tab">Home</a>
         </li>
-        <li class="nav-item">
+        <li class="nav-item" role="presentation">
           <a class="nav-link" data-toggle="tab" href="#profile3" role="tab">Profile</a>
         </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="dropdown3" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
-          <div class="dropdown-menu" aria-labelledby="dropdown3">
-            <a class="dropdown-item" data-toggle="tab" href="#fat3" role="tab">@fat</a>
-            <a class="dropdown-item" data-toggle="tab" href="#mdo3" role="tab">@mdo</a>
-          </div>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link" data-toggle="tab" href="#fat3" role="tab">@fat</a>
+        </li>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link" data-toggle="tab" href="#mdo3" role="tab">@mdo</a>
         </li>
       </ul>
 
@@ -129,18 +126,17 @@
       <h4>Tabs with fade (no initially active pane)</h4>
 
       <ul class="nav nav-tabs" role="tablist">
-        <li class="nav-item">
+        <li class="nav-item" role="presentation">
           <a class="nav-link" data-toggle="tab" href="#home4" role="tab">Home</a>
         </li>
-        <li class="nav-item">
+        <li class="nav-item" role="presentation">
           <a class="nav-link" data-toggle="tab" href="#profile4" role="tab">Profile</a>
         </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="dropdown4" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
-          <div class="dropdown-menu" aria-labelledby="dropdown4">
-            <a class="dropdown-item" data-toggle="tab" href="#fat4" role="tab">@fat</a>
-            <a class="dropdown-item" data-toggle="tab" href="#mdo4" role="tab">@mdo</a>
-          </div>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link" data-toggle="tab" href="#fat4" role="tab">@fat</a>
+        </li>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link" data-toggle="tab" href="#mdo4" role="tab">@mdo</a>
         </li>
       </ul>
 
@@ -169,10 +165,10 @@
         <a class="nav-link nav-item" data-toggle="tab" href="#profile5">Profile</a>
         <div class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#" id="dropdown5" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
-          <div class="dropdown-menu" aria-labelledby="dropdown5">
-            <a class="dropdown-item" data-toggle="tab" href="#fat5">@fat</a>
-            <a class="dropdown-item" data-toggle="tab" href="#mdo5">@mdo</a>
-          </div>
+          <ul class="dropdown-menu" aria-labelledby="dropdown5">
+            <li><a class="dropdown-item" data-toggle="tab" href="#fat5">@fat</a></li>
+            <li><a class="dropdown-item" data-toggle="tab" href="#mdo5">@mdo</a></li>
+          </ul>
         </div>
         <a class="nav-link nav-item disabled" href="#">Disabled</a>
       </nav>