Merge branch 'main' into main-lmp-a11y-3-2-aria-label

package.json

@@ -107,22 +107,22 @@
     "@babel/cli": "^7.25.6",
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.4",
-    "@docsearch/js": "^3.6.1",
-    "@percy/cli": "^1.29.3",
+    "@docsearch/js": "^3.6.2",
+    "@percy/cli": "^1.29.4",
     "@popperjs/core": "^2.11.8",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.7",
     "@stackblitz/sdk": "^1.11.0",
-    "@storybook/addon-a11y": "^8.3.1",
-    "@storybook/addon-essentials": "^8.3.1",
-    "@storybook/addon-themes": "^8.3.1",
-    "@storybook/blocks": "^8.3.1",
-    "@storybook/html": "^8.3.1",
-    "@storybook/html-vite": "^8.3.1",
-    "@storybook/manager-api": "^8.3.1",
-    "@storybook/test": "^8.3.1",
+    "@storybook/addon-a11y": "^8.3.4",
+    "@storybook/addon-essentials": "^8.3.4",
+    "@storybook/addon-themes": "^8.3.4",
+    "@storybook/blocks": "^8.3.4",
+    "@storybook/html": "^8.3.4",
+    "@storybook/html-vite": "^8.3.4",
+    "@storybook/manager-api": "^8.3.4",
+    "@storybook/test": "^8.3.4",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",
     "bundlewatch": "^0.4.0",
@@ -134,7 +134,7 @@
     "eslint-plugin-html": "^8.1.1",
     "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-markdown": "^5.1.0",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.9.0",
     "eslint-plugin-unicorn": "^55.0.0",
     "find-unused-sass-variables": "^6.0.0",
     "focus-visible": "^5.2.1",
@@ -165,11 +165,11 @@
     "rollup-plugin-istanbul": "^5.0.0",
     "rtlcss": "^4.3.0",
     "sass": "^1.77.8",
-    "sass-loader": "^16.0.1",
+    "sass-loader": "^16.0.2",
     "sass-true": "^8.0.0",
     "shelljs": "^0.8.5",
     "sirv-cli": "^2.0.2",
-    "storybook": "^8.3.1",
+    "storybook": "^8.3.4",
     "stylelint": "^16.8.1",
     "stylelint-config-twbs-bootstrap": "^15.0.0",
     "tarteaucitronjs": "^1.19.0",

site/assets/js/tac.js

@@ -11,12 +11,12 @@
     const tac = document.getElementById('tarteaucitron')
 
     tac.querySelectorAll('.tarteaucitronAllow').forEach(button => {
-      button.classList.add('btn', 'btn-sm', 'btn-success', 'my-2', 'my-lg-0')
+      button.classList.add('btn', 'btn-sm', 'btn-success')
       button.innerHTML = tarteaucitron.lang.allowAll
     })
 
     tac.querySelectorAll('.tarteaucitronDeny').forEach(button => {
-      button.classList.add('btn', 'btn-sm', 'btn-danger', 'my-2', 'my-lg-0', 'ms-lg-2')
+      button.classList.add('btn', 'btn-sm', 'btn-danger', 'mt-1', 'mt-md-0', 'ms-md-3')
       button.innerHTML = tarteaucitron.lang.denyAll
     })
 
