2

I have a select element inside of the modal used in Bootstrap. When the screen reader (Jaws), reads the select box when it loads it reads through all the options inside of the select. Instead it should read it the way it does on a regular page, "Combo Box (option value) can be changed using the up and down arrow keys". If I tab into the select element, it reads it the way its supposed to.

Bootstrap modal: http://getbootstrap.com/docs/3.3/javascript/#modals-examples

I am currently using Jaws 18 and IE 11 to test

codepen: https://codepen.io/thecssguru/pen/BmvobW

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="0" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Jaws Test</h4>
      </div>
      <div class="modal-body">
        <p> The list should not read all the values
</p>
<select>
  <option>January 10, 2017</option>
  <option>January 11, 2017</option>
  <option>January 12, 2017</option>
  <option>January 13, 2017</option>
  <option>January 14, 2017</option>
  <option>January 15, 2017</option>
</select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

0 Answers0