From 548342184e2173d6f39aba2462196ff8b397db8f Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 6 Aug 2023 09:58:36 +0200 Subject: Adding upstream version 5.3.1+dfsg. Signed-off-by: Daniel Baumann --- .bundlewatch.config.json | 4 +- .github/CONTRIBUTING.md | 7 + README.md | 8 +- build/zip-examples.js | 10 +- hugo.yml | 28 +- js/src/base-component.js | 2 +- js/src/tab.js | 16 +- js/tests/unit/tab.spec.js | 112 + js/tests/visual/tab.html | 4 +- package-lock.json | 6522 +++++++++++--------- package.js | 2 +- package.json | 44 +- scss/_nav.scss | 16 +- scss/_reboot.scss | 8 +- scss/_variables-dark.scss | 2 +- scss/_variables.scss | 10 +- scss/forms/_floating-labels.scss | 3 +- scss/forms/_form-check.scss | 2 +- scss/forms/_form-control.scss | 2 +- scss/forms/_form-range.scss | 6 +- scss/forms/_form-select.scss | 2 +- scss/helpers/_color-bg.scss | 3 +- scss/helpers/_vr.scss | 2 +- scss/mixins/_banner.scss | 2 +- site/assets/js/code-examples.js | 13 +- site/assets/scss/_component-examples.scss | 7 +- site/content/docs/5.3/components/alerts.md | 2 +- site/content/docs/5.3/components/button-group.md | 10 +- site/content/docs/5.3/components/buttons.md | 36 +- site/content/docs/5.3/components/card.md | 4 +- site/content/docs/5.3/components/collapse.md | 4 +- site/content/docs/5.3/components/dropdowns.md | 2 +- site/content/docs/5.3/components/list-group.md | 2 +- site/content/docs/5.3/components/navbar.md | 18 +- site/content/docs/5.3/components/navs-tabs.md | 38 +- site/content/docs/5.3/components/placeholders.md | 6 +- site/content/docs/5.3/components/spinners.md | 20 +- site/content/docs/5.3/components/tooltips.md | 8 +- site/content/docs/5.3/customize/sass.md | 57 +- site/content/docs/5.3/examples/badges/index.html | 2 +- site/content/docs/5.3/examples/blog-rtl/index.html | 4 +- site/content/docs/5.3/examples/blog/index.html | 4 +- .../docs/5.3/examples/breadcrumbs/index.html | 2 +- site/content/docs/5.3/examples/buttons/index.html | 10 +- .../docs/5.3/examples/carousel-rtl/index.html | 4 +- site/content/docs/5.3/examples/carousel/index.html | 4 +- .../docs/5.3/examples/cheatsheet-rtl/index.html | 8 +- .../docs/5.3/examples/cheatsheet/cheatsheet.css | 15 +- .../5.3/examples/cheatsheet/cheatsheet.rtl.css | 15 +- .../docs/5.3/examples/cheatsheet/index.html | 8 +- .../docs/5.3/examples/dashboard-rtl/index.html | 4 +- .../content/docs/5.3/examples/dashboard/index.html | 4 +- .../content/docs/5.3/examples/dropdowns/index.html | 2 +- site/content/docs/5.3/examples/features/index.html | 2 +- site/content/docs/5.3/examples/footers/index.html | 2 +- site/content/docs/5.3/examples/headers/index.html | 2 +- .../docs/5.3/examples/jumbotrons/index.html | 2 +- .../docs/5.3/examples/list-groups/index.html | 2 +- site/content/docs/5.3/examples/modals/index.html | 2 +- .../docs/5.3/examples/navbar-bottom/index.html | 2 +- .../docs/5.3/examples/navbar-fixed/index.html | 2 +- .../docs/5.3/examples/navbar-static/index.html | 2 +- site/content/docs/5.3/examples/navbars/index.html | 24 +- site/content/docs/5.3/examples/pricing/index.html | 2 +- site/content/docs/5.3/examples/product/index.html | 2 +- site/content/docs/5.3/examples/sidebars/index.html | 10 +- .../docs/5.3/examples/starter-template/index.html | 2 +- .../5.3/examples/sticky-footer-navbar/index.html | 2 +- site/content/docs/5.3/forms/checks-radios.md | 29 +- site/content/docs/5.3/forms/floating-labels.md | 2 +- site/content/docs/5.3/forms/form-control.md | 6 +- site/content/docs/5.3/forms/select.md | 8 +- .../content/docs/5.3/getting-started/javascript.md | 4 +- site/content/docs/5.3/getting-started/webpack.md | 2 +- site/content/docs/5.3/helpers/stacks.md | 4 +- site/content/docs/5.3/helpers/vertical-rule.md | 8 + site/content/docs/5.3/migration.md | 4 +- site/content/docs/5.3/utilities/float.md | 11 +- site/content/docs/5.3/utilities/opacity.md | 2 + site/content/docs/5.3/utilities/text.md | 11 +- site/data/docs-versions.yml | 6 +- site/layouts/_default/examples.html | 2 +- .../warning-color-assistive-technologies.md | 2 +- site/layouts/partials/docs-navbar.html | 6 +- site/layouts/partials/footer.html | 22 +- site/layouts/partials/header.html | 2 - site/layouts/partials/home/masthead.html | 2 - site/layouts/partials/icons.html | 2 +- site/layouts/partials/scripts.html | 3 +- site/layouts/partials/stylesheet.html | 2 - site/layouts/shortcodes/js-docs.html | 8 +- site/layouts/shortcodes/scss-docs.html | 8 +- 92 files changed, 3976 insertions(+), 3370 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index d7e1c80..bb0a5a8 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -38,7 +38,7 @@ }, { "path": "./dist/js/bootstrap.bundle.min.js", - "maxSize": "23.0 kB" + "maxSize": "23.25 kB" }, { "path": "./dist/js/bootstrap.esm.js", @@ -54,7 +54,7 @@ }, { "path": "./dist/js/bootstrap.min.js", - "maxSize": "16.0 kB" + "maxSize": "16.25 kB" } ], "ci": { diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 4463445..d18210b 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -31,6 +31,13 @@ restrictions: Instead, please email any questions or feedback regarding those themes to `themes AT getbootstrap DOT com`. +## Issues assignment + +The core team will be looking at the open issues, analyze them, and provide guidance on how to proceed. **Issues won't be assigned to anyone outside the core team.** However, contributors are welcome to participate in the discussion and provide their input on how to best solve the issue, and even submit a PR if they want to. Please wait that the issue is ready to be worked on before submitting a PR, we don't want to waste your time. + +Please keep in mind that the core team is small, has limited resources and that we are not always able to respond immediately. We will try to provide feedback as soon as possible, but please be patient. If you don't get a response immediately, it doesn't mean that we are ignoring you or that we don't care about your issue or PR. We will get back to you as soon as we can. + + ## Issues and labels Our bug tracker utilizes several labels to help organize and identify issues. Here's what they represent and how we use them: diff --git a/README.md b/README.md index 529b0d5..c08d4cb 100644 --- a/README.md +++ b/README.md @@ -46,11 +46,11 @@ Our default branch is for development of our Bootstrap 5 release. Head to the [` Several quick start options are available: -- [Download the latest release](https://github.com/twbs/bootstrap/archive/v5.3.0.zip) +- [Download the latest release](https://github.com/twbs/bootstrap/archive/v5.3.1.zip) - Clone the repo: `git clone https://github.com/twbs/bootstrap.git` -- Install with [npm](https://www.npmjs.com/): `npm install bootstrap@v5.3.0` -- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap@v5.3.0` -- Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap:5.3.0` +- Install with [npm](https://www.npmjs.com/): `npm install bootstrap@v5.3.1` +- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap@v5.3.1` +- Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap:5.3.1` - Install with [NuGet](https://www.nuget.org/): CSS: `Install-Package bootstrap` Sass: `Install-Package bootstrap.sass` Read the [Getting started page](https://getbootstrap.com/docs/5.3/getting-started/introduction/) for information on the framework contents, templates, examples, and more. diff --git a/build/zip-examples.js b/build/zip-examples.js index 613376a..7378c33 100644 --- a/build/zip-examples.js +++ b/build/zip-examples.js @@ -34,6 +34,9 @@ const imgFiles = [ 'bootstrap-logo.svg', 'bootstrap-logo-white.svg' ] +const staticJsFiles = [ + 'color-modes.js' +] sh.config.fatal = true @@ -52,7 +55,8 @@ sh.mkdir('-p', [ distFolder, `${distFolder}/assets/brand/`, `${distFolder}/assets/dist/css/`, - `${distFolder}/assets/dist/js/` + `${distFolder}/assets/dist/js/`, + `${distFolder}/assets/js/` ]) sh.cp('-Rf', `${docsDir}/examples/*`, distFolder) @@ -69,6 +73,10 @@ for (const file of imgFiles) { sh.cp('-f', `${docsDir}/assets/brand/${file}`, `${distFolder}/assets/brand/`) } +for (const file of staticJsFiles) { + sh.cp('-f', `${docsDir}/assets/js/${file}`, `${distFolder}/assets/js/`) +} + sh.rm(`${distFolder}/index.html`) // get all examples' HTML files diff --git a/hugo.yml b/hugo.yml index 47da082..4d71409 100644 --- a/hugo.yml +++ b/hugo.yml @@ -8,6 +8,8 @@ security: getenv: - ^HUGO_ - NETLIFY + gotemplates: + allowActionJSTmpl: true markup: goldmark: @@ -52,8 +54,8 @@ params: description: "Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins." authors: "Mark Otto, Jacob Thornton, and Bootstrap contributors" - current_version: "5.3.0" - current_ruby_version: "5.3.0" + current_version: "5.3.1" + current_ruby_version: "5.3.1" docs_version: "5.3" rfs_version: "v10.0.0" github_org: "https://github.com/twbs" @@ -66,20 +68,20 @@ params: swag: "https://cottonbureau.com/people/bootstrap" download: - source: "https://github.com/twbs/bootstrap/archive/v5.3.0.zip" - dist: "https://github.com/twbs/bootstrap/releases/download/v5.3.0/bootstrap-5.3.0-dist.zip" - dist_examples: "https://github.com/twbs/bootstrap/releases/download/v5.3.0/bootstrap-5.3.0-examples.zip" + source: "https://github.com/twbs/bootstrap/archive/v5.3.1.zip" + dist: "https://github.com/twbs/bootstrap/releases/download/v5.3.1/bootstrap-5.3.1-dist.zip" + dist_examples: "https://github.com/twbs/bootstrap/releases/download/v5.3.1/bootstrap-5.3.1-examples.zip" cdn: # See https://www.srihash.org for info on how to generate the hashes - css: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" - css_hash: "sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" - css_rtl: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" - css_rtl_hash: "sha384-PJsj/BTMqILvmcej7ulplguok8ag4xFTPryRq8xevL7eBYSmpXKcbNVuy+P0RMgq" - js: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" - js_hash: "sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" - js_bundle: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" - js_bundle_hash: "sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" + css: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" + css_hash: "sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" + css_rtl: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.rtl.min.css" + css_rtl_hash: "sha384-PRrgQVJ8NNHGieOA1grGdCTIt4h21CzJs6SnWH4YMQ6G5F5+IEzOHz67L4SQaF0o" + js: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js" + js_hash: "sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" + js_bundle: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" + js_bundle_hash: "sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" popper: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" popper_hash: "sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" popper_esm: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/popper.min.js" diff --git a/js/src/base-component.js b/js/src/base-component.js index d13c7ab..19a09ad 100644 --- a/js/src/base-component.js +++ b/js/src/base-component.js @@ -14,7 +14,7 @@ import { executeAfterTransition, getElement } from './util/index.js' * Constants */ -const VERSION = '5.3.0' +const VERSION = '5.3.1' /** * Class definition diff --git a/js/src/tab.js b/js/src/tab.js index d9993d5..5598e15 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -30,6 +30,8 @@ const ARROW_LEFT_KEY = 'ArrowLeft' const ARROW_RIGHT_KEY = 'ArrowRight' const ARROW_UP_KEY = 'ArrowUp' const ARROW_DOWN_KEY = 'ArrowDown' +const HOME_KEY = 'Home' +const END_KEY = 'End' const CLASS_NAME_ACTIVE = 'active' const CLASS_NAME_FADE = 'fade' @@ -151,14 +153,22 @@ class Tab extends BaseComponent { } _keydown(event) { - if (!([ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key))) { + if (!([ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ARROW_UP_KEY, ARROW_DOWN_KEY, HOME_KEY, END_KEY].includes(event.key))) { return } event.stopPropagation()// stopPropagation/preventDefault both added to support up/down keys without scrolling the page event.preventDefault() - const isNext = [ARROW_RIGHT_KEY, ARROW_DOWN_KEY].includes(event.key) - const nextActiveElement = getNextActiveElement(this._getChildren().filter(element => !isDisabled(element)), event.target, isNext, true) + + const children = this._getChildren().filter(element => !isDisabled(element)) + let nextActiveElement + + if ([HOME_KEY, END_KEY].includes(event.key)) { + nextActiveElement = children[event.key === HOME_KEY ? 0 : children.length - 1] + } else { + const isNext = [ARROW_RIGHT_KEY, ARROW_DOWN_KEY].includes(event.key) + nextActiveElement = getNextActiveElement(children, event.target, isNext, true) + } if (nextActiveElement) { nextActiveElement.focus({ preventScroll: true }) diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index 84690fc..007addd 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -630,6 +630,58 @@ describe('Tab', () => { expect(spyPrevent).toHaveBeenCalledTimes(2) }) + it('if keydown event is Home, handle it', () => { + fixtureEl.innerHTML = [ + '' + ].join('') + + const tabEl1 = fixtureEl.querySelector('#tab1') + const tabEl3 = fixtureEl.querySelector('#tab3') + + const tab3 = new Tab(tabEl3) + tab3.show() + + const spyShown = jasmine.createSpy() + tabEl1.addEventListener('shown.bs.tab', spyShown) + + const keydown = createEvent('keydown') + keydown.key = 'Home' + + tabEl3.dispatchEvent(keydown) + + expect(spyShown).toHaveBeenCalled() + }) + + it('if keydown event is End, handle it', () => { + fixtureEl.innerHTML = [ + '' + ].join('') + + const tabEl1 = fixtureEl.querySelector('#tab1') + const tabEl3 = fixtureEl.querySelector('#tab3') + + const tab1 = new Tab(tabEl1) + tab1.show() + + const spyShown = jasmine.createSpy() + tabEl3.addEventListener('shown.bs.tab', spyShown) + + const keydown = createEvent('keydown') + keydown.key = 'End' + + tabEl1.dispatchEvent(keydown) + + expect(spyShown).toHaveBeenCalled() + }) + it('if keydown event is right arrow and next element is disabled', () => { fixtureEl.innerHTML = [ ' {{< /example >}} @@ -208,9 +206,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
  • Dropdown link
  • - - -
    +
    @@ -219,7 +215,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
  • Dropdown link
  • -
    +
    @@ -228,7 +224,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
  • Dropdown link
  • -
    +
    diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md index ae58fca..83a6138 100644 --- a/site/content/docs/5.3/components/buttons.md +++ b/site/content/docs/5.3/components/buttons.md @@ -129,7 +129,7 @@ To cover cases where you have to keep the `href` attribute on a disabled link, t ## Block buttons -Create responsive stacks of full-width, "block buttons" like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors. +Create responsive stacks of full-width, "block buttons" like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button-specific classes, we have much greater control over spacing, alignment, and responsive behaviors. {{< example >}}
    @@ -156,7 +156,7 @@ You can adjust the width of your block buttons with grid column width classes. F
    {{< /example >}} -Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they're no longer stacked. +Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right-align the buttons when they're no longer stacked. {{< example >}}
    @@ -178,15 +178,29 @@ Visually, these toggle buttons are identical to the [checkbox toggle buttons]({{ Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to ensure that it is conveyed appropriately to assistive technologies. {{< example >}} - - - +

    + + + +

    +

    + + + +

    {{< /example >}} {{< example >}} -Toggle link -Active toggle link -Disabled toggle link +

    + Toggle link + Active toggle link + Disabled toggle link +

    +

    + Toggle link + Active toggle link + Disabled toggle link +

    {{< /example >}} ### Methods @@ -201,8 +215,8 @@ const bsButton = new bootstrap.Button('#myButton') | Method | Description | | --- | --- | | `dispose` | Destroys an element's button. (Removes stored data on the DOM element) | -| `getInstance` | Static method which allows you to get the button instance associated to a DOM element, you can use it like this: `bootstrap.Button.getInstance(element)`. | -| `getOrCreateInstance` | Static method which returns a button instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Button.getOrCreateInstance(element)`. | +| `getInstance` | Static method which allows you to get the button instance associated with a DOM element, you can use it like this: `bootstrap.Button.getInstance(element)`. | +| `getOrCreateInstance` | Static method which returns a button instance associated with a DOM element or creates a new one in case it wasn't initialized. You can use it like this: `bootstrap.Button.getOrCreateInstance(element)`. | | `toggle` | Toggles push state. Gives the button the appearance that it has been activated. | {{< /bs-table >}} @@ -227,7 +241,7 @@ As part of Bootstrap's evolving CSS variables approach, buttons now use local CS Each `.btn-*` modifier class updates the appropriate CSS variables to minimize additional CSS rules with our `button-variant()`, `button-outline-variant()`, and `button-size()` mixins. -Here's an example of building a custom `.btn-*` modifier class like we do for the buttons unique to our docs by reassigning Bootstrap's CSS variables with a mixture of our own CSS and Sass variables. +Here's an example of building a custom `.btn-*` modifier class as we do for the buttons unique to our docs by reassigning Bootstrap's CSS variables with a mixture of our own CSS and Sass variables.
    diff --git a/site/content/docs/5.3/components/card.md b/site/content/docs/5.3/components/card.md index 2ad32b4..6138c3d 100644 --- a/site/content/docs/5.3/components/card.md +++ b/site/content/docs/5.3/components/card.md @@ -309,7 +309,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen Link
    @@ -332,7 +332,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen Link
    diff --git a/site/content/docs/5.3/components/collapse.md b/site/content/docs/5.3/components/collapse.md index 21b9c3e..d517115 100644 --- a/site/content/docs/5.3/components/collapse.md +++ b/site/content/docs/5.3/components/collapse.md @@ -25,7 +25,7 @@ Click the buttons below to show and hide another element via class changes: Generally, we recommend using a ` diff --git a/site/content/docs/5.3/components/dropdowns.md b/site/content/docs/5.3/components/dropdowns.md index 0988820..6e3811f 100644 --- a/site/content/docs/5.3/components/dropdowns.md +++ b/site/content/docs/5.3/components/dropdowns.md @@ -661,7 +661,7 @@ Add `.disabled` to items in the dropdown to **style them as disabled**. {{< example >}} {{< /example >}} diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md index 6c22809..598bb38 100644 --- a/site/content/docs/5.3/components/list-group.md +++ b/site/content/docs/5.3/components/list-group.md @@ -62,7 +62,7 @@ Be sure to **not use the standard `.btn` classes here**. A second link item A third link item A fourth link item - A disabled link item + A disabled link item
    {{< /example >}} diff --git a/site/content/docs/5.3/components/navbar.md b/site/content/docs/5.3/components/navbar.md index 9b9f86a..ab6c230 100644 --- a/site/content/docs/5.3/components/navbar.md +++ b/site/content/docs/5.3/components/navbar.md @@ -63,7 +63,7 @@ Here's an example of all the sub-components included in a responsive light-theme
    @@ -179,7 +179,7 @@ And because we use classes for our navs, you can avoid the list-based approach e Home Features Pricing - Disabled + Disabled
    @@ -331,7 +331,7 @@ Mix and match with other components and utilities as needed. Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `data-bs-theme="dark"` to the `.navbar` parent for dark background colors. Then, customize with `.bg-*` and additional utilities.
    - {{< /example >}} @@ -294,7 +294,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin Link {{< /example >}} @@ -320,7 +320,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin Link {{< /example >}} @@ -567,7 +567,7 @@ And with vertical pills. Ideally, for vertical tabs, you should also add `aria-o Dynamic tabbed interfaces, as described in the [ARIA Authoring Practices Guide tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality, and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using `
    @@ -67,7 +67,7 @@ In the example below, we take a typical card component and recreate it with plac

    - + ``` @@ -83,7 +83,7 @@ We apply additional styling to `.btn`s via `::before` to ensure the `height` is

    - + {{< /example >}} {{< callout info >}} diff --git a/site/content/docs/5.3/components/spinners.md b/site/content/docs/5.3/components/spinners.md index f2635c6..977257d 100644 --- a/site/content/docs/5.3/components/spinners.md +++ b/site/content/docs/5.3/components/spinners.md @@ -96,8 +96,8 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex {{< example >}}
    - Loading... - + Loading... +
    {{< /example >}} @@ -151,23 +151,23 @@ Use spinners within buttons to indicate an action is currently processing or tak {{< example >}} {{< /example >}} {{< example >}} {{< /example >}} diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md index cf628e3..91adacc 100644 --- a/site/content/docs/5.3/components/tooltips.md +++ b/site/content/docs/5.3/components/tooltips.md @@ -157,7 +157,7 @@ const tooltip = new bootstrap.Tooltip('#example', { The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin). {{< callout warning >}} -**Keep tooltips accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce tooltips in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltips as this will make theme impossible to trigger for keyboard users. +**Keep tooltips accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce tooltips in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltips as this will make them impossible to trigger for keyboard users. {{< /callout >}} ```html @@ -165,7 +165,7 @@ The required markup for a tooltip is only a `data` attribute and `title` on the Hover over me -