@@ -79,7 +79,7 @@
       const toggle = document
         .createRange()
         .createContextualFragment(
-          `<div class="form-check form-switch my-2 my-lg-0"><input class="form-check-input ms-0" type="checkbox" id="googletagmanagerAllowed" aria-describedby="tacCLgoogletagmanager" onchange="${choiceEvent}"${((document.cookie.match(/^(?:.*;)?\s*cookie-consent\s*=\s*([^;]+)(?:.*)?$/) || [null])[1].match('!googletagmanager=true') ? 'checked' : '')}><label class="form-check-label visually-hidden" for="googletagmanagerAllowed">Google Tag Manager</label><input id="googletagmanagerDenied" class="d-none"></div>`
+          `<div class="form-check form-switch ps-0"><input class="form-check-input ms-0" type="checkbox" id="googletagmanagerAllowed" aria-describedby="tacCLgoogletagmanager" onchange="${choiceEvent}"${((document.cookie.match(/^(?:.*;)?\s*cookie-consent\s*=\s*([^;]+)(?:.*)?$/) || [null])[1].match('!googletagmanager=true') ? 'checked' : '')}><label class="form-check-label visually-hidden" for="googletagmanagerAllowed">Google Tag Manager</label><input id="googletagmanagerDenied" class="d-none"></div>`
         )
       ask.innerHTML = ''
       ask.append(toggle)

site/assets/scss/_tarteaucitron.scss

@@ -4,6 +4,7 @@
   z-index: $zindex-modal;
   display: none;
   width: 100%;
+  max-width: $modal-md;
   padding: $modal-content-padding;
   background-color: $modal-content-bg;
   background-clip: padding-box;
@@ -15,23 +16,6 @@
     font-weight: $font-weight-bold;
     color: $modal-content-color;
   }
-
-  @include media-breakpoint-up(sm) {
-    max-width: $modal-sm;
-    margin: $modal-dialog-margin-y-sm-up auto;
-  }
-
-  @include media-breakpoint-up(md) {
-    max-width: $modal-md;
-  }
-
-  @include media-breakpoint-up(lg) {
-    max-width: $modal-lg * 1.125;
-  }
-
-  @include media-breakpoint-up(xl) {
-    max-width: $modal-xl * 1.25;
-  }
 }
 
 @include tac("Root") {
@@ -120,23 +104,28 @@
 }
 
 @include tac("Name", true) {
-  float: left;
   font-size: $font-size-sm;
   color: var(--bs-secondary-color);
 }
 
 @include tac("Ask", true) {
-  float: right;
+  display: flex;
+  flex-direction: column;
+  margin-top: $spacer * .5;
+
+  @include media-breakpoint-up(md) {
+    flex-direction: row;
+  }
 }
 
 @include tac("Line", true) {
+  margin-bottom: $spacer;
   overflow: visible;
   @include clearfix();
 }
 
 @include tac("MainLine", true) {
   padding-bottom: $spacer;
-  margin-bottom: $spacer;
   border-bottom: $modal-content-border-width solid $modal-content-border-color;
 }
 

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

@@ -251,7 +251,7 @@ When modals become too long for the user's viewport or device, they scroll indep
         <h1 class="modal-title h5" id="exampleModalLongTitle">Modal title</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
       </div>
-      <div class="modal-body" style="min-height: 1500px">
+      <div class="modal-body" style="min-height: 100vh">
         <p>This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p>
       </div>
       <div class="modal-footer">

site/content/docs/5.3/components/orange-navbar.md

@@ -202,7 +202,7 @@ An additional navbar (with text or icon items) can be added on the right of the
           </li>
           <li class="nav-item">
             <a href="#" class="nav-link nav-icon">
-              <img src="/docs/{{<param docs_version>}}/assets/img/navbar-contact.png" width="25" height="25" role="img" alt="User" loading="lazy">
+              <img src="/docs/{{<param docs_version>}}/assets/img/navbar-contact.png" width="25" height="25" alt="" loading="lazy">
               <span class="visually-hidden">My account</span>
             </a>
           </li>

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

@@ -127,10 +127,8 @@ And with custom HTML added:
 
 With an SVG:
 
-<!--Boosted mod: added an aria-label="Default tooltip" because the title is automatically removed by JS-->
-
 <div class="bd-example tooltip-demo">
-  <a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip" aria-label="Default tooltip">
+  <a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip" aria-label="Hover or focus to see default tooltip">
     <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" aria-hidden="true">
       <rect width="100%" height="100%" fill="#563d7c"/>
       <circle cx="50" cy="50" r="30" fill="#007bff"/>

