Wrap alert text content in <p> to fix flex gap issue and improve semantics (#42175)

* Wrap alert text content in `<p>` to fix flex gap issue and improve semantics

* bump

---------

Co-authored-by: Mark Otto <markdotto@gmail.com>

Author: julien-deramond

.bundlewatch.config.json

@@ -22,15 +22,15 @@
     },
     {
       "path": "./dist/css/bootstrap-utilities.min.css",
-      "maxSize": "14.0 kB"
+      "maxSize": "14.25 kB"
     },
     {
       "path": "./dist/css/bootstrap.css",
       "maxSize": "43.0 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "39.5 kB"
+      "maxSize": "40.0 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",

js/tests/visual/alert.html

@@ -12,7 +12,7 @@ <h1>Alert <small>Bootstrap Visual Test</small></h1>
 
       <div class="alert theme-warning alert-dismissible fade show" role="alert">
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-        <strong>Holy guacamole!</strong> You should check in on some of those fields below.
+        <p><strong>Holy guacamole!</strong> You should check in on some of those fields below.</p>
       </div>
 
       <div class="alert theme-danger alert-dismissible fade show" role="alert">
@@ -39,7 +39,7 @@ <h1>Alert <small>Bootstrap Visual Test</small></h1>
 
       <div class="alert theme-warning alert-dismissible fade show" role="alert" style="transition-duration: 5s;">
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-        This alert will take 5 seconds to fade out.
+        <p>This alert will take 5 seconds to fade out.</p>
       </div>
     </div>
 

scss/_alert.scss

@@ -38,6 +38,10 @@ $alert-tokens: defaults(
     @include border-radius(var(--alert-border-radius));
   }
 
+  .alert > p {
+    margin-bottom: 0;
+  }
+
   .alert-heading {
     // Specified to prevent conflicts of changing $headings-color
     color: inherit;

site/src/assets/examples/cheatsheet/index.astro

@@ -652,7 +652,7 @@ export const body_class = 'bg-body-tertiary'
       <div>
         <Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
         <div class="alert theme-${themeColor.name} alert-dismissible fade show mb-3" role="alert">
-          A simple ${themeColor.name} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+          <p>A simple ${themeColor.name} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</p>
           <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         </div>
         `)} />

site/src/assets/partials/snippets.js

@@ -86,7 +86,7 @@ export default () => {
     const wrapper = document.createElement('div')
     wrapper.innerHTML = [
       `<div class="alert theme-${type} alert-dismissible" role="alert">`,
-      `   <div>${message}</div>`,
+      `   <p>${message}</p>`,
       '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
       '</div>'
     ].join('')

site/src/content/docs/components/alert.mdx

@@ -13,15 +13,15 @@ import { getData } from '@libs/data'
 Alerts are available for any length of text, as well as an optional close button. Alerts are designed to be used with theme colors, but have neutral fallback colors for when no theme color is applied. For inline dismissal, use the [alerts JavaScript plugin](#dismiss).
 
 <Example code={`<div class="alert" role="alert">
-    A simple alert—check it out!
+    <p>A simple alert—check it out!</p>
   </div>`} />
 
 ## Variants
 
 Use any of our variant theme classes for color mode adaptive, contextual styling.
 
 <Example class="vstack gap-3" code={getData('theme-colors').map((themeColor) => `<div class="alert theme-${themeColor.name}" role="alert">
-    A simple ${themeColor.name} alert—check it out!
+    <p>A simple ${themeColor.name} alert—check it out!</p>
   </div>`)} />
 
 <Details name="warning-color-assistive-technologies" />
@@ -42,7 +42,7 @@ We use the following JavaScript to trigger our live alert demo:
 Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
 
 <Example class="vstack gap-3" code={getData('theme-colors').map((themeColor) => `<div class="alert theme-${themeColor.name}" role="alert">
-    A simple ${themeColor.name} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+    <p>A simple ${themeColor.name} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</p>
   </div>`)} />
 
 ## Additional content
@@ -66,9 +66,7 @@ Similarly, you can use [flexbox utilities]([[docsref:/utilities/flex]]) and [Boo
     <svg xmlns="http://www.w3.org/2000/svg" class="bi flex-shrink-0" viewBox="0 0 16 16" role="img" aria-label="Warning:">
       <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
     </svg>
-    <div>
-      An example alert with an icon
-    </div>
+    <p>An example alert with an icon</p>
   </div>`} />
 
 ## Dismiss
@@ -83,7 +81,7 @@ Using the alert JavaScript plugin, it’s possible to dismiss any alert inline.
 You can see this in action with a live demo:
 
 <Example code={`<div class="alert theme-warning alert-dismissible fade show" role="alert">
-    Something’s wrong, check the fields below and try again.
+    <p>Something’s wrong, check the fields below and try again.</p>
     <CloseButton dismiss="alert" class="ms-auto" />
   </div>`} />
 

site/src/content/docs/components/offcanvas.mdx

@@ -169,7 +169,7 @@ To make a responsive offcanvas, replace the `.offcanvas` base class with a respo
 
 <Example code={`<button class="btn-solid theme-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>
 
-  <div class="alert theme-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>
+  <div class="alert theme-info d-none d-lg-block"><p>Resize your browser to show the responsive offcanvas toggle.</p></div>
 
   <div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
     <div class="offcanvas-header">

site/src/content/docs/customize/theme.mdx

@@ -211,7 +211,7 @@ Here's the same set of components rendered in both light and dark modes side by
           <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         </div>
       </div>
-      <div class="alert theme-primary">This is a primary alert.</div>
+      <div class="alert theme-primary"><p>This is a primary alert.</p></div>
       <input type="text" class="form-control" placeholder="Form control">
       <div class="checkgroup">
         <div class="check">
@@ -236,7 +236,7 @@ Here's the same set of components rendered in both light and dark modes side by
           <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         </div>
       </div>
-      <div class="alert theme-primary">This is a primary alert.</div>
+      <div class="alert theme-primary"><p>This is a primary alert.</p></div>
       <input type="text" class="form-control" placeholder="Form control">
       <div class="checkgroup">
         <div class="check">
@@ -271,7 +271,7 @@ We generate theme utility classes from the `$theme-colors` Sass map that make al
 
 With theme utilities, you can apply a theme color to an element with a single class.
 
-<Example class="vstack gap-3" code={`<div class="alert theme-primary">Primary alert</div>
+<Example class="vstack gap-3" code={`<div class="alert theme-primary"><p>Primary alert</p></div>
   <div>
     <button type="button" class="btn-solid theme-primary">Primary button</button>
     <button type="button" class="btn-outline theme-primary">Primary outline button</button>
@@ -286,7 +286,7 @@ With theme utilities, you can apply a theme color to an element with a single cl
 And you can apply a theme color utility to a container and any theme-aware children will inherit the theme color.
 
 <Example code={`<div class="vstack gap-3 theme-primary">
-    <div class="alert">Primary alert</div>
+    <div class="alert"><p>Primary alert</p></div>
     <div>
       <button type="button" class="btn-solid">Primary button</button>
       <button type="button" class="btn-outline">Primary outline button</button>
@@ -302,7 +302,7 @@ And you can apply a theme color utility to a container and any theme-aware child
 This also means you can override a container's theme color with another theme color on specific components.
 
 <Example code={`<div class="vstack gap-3 theme-primary">
-    <div class="alert">Primary alert</div>
+    <div class="alert"><p>Primary alert</p></div>
     <div>
       <button type="button" class="btn-solid theme-emphasis">Emphasis button</button>
       <button type="button" class="btn-outline">Primary outline button</button>