Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix .close instances #32152

Merged
merged 1 commit into from Nov 14, 2020
Merged

Fix .close instances #32152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions js/tests/unit/tab.spec.js
View file
Open in desktop
Expand Up @@ -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">&times;</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">&times;</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">&times;</span></button>',
' <button id="btnClose" class="btn-close" aria-label="Close"></button>',
' </a>',
' </li>',
'</ul>',
Expand Down
10 changes: 3 additions & 7 deletions js/tests/unit/toast.spec.js
View file
Open in desktop
Expand Up @@ -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('')

Expand All @@ -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()
})
Expand All @@ -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('')

Expand Down
16 changes: 4 additions & 12 deletions js/tests/visual/alert.html
View file
Open in desktop
Expand Up @@ -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">&times;</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">&times;</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>
Expand All @@ -31,9 +27,7 @@ <h1>Alert <small>Bootstrap Visual Test</small></h1>
</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">&times;</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>
Expand All @@ -44,9 +38,7 @@ <h1>Alert <small>Bootstrap Visual Test</small></h1>
</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">&times;</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>
Expand Down
14 changes: 4 additions & 10 deletions js/tests/visual/modal.html
View file
Open in desktop
Expand Up @@ -39,9 +39,7 @@ <h1>Modal <small>Bootstrap Visual Test</small></h1>
<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">&times;</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>
Expand Down Expand Up @@ -126,9 +124,7 @@ <h4>Overflowing text to show scroll behavior</h4>
<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">&times;</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<ol>
Expand All @@ -152,9 +148,7 @@ <h4 class="modal-title" id="firefoxModalLabel">Firefox Bug Test</h4>
<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">&times;</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>
Expand Down Expand Up @@ -194,7 +188,7 @@ <h4 class="modal-title" id="slowModalLabel">Lorem slowly</h4>
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="&#x3C;div class=&#x22;modal fade the-bad&#x22; tabindex=&#x22;-1&#x22;&#x3E;&#x3C;div class=&#x22;modal-dialog&#x22;&#x3E;&#x3C;div class=&#x22;modal-content&#x22;&#x3E;&#x3C;div class=&#x22;modal-header&#x22;&#x3E;&#x3C;button type=&#x22;button&#x22; class=&#x22;close&#x22; data-bs-dismiss=&#x22;modal&#x22; aria-label=&#x22;Close&#x22;&#x3E;&#x3C;span aria-hidden=&#x22;true&#x22;&#x3E;&#x26;times;&#x3C;/span&#x3E;&#x3C;/button&#x3E;&#x3C;h4 class=&#x22;modal-title&#x22;&#x3E;The Bad Modal&#x3C;/h4&#x3E;&#x3C;/div&#x3E;&#x3C;div class=&#x22;modal-body&#x22;&#x3E;This modal&#x27;s HTTML source code is declared inline, inside the data-bs-target attribute of it&#x27;s show-button&#x3C;/div&#x3E;&#x3C;/div&#x3E;&#x3C;/div&#x3E;&#x3C;/div&#x3E;">
<button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="modal" data-bs-target="&#x3C;div class=&#x22;modal fade the-bad&#x22; tabindex=&#x22;-1&#x22;&#x3E;&#x3C;div class=&#x22;modal-dialog&#x22;&#x3E;&#x3C;div class=&#x22;modal-content&#x22;&#x3E;&#x3C;div class=&#x22;modal-header&#x22;&#x3E;&#x3C;button type=&#x22;button&#x22; class=&#x22;btn-close&#x22; data-bs-dismiss=&#x22;modal&#x22; aria-label=&#x22;Close&#x22;&#x3E;&#x3C;span aria-hidden=&#x22;true&#x22;&#x3E;&#x26;times;&#x3C;/span&#x3E;&#x3C;/button&#x3E;&#x3C;h4 class=&#x22;modal-title&#x22;&#x3E;The Bad Modal&#x3C;/h4&#x3E;&#x3C;/div&#x3E;&#x3C;div class=&#x22;modal-body&#x22;&#x3E;This modal&#x27;s HTTML source code is declared inline, inside the data-bs-target attribute of it&#x27;s show-button&#x3C;/div&#x3E;&#x3C;/div&#x3E;&#x3C;/div&#x3E;&#x3C;/div&#x3E;">
Modal with an XSS inside the data-bs-target
</button>

Expand Down
4 changes: 1 addition & 3 deletions js/tests/visual/toast.html
View file
Open in desktop
Expand Up @@ -42,9 +42,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
<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">&times;</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
Expand Down