site/content/docs/5.3/dark-mode.md

@@ -4072,7 +4072,7 @@ sitemap:
             </li>
             <li class="nav-item">
               <a href="#" class="nav-link nav-icon">
-                <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" width="25" height="25">
+                <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" alt="" loading="lazy" width="25" height="25">
                 <span class="visually-hidden">My account</span>
               </a>
             </li>
@@ -4160,7 +4160,7 @@ sitemap:
             </li>
             <li class="nav-item">
               <a href="#" class="nav-link nav-icon">
-                <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" width="25" height="25">
+                <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" alt="" loading="lazy" width="25" height="25">
                 <span class="visually-hidden">My account</span>
               </a>
             </li>
@@ -4248,7 +4248,7 @@ sitemap:
             </li>
             <li class="nav-item">
               <a href="#" class="nav-link nav-icon">
-                <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" width="25" height="25">
+                <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" alt="" loading="lazy" width="25" height="25">
                 <span class="visually-hidden">My account</span>
               </a>
             </li>
@@ -4336,7 +4336,7 @@ sitemap:
             </li>
             <li class="nav-item">
               <a href="#" class="nav-link nav-icon">
-                <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" width="25" height="25">
+                <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" alt="" loading="lazy" width="25" height="25">
                 <span class="visually-hidden">My account</span>
               </a>
             </li>
@@ -4424,7 +4424,7 @@ sitemap:
             </li>
             <li class="nav-item">
               <a href="#" class="nav-link nav-icon">
-                <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" width="25" height="25">
+                <img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" alt="" loading="lazy" width="25" height="25">
                 <span class="visually-hidden">My account</span>
               </a>
             </li>

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

@@ -10,7 +10,7 @@ thumbnail: guides/parcel-dev-server-boosted.png
 ---
 
 <div class="d-flex justify-content-center">
-  <img class="d-flex" src="/docs/{{< param docs_version >}}/assets/img/parcel.png" alt="Parcel logo" loading="lazy">
+  <img class="d-flex" src="/docs/{{< param docs_version >}}/assets/img/parcel.png" alt="" loading="lazy">
 </div>
 
 {{< callout >}}
@@ -121,7 +121,7 @@ With dependencies installed and our project folder ready for us to start coding,
    npm start
    ```
 
-   ![Parcel dev server running](/assets/img/guides/parcel-dev-server.png)
+   ![Unbranded webpage with the title 'Hello, Boosted and Parcel!' and a default button](/assets/img/guides/parcel-dev-server.png)
 
 In the next and final section to this guide, we'll import all of Boosted's CSS and JavaScript.
 
@@ -169,7 +169,7 @@ Importing Boosted into Parcel requires three imports, two into our `styles.scss`
 
 4. **And you're done! 🎉** With Boosted's source Sass and JS fully loaded, your local development server should now look like this:
 
-   ![Parcel dev server running with Boosted](/assets/img/guides/parcel-dev-server-boosted.png)
+   ![Boosted-branded webpage with the title 'Hello, Boosted and Parcel!' and an orange primary button](/assets/img/guides/parcel-dev-server-boosted.png)
 
    Now you can start adding any Boosted components you want to use. Be sure to [check out the complete Parcel example project](https://github.com/twbs/examples/tree/main/parcel) for how to include additional custom Sass and optimize your build by importing only the parts of Boosted's CSS and JS that you need.
 

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

@@ -10,7 +10,7 @@ thumbnail: guides/vite-dev-server-boosted.png
 ---
 
 <div class="d-flex justify-content-center">
-  <img class="d-flex" src="/docs/{{< param docs_version >}}/assets/img/vite.svg" alt="Vite logo" width="145" loading="lazy">
+  <img class="d-flex" src="/docs/{{< param docs_version >}}/assets/img/vite.svg" alt="" width="145" loading="lazy">
 </div>
 
 {{< callout >}}
@@ -142,7 +142,7 @@ With dependencies installed and our project folder ready for us to start coding,
    npm start
    ```
 
