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>
This commit is contained in:
Christian Oliff 2024-07-19 13:45:42 +09:00 committed by GitHub
parent 7f8fed44fd
commit 74891cb3a6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 9 additions and 9 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>