diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
index f74d389df22863e12a7ed88c9909613e2f55024e..324c4a09ba0a0c0644d0872bfaf445a479014809 100644
--- a/js/tests/unit/tab.spec.js
+++ b/js/tests/unit/tab.spec.js
@@ -283,17 +283,17 @@ describe('Tab', () => {
'<ul class="nav nav-tabs" role="tablist">',
' <li class="nav-item" role="presentation">',
' <a class="nav-link nav-tab" href="#profile" role="tab" data-bs-toggle="tab">',
- ' <button class="close"><span aria-hidden="true">×</span></button>',
+ ' <button class="btn-close" aria-label="Close"></button>',
' </a>',
' </li>',
' <li class="nav-item" role="presentation">',
' <a id="secondNav" class="nav-link nav-tab" href="#buzz" role="tab" data-bs-toggle="tab">',
- ' <button class="close"><span aria-hidden="true">×</span></button>',
+ ' <button class="btn-close" aria-label="Close"></button>',
' </a>',
' </li>',
' <li class="nav-item" role="presentation">',
' <a class="nav-link nav-tab" href="#references" role="tab" data-bs-toggle="tab">',
- ' <button id="btnClose" class="close"><span aria-hidden="true">×</span></button>',
+ ' <button id="btnClose" class="btn-close" aria-label="Close"></button>',
' </a>',
' </li>',
'</ul>',
diff --git a/js/tests/unit/toast.spec.js b/js/tests/unit/toast.spec.js
index b743549625ff4b8577dd1439d614febc2ccac587..c4cb69a7f148dd6e856193eac5f1e7ca9fe360c6 100644
--- a/js/tests/unit/toast.spec.js
+++ b/js/tests/unit/toast.spec.js
@@ -46,9 +46,7 @@ describe('Toast', () => {
it('should close toast when close element with data-bs-dismiss attribute is set', done => {
fixtureEl.innerHTML = [
'<div class="toast" data-bs-delay="1" data-bs-autohide="false" data-bs-animation="false">',
- ' <button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast">',
- ' close',
- ' </button>',
+ ' <button type="button" class="ml-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>',
'</div>'
].join('')
@@ -58,7 +56,7 @@ describe('Toast', () => {
toastEl.addEventListener('shown.bs.toast', () => {
expect(toastEl.classList.contains('show')).toEqual(true)
- const button = toastEl.querySelector('.close')
+ const button = toastEl.querySelector('.btn-close')
button.click()
})
@@ -80,9 +78,7 @@ describe('Toast', () => {
fixtureEl.innerHTML = [
'<div class="toast" data-bs-autohide="false" data-bs-animation="false">',
- ' <button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast">',
- ' close',
- ' </button>',
+ ' <button type="button" class="ml-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>',
'</div>'
].join('')
diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html
index f51fe80447fc7f0a018473ffe6ccc19f93534062..07f9b972df053304c0183d09e9be15b63510a13b 100644
--- a/js/tests/visual/alert.html
+++ b/js/tests/visual/alert.html
@@ -11,16 +11,12 @@
<h1>Alert <small>Bootstrap Visual Test</small></h1>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
- <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
- <span aria-hidden="true">×</span>
- </button>
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
- <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
- <span aria-hidden="true">×</span>
- </button>
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<p>
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</p>
@@ -31,9 +27,7 @@
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
- <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
- <span aria-hidden="true">×</span>
- </button>
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<p>
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
</p>
@@ -44,9 +38,7 @@
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert" style="transition-duration: 5s;">
- <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
- <span aria-hidden="true">×</span>
- </button>
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
This alert will take 5 seconds to fade out.
</div>
</div>
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index 79d815d3ca4c49e97515810e34a0d9ab733cf823..b39c4fd722812dc4962a47cc78101a79b0837936 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -39,9 +39,7 @@
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
- <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">×</span>
- </button>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
@@ -126,9 +124,7 @@
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="firefoxModalLabel">Firefox Bug Test</h4>
- <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">×</span>
- </button>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<ol>
@@ -152,9 +148,7 @@
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="slowModalLabel">Lorem slowly</h4>
- <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">×</span>
- </button>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.</p>
@@ -194,7 +188,7 @@
Tall body content to force the page to have a scrollbar.
</div>
- <button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="modal" data-bs-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-bs-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-bs-target attribute of it's show-button</div></div></div></div>">
+ <button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="modal" data-bs-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="btn-close" data-bs-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-bs-target attribute of it's show-button</div></div></div></div>">
Modal with an XSS inside the data-bs-target
</button>
diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html
index bee3f6729ecf04a46843a8873ae925fb25fe99ee..c26278d94818dfe1310bf6742673a55e92759d1d 100644
--- a/js/tests/visual/toast.html
+++ b/js/tests/visual/toast.html
@@ -42,9 +42,7 @@
<span class="d-block bg-primary rounded mr-2" style="width: 20px; height: 20px;"></span>
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
- <button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast" aria-label="Close">
- <span aria-hidden="true">×</span>
- </button>
+ <button type="button" class="ml-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically