From: Mark Otto Date: Mon, 12 Dec 2022 02:10:19 +0000 (-0800) Subject: Rewrite some callouts to remove most headings and reduce their content X-Git-Tag: v5.3.0-alpha2~179 X-Git-Url: http://git.ipfire.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=89f9ffc212e61eef78422843200275904e2a7c44;p=thirdparty%2Fbootstrap.git Rewrite some callouts to remove most headings and reduce their content --- diff --git a/site/content/docs/5.3/components/breadcrumb.md b/site/content/docs/5.3/components/breadcrumb.md index 0012f97481..fc68fc5801 100644 --- a/site/content/docs/5.3/components/breadcrumb.md +++ b/site/content/docs/5.3/components/breadcrumb.md @@ -54,11 +54,8 @@ $breadcrumb-divider: quote(">"); It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom property, or use the Sass variable. - {{< callout info >}} -### Using embedded SVG - -Inlining SVG as data URI requires to URL escape a few characters, most notably `<`, `>` and `#`. That's why the `$breadcrumb-divider` variable is passed through our [`escape-svg()` Sass function]({{< docsref "/customize/sass#escape-svg" >}}). When using the CSS custom property, you need to URL escape your SVG on your own. Read [Kevin Weber's explanations on CodePen](https://codepen.io/kevinweber/pen/dXWoRw ) for detailed information on what to escape. +**Inlined SVG requires properly escaped characters.** Some reserved characters, such as `<`, `>` and `#`, must be URL-encoded or escaped. We do this with the `$breadcrumb-divider` variable using our [`escape-svg()` Sass function]({{< docsref "/customize/sass#escape-svg" >}}). When customizing the CSS variable, you must handle this yourself. Read [Kevin Weber's explanations on CodePen](https://codepen.io/kevinweber/pen/dXWoRw ) for more info. {{< /callout >}} {{< example >}} diff --git a/site/content/docs/5.3/components/button-group.md b/site/content/docs/5.3/components/button-group.md index 6889ed1f48..9c6356249c 100644 --- a/site/content/docs/5.3/components/button-group.md +++ b/site/content/docs/5.3/components/button-group.md @@ -18,12 +18,8 @@ Wrap a series of buttons with `.btn` in `.btn-group`. {{< /example >}} -{{< callout warning >}} -##### Ensure correct `role` and provide a label - -In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`. - -In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used. +{{< callout info >}} +Button groups require an appropriate `role` attribute and explicit label to ensure assistive technologies like screen readers identify buttons as grouped and announce them. Use `role="group"` for button groups or `role="toolbar"` for button toolbars. Then use `aria-label` or `aria-labelledby` to label them. {{< /callout >}} These classes can also be added to groups of links, as an alternative to the [`.nav` navigation components]({{< docsref "/components/navs-tabs" >}}). diff --git a/site/content/docs/5.3/components/dropdowns.md b/site/content/docs/5.3/components/dropdowns.md index b7dae56ab9..8969c60855 100644 --- a/site/content/docs/5.3/components/dropdowns.md +++ b/site/content/docs/5.3/components/dropdowns.md @@ -400,8 +400,7 @@ And putting it to use in a navbar: ## Directions {{< callout info >}} -#### RTL -Directions are mirrored when using Bootstrap in RTL, meaning `.dropstart` will appear on the right side. +**Directions are flipped in RTL mode.** As such, `.dropstart` will appear on the right side. {{< /callout >}} ### Centered @@ -1057,6 +1056,10 @@ Add `data-bs-toggle="dropdown"` to a link or button to toggle a dropdown. ### Via JavaScript +{{< callout warning >}} +Dropdowns must have `data-bs-toggle="dropdown"` on their trigger element, regardless of using the Data API or JavaScript. +{{< /callout >}} + Call the dropdowns via JavaScript: ```js @@ -1064,12 +1067,6 @@ const dropdownElementList = document.querySelectorAll('.dropdown-toggle') const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl)) ``` -{{< callout info >}} -##### `data-bs-toggle="dropdown"` still required - -Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-bs-toggle="dropdown"` is always required to be present on the dropdown's trigger element. -{{< /callout >}} - ### Options {{< markdown >}} diff --git a/site/content/docs/5.3/components/popovers.md b/site/content/docs/5.3/components/popovers.md index f86404382b..ad86cdfead 100644 --- a/site/content/docs/5.3/components/popovers.md +++ b/site/content/docs/5.3/components/popovers.md @@ -111,12 +111,10 @@ You can customize the appearance of popovers using [CSS variables](#variables). ### Dismiss on next click -Use the `focus` trigger to dismiss popovers on the user's next click of a different element than the toggle element. +Use the `focus` trigger to dismiss popovers on the user's next click of an element other than the toggle element. {{< callout danger >}} -#### Specific markup required for dismiss-on-next-click - -For proper cross-browser and cross-platform behavior, you must use the `` tag, _not_ the `