-   ![Vite dev server running](/assets/img/guides/vite-dev-server.png)
+   ![Unbranded webpage with the title 'Hello, Boosted and Vite!' and a default button](/assets/img/guides/vite-dev-server.png)
 
 In the next and final section to this guide, we’ll import all of Boosted’s CSS and JavaScript.
 
@@ -191,7 +191,7 @@ In the next and final section to this guide, we’ll import all of Boosted’s C
 
 4. **And you're done! 🎉** With Boosted's source Sass and JS fully loaded, your local development server should now look like this:
 
-   ![Vite dev server running with Boosted](/assets/img/guides/vite-dev-server-boosted.png)
+   ![Boosted-branded webpage with the title 'Hello, Boosted and Vite!' and an orange primary button](/assets/img/guides/vite-dev-server-boosted.png)
 
    Now you can start adding any Boosted components you want to use. Be sure to [check out the complete Vite example project](https://github.com/twbs/examples/tree/main/vite) for how to include additional custom Sass and optimize your build by importing only the parts of Boosted's CSS and JS that you need.
 

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

@@ -10,7 +10,7 @@ thumbnail: guides/webpack-dev-server-boosted.png
 ---
 
 <div class="d-flex justify-content-center">
-  <img class="d-flex" src="/docs/{{< param docs_version >}}/assets/img/webpack.svg" alt="Webpack logo" width="145" loading="lazy">
+  <img class="d-flex" src="/docs/{{< param docs_version >}}/assets/img/webpack.svg" alt="" width="145" loading="lazy">
 </div>
 
 {{< callout >}}
@@ -152,7 +152,7 @@ With dependencies installed and our project folder ready for us to start coding,
    npm start
    ```
 
-   ![Webpack dev server running](/assets/img/guides/webpack-dev-server.png)
+   ![Unbranded webpage with the title 'Hello, Boosted and Webpack!' and a default button](/assets/img/guides/webpack-dev-server.png)
 
 In the next and final section to this guide, we'll set up the Webpack loaders and import all of Boosted's CSS and JavaScript.
 
@@ -265,7 +265,7 @@ Importing Boosted into Webpack requires the loaders we installed in the first se
 
 4. **And you're done! 🎉** With Boosted's source Sass and JS fully loaded, your local development server should now look like this:
 
-   ![Webpack dev server running with Boosted](/assets/img/guides/webpack-dev-server-boosted.png)
+   ![Boosted-branded webpage with the title 'Hello, Boosted and Webpack!' and an orange primary button](/assets/img/guides/webpack-dev-server-boosted.png)
 
    Now you can start adding any Boosted components you want to use. Be sure to [check out the complete Webpack example project](https://github.com/twbs/examples/tree/main/webpack) for how to include additional custom Sass and optimize your build by importing only the parts of Boosted's CSS and JS that you need.
 
@@ -295,7 +295,7 @@ Then instantiate and use the plugin in the Webpack configuration:
  const autoprefixer = require('autoprefixer')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
 +const miniCssExtractPlugin = require('mini-css-extract-plugin')
- 
+
  module.exports = {
    mode: 'development',
 @@ -17,7 +18,8 @@ module.exports = {

site/content/docs/5.3/migration.md

@@ -20,13 +20,16 @@ toc: true
 
 ### Components
 
-#### Buttons
+- **Buttons**
   - <span class="badge text-bg-success">New</span> X social button.
 
+- **Orange navbar**
+  - <span class="badge text-bg-warning">Warning</span> The markup has been revised to utilize an empty `alt` attribute and eliminate the `role="img"`, as a placeholder image is displayed in the navbar in our documentation. You should customize the `alt` attribute for the avatar to align with the context of your website. For instance, it might be appropriate to use "Access to your account" in certain situations.
+
 ### Docs
 
 - Certain variants of the components and renderings have been omitted from the documentation to help you clearly understand what is available for use, thereby simplifying the connection between [Orange Design System]({{< param ods.web >}}) and the Boosted documentation.
-  
+
   Although these variants can still be found under the "See Bootstrap examples that are incompatible with Orange Design System" section, be aware that using them may violate the Orange Design System guidelines. It is advisable to avoid these variants whenever possible.
 
 ### CSS and Sass variables

site/layouts/partials/footer.html

@@ -78,7 +78,7 @@ <h3 class="accordion-header footer-heading" id="headingCommunity">
               This documentation is an adaptation made by Orange. Original version designed and built with all the love in the world by the <a href="https://github.com/orgs/twbs/people" target="_blank" rel="noopener">Bootstrap core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors" target="_blank" rel="noopener">their contributors</a>.
             </p>
             <p class="mb-lg-1">
-              Orange modified code licensed <a href="{{ .Site.Params.repo }}/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>-&nbsp;just like <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">Bootstrap</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.
+              Orange modified code licensed <a href="{{ .Site.Params.repo }}/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>-&nbsp;just like <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener" title="Bootstrap's license" aria-label="Bootstrap's license">Bootstrap</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.
             </p>
             <p class="mb-lg-1">Currently v{{ .Site.Params.current_version }}.</p>
             <p class="mb-lg-1">

site/layouts/partials/header.html

@@ -13,7 +13,7 @@
 <link rel="preconnect" href="https://{{ .Site.Params.algolia.appId | lower }}-dsn.algolia.net" crossorigin>
 {{- end }}
 
-<title>{{ if .IsHome }}{{ .Site.Title | markdownify }} · {{ .Site.Params.subtitle | markdownify }}{{ else }}{{ .Title | markdownify }} · {{ .Site.Title | markdownify }} v{{ .Site.Params.docs_version }}{{ end }}</title>
+<title>{{ if .IsHome }}{{ .Site.Title | markdownify }} homepage · {{ .Site.Params.subtitle | markdownify }}{{ else }}{{ .Title | markdownify }} · {{ .Site.Title | markdownify }} v{{ .Site.Params.docs_version }}{{ end }}</title>
 
 {{ with .Params.robots -}}
 <meta name="robots" content="{{ . }}">

site/layouts/partials/home/orange-design-system.html

@@ -17,7 +17,7 @@ <h2 class="mb-3 fw-semibold lh-sm">Orange Design System for web</h2>
   <div class="col-lg-6">
     {{ partial "responsive-img" (dict "context" .
       "imgPath" "/assets/img/boosted-guidelines.png"
-      "alt" "Boosted design guidelines"
+      "alt" ""
       "classes" "d-block mt-3") }}
   </div>
 </section>

site/layouts/shortcodes/orange-global-headers.html

@@ -119,7 +119,7 @@ <h1 class="title">Title</h1>
         </li>
         <li class="nav-item">
           <a href="#" class="nav-link nav-icon">
-            <img src="/docs/{{ $.Site.Params.docs_version }}/assets/img/navbar-contact.png" width="25" height="25" role="img" alt="User" loading="lazy">
+            <img src="/docs/{{ $.Site.Params.docs_version }}/assets/img/navbar-contact.png" width="25" height="25" alt="" loading="lazy">
             <span class="visually-hidden">My account</span>
           </a>
         </li>

site/layouts/shortcodes/orange-supra.html

@@ -52,7 +52,7 @@
       </li>
       <li class="nav-item">
         <a href="#" class="nav-link nav-icon">
-          <img src="/docs/{{ $.Site.Params.docs_version }}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" aria-hidden="true">
+          <img src="/docs/{{ $.Site.Params.docs_version }}/assets/img/navbar-contact.png" alt="" loading="lazy">
           <span class="visually-hidden">My account</span>
         </a>
       </li>