Improve the slide dot markup and behavior

[Jason Webb]

The most important change that needs to be made is that all tab-related markup and behaviors needs to be removed, since carousels do not visually resemble tabs at all and therefore would not be expected to function that way by real sighted keyboard and screen reader users.

Wrapper and structural elements

• Remove role="tablist" from the wrapper <ul>.
• Remove role="presentation" from the <li>s.

Each slide dot button

• Remove role="tab" from each slide dot button.
• Remove aria-controls from each slide dot button.
• Remove tabindex from each button, since a roving tabindex is not appropriate for carousels.
• Remove aria-selected from the active slide dot button.
• Add aria-current="true" to the button that is currently "active".
• Move the icon to an inner DOM element so that it can be hidden from screen readers using aria-hidden="true".
• Wrap the inner text in a <span> and apply CSS to make it visible to screen readers only.
• Update the inner text of each button to use the format "Go to slide [x]" to make it more clear that these are actionable controls, not slides in themselves.
• Remove the aria-label from each slide dot button once the above changes are made, since the inner text will act as a more robust accessible name (see the First Rule of ARIA Use).

Documentation

• Add note about feature change in the main README

---

Currently the buttons and their wrapper list are marked up like so:

<ul class="slide-dots" role="tablist">
  <li class="slick-active" role="presentation">
    <button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 6" tabindex="0" aria-selected="true">
      :before
      1
    </button>
  </li>
  <li role="presentation">
    <button type="button" role="tab" id="slick-slide-control01" aria-controls="slick-slide02" aria-label="2 of 6" tabindex="-1">
      :before
      2
    </button>
  </li>
  ...
</ul>

When what we really want is:

<ul class="slide-dots">
  <li class="slick-active">
    <button type="button" id="slick-slide-control00" aria-current="true">
      <span class="slide-dot-icon" aria-hidden="true"></span>
      <span class="slick-sr-only">Go to slide 1 of 6</span>
    </button>
  </li>
  <li>
    <button type="button" id="slick-slide-control01">
      <span class="slide-dot-icon" aria-hidden="true"></span>
      <span class="slick-sr-only">Go to slide 2 of 6</span>
    </button>
  </li>
  ...
</ul>