Examples: minor accessibility improvements (#40620)

- no need for `role="document"` on modals (was removed from Bootstrap a while ago)
- use `type="email"` for email input
- add aria-labels for previous month and next month buttons on date picker demo

Co-authored-by: Julien Déramond <juderamond@gmail.com>

diff --git a/site/content/docs/5.3/examples/dropdowns/index.html b/site/content/docs/5.3/examples/dropdowns/index.html
index 66140413f5af68b98cb2991884d0c5313baffce0..6dc038316b4cc6526cda87520e296278b29616b8 100644 (file)
--- a/site/content/docs/5.3/examples/dropdowns/index.html
+++ b/site/content/docs/5.3/examples/dropdowns/index.html
@@ -208,7 +208,7 @@ body_class: ""
     <div class="d-grid gap-1">
       <div class="cal">
         <div class="cal-month">
-          <button class="btn cal-btn" type="button">
+          <button class="btn cal-btn" type="button" aria-label="previous month">
             <svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
           </button>
           <strong class="cal-month-name">June</strong>
@@ -226,7 +226,7 @@ body_class: ""
             <option value="November">November</option>
             <option value="December">December</option>
           </select>
-          <button class="btn cal-btn" type="button">
+          <button class="btn cal-btn" type="button" aria-label="next month">
             <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
           </button>
         </div>
@@ -287,7 +287,7 @@ body_class: ""
     <div class="d-grid gap-1">
       <div class="cal">
         <div class="cal-month">
-          <button class="btn cal-btn" type="button">
+          <button class="btn cal-btn" type="button" aria-label="previous month">
             <svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
           </button>
           <strong class="cal-month-name">June</strong>
@@ -305,7 +305,7 @@ body_class: ""
             <option value="November">November</option>
             <option value="December">December</option>
           </select>
-          <button class="btn cal-btn" type="button">
+          <button class="btn cal-btn" type="button" aria-label="next month">
             <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
           </button>
         </div>

diff --git a/site/content/docs/5.3/examples/footers/index.html b/site/content/docs/5.3/examples/footers/index.html
index b78d5aad8f8ed6df0af6808090b7831ed58c5b63..bb8b9c0b3998f88fc372eabef6065a2a3cd9c092 100644 (file)
--- a/site/content/docs/5.3/examples/footers/index.html
+++ b/site/content/docs/5.3/examples/footers/index.html
@@ -167,7 +167,7 @@ body_class: ""
           <p>Monthly digest of what's new and exciting from us.</p>
           <div class="d-flex flex-column flex-sm-row w-100 gap-2">
             <label for="newsletter1" class="visually-hidden">Email address</label>
-            <input id="newsletter1" type="text" class="form-control" placeholder="Email address">
+            <input id="newsletter1" type="email" class="form-control" placeholder="Email address">
             <button class="btn btn-primary" type="button">Subscribe</button>
           </div>
         </form>

diff --git a/site/content/docs/5.3/examples/modals/index.html b/site/content/docs/5.3/examples/modals/index.html
index c2c21c8fe5533e8c3120574f631366f1375aeb06..553bee51ac50ffcf0d3660a78803b0c2774bc0f7 100644 (file)
--- a/site/content/docs/5.3/examples/modals/index.html
+++ b/site/content/docs/5.3/examples/modals/index.html
@@ -34,7 +34,7 @@ body_class: ""
 </svg>
 
 <div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalSheet">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog">
     <div class="modal-content rounded-4 shadow">
       <div class="modal-header border-bottom-0">
         <h1 class="modal-title fs-5">Modal title</h1>
@@ -54,7 +54,7 @@ body_class: ""
 <div class="b-example-divider"></div>
 
 <div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalChoice">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog">
     <div class="modal-content rounded-3 shadow">
       <div class="modal-body p-4 text-center">
         <h5 class="mb-0">Enable this setting?</h5>
@@ -71,7 +71,7 @@ body_class: ""
 <div class="b-example-divider"></div>
 
 <div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalTour">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog">
     <div class="modal-content rounded-4 shadow">
       <div class="modal-body p-5">
         <h2 class="fw-bold mb-0">What's new</h2>
@@ -108,7 +108,7 @@ body_class: ""
 <div class="b-example-divider"></div>
 
 <div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalSignin">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog">
     <div class="modal-content rounded-4 shadow">
       <div class="modal-header p-5 pb-4 border-bottom-0">
         <h1 class="fw-bold mb-0 fs-2">Sign up for free</h1>