diff options
author | Patrick H. Lauke <redux@splintered.co.uk> | 2022-11-13 02:15:34 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-11-13 02:15:34 +0300 |
commit | 766a43cd13e2a9bd45d8f45dc7daa821c77fccef (patch) | |
tree | c422025a8a6d94d600534dcc1fbc92898fcd7f46 | |
parent | 339b769477f875a37656bf0a32edba6ecf78d9fd (diff) | |
parent | 0446e22b5aa556701f32015e9678f4ae822d1386 (diff) |
Merge branch 'main' into patrickhlauke-issue36736
-rw-r--r-- | .github/workflows/codeql.yml | 7 | ||||
-rw-r--r-- | js/tests/unit/collapse.spec.js | 6 | ||||
-rw-r--r-- | site/content/docs/5.2/components/collapse.md | 10 | ||||
-rw-r--r-- | site/content/docs/5.2/components/dropdowns.md | 10 | ||||
-rw-r--r-- | site/content/docs/5.2/components/modal.md | 6 |
5 files changed, 22 insertions, 17 deletions
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index 6144dd24df..3e2f6f34de 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -7,7 +7,6 @@ on: - v4-dev - "!dependabot/**" pull_request: - # The branches below must be a subset of the branches above branches: - main - v4-dev @@ -35,6 +34,12 @@ jobs: uses: github/codeql-action/init@v2 with: languages: "javascript" + queries: +security-and-quality + + - name: Autobuild + uses: github/codeql-action/autobuild@v2 - name: Perform CodeQL Analysis uses: github/codeql-action/analyze@v2 + with: + category: "/language:javascript" diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js index d5af724fe2..fa50ad361c 100644 --- a/js/tests/unit/collapse.spec.js +++ b/js/tests/unit/collapse.spec.js @@ -278,14 +278,14 @@ describe('Collapse', () => { fixtureEl.innerHTML = [ '<div id="parentGroup" class="accordion">', ' <div id="parentHeader" class="accordion-header">', - ' <button data-bs-target="#parentContent" data-bs-toggle="collapse" role="button" class="accordion-toggle">Parent</button>', + ' <button data-bs-target="#parentContent" data-bs-toggle="collapse" class="accordion-toggle">Parent</button>', ' </div>', ' <div id="parentContent" class="accordion-collapse collapse" aria-labelledby="parentHeader" data-bs-parent="#parentGroup">', ' <div class="accordion-body">', ' <div id="childGroup" class="accordion">', ' <div class="accordion-item">', ' <div id="childHeader1" class="accordion-header">', - ' <button data-bs-target="#childContent1" data-bs-toggle="collapse" role="button" class="accordion-toggle">Child 1</button>', + ' <button data-bs-target="#childContent1" data-bs-toggle="collapse" class="accordion-toggle">Child 1</button>', ' </div>', ' <div id="childContent1" class="accordion-collapse collapse" aria-labelledby="childHeader1" data-bs-parent="#childGroup">', ' <div>content</div>', @@ -293,7 +293,7 @@ describe('Collapse', () => { ' </div>', ' <div class="accordion-item">', ' <div id="childHeader2" class="accordion-header">', - ' <button data-bs-target="#childContent2" data-bs-toggle="collapse" role="button" class="accordion-toggle">Child 2</button>', + ' <button data-bs-target="#childContent2" data-bs-toggle="collapse" class="accordion-toggle">Child 2</button>', ' </div>', ' <div id="childContent2" class="accordion-collapse collapse" aria-labelledby="childHeader2" data-bs-parent="#childGroup">', ' <div>content</div>', diff --git a/site/content/docs/5.2/components/collapse.md b/site/content/docs/5.2/components/collapse.md index e53fb5458f..95abc536c4 100644 --- a/site/content/docs/5.2/components/collapse.md +++ b/site/content/docs/5.2/components/collapse.md @@ -22,7 +22,7 @@ Click the buttons below to show and hide another element via class changes: - `.collapsing` is applied during transitions - `.collapse.show` shows content -Generally, we recommend using a button with the `data-bs-target` attribute. While not recommended from a semantic point of view, you can also use a link with the `href` attribute (and a `role="button"`). In both cases, the `data-bs-toggle="collapse"` is required. +Generally, we recommend using a `<button>` with the `data-bs-target` attribute. While not recommended from a semantic point of view, you can also use an `<a>` link with the `href` attribute (and a `role="button"`). In both cases, the `data-bs-toggle="collapse"` is required. {{< example >}} <p> @@ -42,7 +42,7 @@ Generally, we recommend using a button with the `data-bs-target` attribute. Whil ## Horizontal -The collapse plugin also supports horizontal collapsing. Add the `.collapse-horizontal` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our [width utilities]({{< docsref "/utilities/sizing" >}}). +The collapse plugin supports horizontal collapsing. Add the `.collapse-horizontal` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our [width utilities]({{< docsref "/utilities/sizing" >}}). {{< callout info >}} Please note that while the example below has a `min-height` set to avoid excessive repaints in our docs, this is not explicitly required. **Only the `width` on the child element is required.** @@ -63,10 +63,10 @@ Please note that while the example below has a `min-height` set to avoid excessi </div> {{< /example >}} -## Multiple targets +## Multiple toggles and targets -A `<button>` or `<a>` can show and hide multiple elements by referencing them with a selector in its `href` or `data-bs-target` attribute. -Multiple `<button>` or `<a>` can show and hide an element if they each reference it with their `href` or `data-bs-target` attribute +A `<button>` or `<a>` element can show and hide multiple elements by referencing them with a selector in its `data-bs-target` or `href` attribute. +Conversely, multiple `<button>` or `<a>` elements can show and hide the same element if they each reference it with their `data-bs-target` or `href` attribute. {{< example >}} <p> diff --git a/site/content/docs/5.2/components/dropdowns.md b/site/content/docs/5.2/components/dropdowns.md index 70087aa8de..cd243a792f 100644 --- a/site/content/docs/5.2/components/dropdowns.md +++ b/site/content/docs/5.2/components/dropdowns.md @@ -22,11 +22,11 @@ However, Bootstrap does add built-in support for most standard keyboard menu int ## Examples -Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Dropdowns can be triggered from `<a>` or `<button>` elements to better fit your potential needs. The examples shown here use semantic `<ul>` elements where appropriate, but custom markup is supported. +Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Ideally, you should use a `<button>` element as the dropdown trigger, but the plugin will work with `<a>` elements as well. The examples shown here use semantic `<ul>` elements where appropriate, but custom markup is supported. ### Single button -Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here's how you can put them to work with either `<button>` elements: +Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here's how you can put them to work with `<button>` elements: {{< example >}} <div class="dropdown"> @@ -41,7 +41,7 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes. </div> {{< /example >}} -And with `<a>` elements: +While `<button>` is the recommended control for a dropdown toggle, there might be situations where you have to use an `<a>` element. If you do, we recommend adding a `role="button"` attribute to appropriately convey control's purpose to assistive technologies such as screen readers. {{< example >}} <div class="dropdown"> @@ -378,9 +378,9 @@ And putting it to use in a navbar: <div class="collapse navbar-collapse" id="navbarNavDarkDropdown"> <ul class="navbar-nav"> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown - </a> + </button> <ul class="dropdown-menu dropdown-menu-dark"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> diff --git a/site/content/docs/5.2/components/modal.md b/site/content/docs/5.2/components/modal.md index 371cbf15d1..4251dc294e 100644 --- a/site/content/docs/5.2/components/modal.md +++ b/site/content/docs/5.2/components/modal.md @@ -329,7 +329,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. </div> <div class="modal-body"> <h2 class="fs-5">Popover in a modal</h2> - <p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute." data-bs-container="#exampleModalPopovers">button</a> triggers a popover on click.</p> + <p>This <button class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute." data-bs-container="#exampleModalPopovers">button</button> triggers a popover on click.</p> <hr> <h2 class="fs-5">Tooltips in a modal</h2> <p><a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">that link</a> have tooltips on hover.</p> @@ -351,7 +351,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ```html <div class="modal-body"> <h2 class="fs-5">Popover in a modal</h2> - <p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p> + <p>This <button class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</button> triggers a popover on click.</p> <hr> <h2 class="fs-5">Tooltips in a modal</h2> <p><a href="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p> @@ -537,7 +537,7 @@ Toggle between multiple modals with some clever placement of the `data-bs-target </div> </div> </div> -<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a> +<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Open first modal</button> {{< /example >}} ### Change animation |