chore(merge main): patched commit → 3083596 (#2682)

.github/CONTRIBUTING.md

@@ -217,7 +217,7 @@ includes code changes) and under the terms of the
 
 [Adhere to the Code Guide.](https://codeguide.co/#css)
 
-- When feasible, default color palettes should comply with [WCAG color contrast guidelines](https://www.w3.org/TR/WCAG20/#visual-audio-contrast).
+- When feasible, default color palettes should comply with [WCAG color contrast guidelines](https://www.w3.org/TR/WCAG/#distinguishable).
 - Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](https://www.a11yproject.com/posts/2013-01-25-never-remove-css-outlines/) for more details.
 
 ### JS

scss/_functions.scss

@@ -178,7 +178,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
 }
 
-// Return WCAG2.1 relative luminance
+// Return WCAG2.2 relative luminance
 // See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
 // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
 @function luminance($color) {

scss/_variables.scss

@@ -89,8 +89,8 @@ $colors: (
 ) !default;
 // scss-docs-end colors-map
 
-// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
-// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.2 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG/#contrast-minimum
 $min-contrast-ratio: 4.5 !default;
 
 // Customize the light and dark text colors for use in our YIQ color contrast function.

scss/mixins/_target-size.scss

@@ -1,6 +1,6 @@
 // Minimum target size should be 44×44 CSS pixels
 //
-// See https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
+// See https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
 // See https://w3c.github.io/wcag/understanding/pointer-target-spacing.html
 // See https://checklists.opquast.com/en/qualiteweb/the-size-of-the-clickable-elements-is-sufficient
 

scss/mixins/_visually-hidden.scss

@@ -24,7 +24,7 @@
 // Use to only display content when it's focused, or one of its child elements is focused
 // (i.e. when focus is within the element/container that the class was applied to)
 //
-// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+// Useful for "Skip to main content" links; see https://www.w3.org/WAI/WCAG22/Techniques/general/G1.html
 
 @mixin visually-hidden-focusable() {
  &:not(:focus):not(:focus-within) {

site/content/docs/5.3/components/carousel.md

@@ -241,7 +241,7 @@ You can make your carousels autoplay on page load by setting the `ride` option t
 {{< callout info >}}
 For accessibility reasons, we recommend avoiding the use of autoplaying carousels. If your page does include an autoplaying carousel, we recommend providing an additional button or control to explicitly pause/stop the carousel.
 
-See [WCAG 2.1 Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/TR/WCAG21/#pause-stop-hide).
+See [WCAG 2.2 Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/TR/WCAG/#pause-stop-hide).
 {{< /callout >}}
 
 {{< example >}}

site/content/docs/5.3/components/dropdowns.md

@@ -137,7 +137,7 @@ The best part is you can do this with any button variant, too:
 <!-- Example single danger button -->
 <div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
- Action
+ Danger
  </button>
  <ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
@@ -265,7 +265,7 @@ Please refer to the [Dropdowns guidelines](https://system.design.orange.com/0c1a
 ```html
 <!-- Example split danger button -->
 <div class="btn-group">
- <button type="button" class="btn btn-danger">Action</button>
+ <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
  <span class="visually-hidden">Toggle Dropdown</span>
  </button>

site/content/docs/5.3/components/tooltips.md

@@ -34,7 +34,7 @@ Got all that? Great, let's see how they work with some examples.
 
 ## Accessibility
 
-For accessibility purpose, [content on hover or focus should be dismissible, hoverable and persistent](https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html).
+For accessibility purpose, [content on hover or focus should be dismissible, hoverable and persistent](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html).
 With Boosted tooltips, no mechanism is available to dismiss the tooltip without moving pointer hover or keyboard focus (due to Popper library's limitations).
 Please pay attention that the tooltip never hides an important content.
 

site/content/docs/5.3/getting-started/accessibility.md

@@ -12,7 +12,7 @@ Boosted provides an easy-to-use framework of ready-made styles, layout tools, an
 
 ## Overview and limitations
 
-The overall accessibility of any project built with Boosted depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Boosted that fulfill [<abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1](https://www.w3.org/TR/WCAG/) (A/AA/AAA), [Section 508](https://www.section508.gov/), and similar accessibility standards and requirements.
+The overall accessibility of any project built with Boosted depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Boosted that fulfill [<abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.2](https://www.w3.org/TR/WCAG/) (A/AA/AAA), [Section 508](https://www.section508.gov/), and similar accessibility standards and requirements.
 
 ### Structural markup
 
@@ -27,9 +27,9 @@ Because Boosted's components are purposely designed to be fairly generic, author
 ### Color contrast
 
 <!-- Boosted mod -->
-Some combinations of colors that currently make up Boosted's default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to *insufficient* color contrast (below the recommended [WCAG 2.1 text color contrast ratio of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and the [WCAG 2.1 non-text color contrast ratio of 3:1](https://www.w3.org/TR/WCAG21/#non-text-contrast)), particularly when used against a light background.
+Some combinations of colors that currently make up Boosted's default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to *insufficient* color contrast (below the recommended [WCAG 2.2 text color contrast ratio of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and the [WCAG 2.2 non-text color contrast ratio of 3:1](https://www.w3.org/TR/WCAG/#non-text-contrast)), particularly when used against a light background.
 
-Unlike Bootstrap, in Boosted **contrasts are locked to ensure they meet [WCAG 2.1 accessibility standards for color contrast](https://www.w3.org/TR/WCAG21/#contrast-minimum)** when using [`.text-*`]({{< docsref "/utilities/colors" >}}) and [`.bg-*` utilities]({{< docsref "/utilities/background" >}}), by defining `color` and `background-color` altogether. Please refer to [our theme colors]({{< docsref "/customize/color-palette" >}}) to have a full preview of Boosted color palette’s reached WCAG level.
+Unlike Bootstrap, in Boosted **contrasts are locked to ensure they meet [WCAG 2.2 accessibility standards for color contrast](https://www.w3.org/TR/WCAG/#contrast-minimum)** when using [`.text-*`]({{< docsref "/utilities/colors" >}}) and [`.bg-*` utilities]({{< docsref "/utilities/background" >}}), by defining `color` and `background-color` altogether. Please refer to [our theme colors]({{< docsref "/customize/color-palette" >}}) to have a full preview of Boosted color palette’s reached WCAG level.
 <!-- end mod -->
 
 ### Visually hidden content
@@ -87,20 +87,20 @@ When using a fixed (or sticky) header, tabbing backward often hides focused elem
 
 ### Minimum target size
 
-Boosted provides `target-size()` mixin to ensure a minimum target size, adding a centered pseudo-element with a minimum size —defaulting to `44px` to pass [WCAG 2.1 "Target Size" Success Criterion (2.5.5)](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)— alongside a few arguments to fit specific needs (e.g. different width and height, using `::after` instead of `::before`, etc.).
+Boosted provides `target-size()` mixin to ensure a minimum target size, adding a centered pseudo-element with a minimum size —defaulting to `44px` to pass [WCAG 2.2 "Target Size" Success Criterion (2.5.8)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)— alongside a few arguments to fit specific needs (e.g. different width and height, using `::after` instead of `::before`, etc.).
 
 {{< scss-docs name="target-size" file="scss/mixins/_target-size.scss" >}}
 
 ### Maximum line length
 
-When writing a paragraph, it is commonly admitted that a line should have 80 characters as a maximum. This phenomenon is carefully explained in the [C20 technique: Using relative measurements to set column widths](https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C20).
+When writing a paragraph, it is commonly admitted that a line should have 80 characters as a maximum. This phenomenon is carefully explained in the [C20 technique: Using relative measurements to set column widths](https://www.w3.org/WAI/WCAG22/Techniques/css/C20).
 
 For more information, please [read text utilities]({{< docsref "/utilities/text#line-length" >}}).
 <!-- End mod -->
 
 ## Additional resources
 
-- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG/)
+- [Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG/)
 - [The A11Y Project](https://www.a11yproject.com/)
 - [MDN accessibility documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
 - [Tenon.io Accessibility Checker](https://tenon.io/)

site/content/docs/5.3/migration.md

@@ -1998,7 +1998,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
 
 - Added new tints and shades for every color, providing nine separate colors for each base color, as new Sass variables.
 
-- Improved color contrast. Bumped color contrast ratio from 3:1 to 4.5:1 and updated blue, green, cyan, and pink colors to ensure WCAG 2.1 AA contrast. Also changed our color contrast color from `$gray-900` to `$black`.
+- Improved color contrast. Bumped color contrast ratio from 3:1 to 4.5:1 and updated blue, green, cyan, and pink colors to ensure WCAG 2.2 AA contrast. Also changed our color contrast color from `$gray-900` to `$black`.
 
 - To support our color system, we've added new custom `tint-color()` and `shade-color()` functions to mix our colors appropriately.
 

site/content/docs/5.3/utilities/colors.md

@@ -17,7 +17,7 @@ toc: true
 Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]({{< docsref "/helpers/colored-links" >}}) which have `:hover` and `:focus` states.
 To colorize icons, please refer to our [icon color documentation]({{< docsref "extend/icons#modify-icons-color" >}}).
 
-Bootstrap provides many `.text-*` and `.bg-*` utilities, but they should be used with care to meet our design specifications and [WCAG 2.0 accessibility standards for color contrast](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html).
+Bootstrap provides many `.text-*` and `.bg-*` utilities, but they should be used with care to meet our design specifications and [WCAG 2.2 accessibility standards for color contrast](https://www.w3.org/TR/WCAG/#distinguishable).
 To be sure to respect the specifications, it is necessary to define `color`, `background-color` and `font-size` altogether.
 
 Thus, the `.text-primary` color on white background (`#f16e00`) can only be used in a font size greater than 24px (using for example `.fs-3` utility), or 19px bold (using for example `.fs-4` and `.fw-bold` utilities).