#14 Adding back in browser-default focus indicators in accessible-sli…

…ck-theme, with documentation.

README.markdown

@@ -80,6 +80,10 @@ This package implements the following changes, all of which have been tested and
       <th scope="row" align="left">The <a href="https://github.com/Accessible360/accessible-slick/issues/20">Previous and Next arrows can now be placed</a> before, after, or on either side of the slides in the DOM to match the visual design.</th>
       <td>Designers can get really creative with sliders sometimes, making it difficult to ensure that all of the controls and slide contents are in a logical order in the page's DOM (<a href="https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence.html">WCAG 1.3.2</a>) and tab sequence (<a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html">WCAG 2.4.3</a>). Using the new <a href="#new-features-"><code>arrowsPlacement</code> setting</a>, you can now control where the previous and next buttons are injected to better match the visual design!</td>
     </tr>
+    <tr valign="top">
+      <th scope="row" align="left">A more accessible CSS theme is now available with better focus styles and larger icons.</th>
+      <td>The original CSS theme (<code>slick-theme.min.css</code>) had very small icons and poor focus indicators. Now an alternative theme is available (<code>accessible-slick-theme.min.css</code>) with larger icons and browser-default focus indicators. To minimize risk of possible breaking styling changes, this theme is <b>opt-in</b>. Just update your <code>&lt;link&gt;</code> reference to use it!</td>
+    </tr>
   </tbody>
 </table>
 

docs/index.html

@@ -116,9 +116,11 @@ <h2 id="features" tabindex="-1">Features</h2>
           <li>Each slide has <code>role="group"</code> with a numbered <code>aria-label</code>.</li>
           <li>Autoplay now automatically comes with a pause/play toggle button.</li>
           <li>No more tab markup! Just simple, semantic elements like lists and buttons.</li>
+          <li>The <code>accessibility</code> setting has been deprecated since this package is accessible by default!</li>
           <li>Keyboard navigation has been removed so that screen reader users don't have to fight their virtual cursor!</li>
           <li>The Previous and Next buttons now use clean, semantic markup. Say goodbye to those <code>aria-label</code>s!</li>
-          <li>A new, optional theme is now available, which has been optimized for accessibility with bigger icons, better focus indicators, and more! All of the sliders on this page use it.</li>
+          <li>Screen-reader-only instructions can now be added to explain complex behaviors to screen reader users.</li>
+          <li>A new, more accessible theme is now available (<code>accessible-slick-theme.min.css</code>), which comes with bigger icons and better, browser-default focus indicators! It's used by all the demos below.</li>
         </ul>
 
         <p><a href="https://github.com/Accessible360/accessible-slick#what-makes-this-accessible">Read more about all of these features here!</a></p>

slick/accessible-slick-theme.scss

@@ -87,7 +87,6 @@ $slick-opacity-not-active: 0.25 !default;
   background: transparent;
   color: transparent;
   border: none;
-  outline: none;
 
   transform: translate(0, -50%);
 
@@ -124,6 +123,7 @@ $slick-opacity-not-active: 0.25 !default;
   // Inner icons
   .slick-prev-icon,
   .slick-next-icon {
+    display: block;
     color: $slick-arrow-color;
     opacity: $slick-opacity-default;
     font-family: $slick-font-family;
@@ -185,7 +185,7 @@ $slick-opacity-not-active: 0.25 !default;
 
 .slick-dots {
   position: absolute;
-  bottom: -20px;
+  bottom: -30px;
 
   display: block;
   padding: 0;
@@ -198,13 +198,16 @@ $slick-opacity-not-active: 0.25 !default;
   li {
     position: relative;
     display: inline-block;
-    margin: 0 7px;
+    margin: 0 5px;
     padding: 0;
 
     button {
       display: block;
+      height: 20px;
+      width: 20px;
+      margin-top: -4px;
+      margin-left: -4px;
 
-      outline: none;
       line-height: 0px;
       font-size: 0px;
       color: transparent;
@@ -215,8 +218,6 @@ $slick-opacity-not-active: 0.25 !default;
       // Hover and focus states
       &:hover,
       &:focus {
-        outline: none;
-
         .slick-dot-icon {
           opacity: $slick-opacity-active;
         }
@@ -307,7 +308,6 @@ $slick-opacity-not-active: 0.25 !default;
   color: $slick-arrow-color;
 
   &:hover, &:focus {
-    outline: none;
     opacity: $slick-opacity-active;
   }