Changes to the Dynamic Modal

Feature Request
,
1

This is the Bootstrap Modal widget as created by Wappler

<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Changes for Accessibility:

  1. Add aria-hidden and aria-labelledby to the .modal div as in
<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1"  aria-hidden="true" aria-labelledby="modalTitle">
  1. Add an ID to .modal-title as in
<h5 class="modal-title" id="modalTitle">Modal title</h5>

Changes to Document Hierarchy:

  1. A modal dialog represents its own separate document/context, so the .modal-title should be an <h1>. Then add an .h5 to change the size of the font, as in
<h1 class="modal-title h5" id="modalTitle">Modal title</h1>

I may be pedantic, but the above should not be overlooked.

1 Like
2

Id should be dynamic also...