From 4641ed254b672bfd616d3e75244b44f7f5578e0a Mon Sep 17 00:00:00 2001 From: Jason Webb Date: Tue, 3 Nov 2020 16:17:23 -0600 Subject: [PATCH] #14 Adding back in browser-default focus indicators in accessible-slick-theme, with documentation. --- README.markdown | 4 ++++ docs/index.html | 4 +++- slick/accessible-slick-theme.min.css | 2 +- slick/accessible-slick-theme.scss | 14 +++++++------- 4 files changed, 15 insertions(+), 9 deletions(-) diff --git a/README.markdown b/README.markdown index 6f4d0b73c..cacabb7b8 100644 --- a/README.markdown +++ b/README.markdown @@ -80,6 +80,10 @@ This package implements the following changes, all of which have been tested and The Previous and Next arrows can now be placed before, after, or on either side of the slides in the DOM to match the visual design. 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 (WCAG 1.3.2) and tab sequence (WCAG 2.4.3). Using the new arrowsPlacement setting, you can now control where the previous and next buttons are injected to better match the visual design! + + A more accessible CSS theme is now available with better focus styles and larger icons. + The original CSS theme (slick-theme.min.css) had very small icons and poor focus indicators. Now an alternative theme is available (accessible-slick-theme.min.css) with larger icons and browser-default focus indicators. To minimize risk of possible breaking styling changes, this theme is opt-in. Just update your <link> reference to use it! + diff --git a/docs/index.html b/docs/index.html index 35f142ea2..19ad44cf4 100644 --- a/docs/index.html +++ b/docs/index.html @@ -116,9 +116,11 @@

Features

  • Each slide has role="group" with a numbered aria-label.
  • Autoplay now automatically comes with a pause/play toggle button.
  • No more tab markup! Just simple, semantic elements like lists and buttons.
    • +
  • The accessibility setting has been deprecated since this package is accessible by default!
  • Keyboard navigation has been removed so that screen reader users don't have to fight their virtual cursor!
  • The Previous and Next buttons now use clean, semantic markup. Say goodbye to those aria-labels!
    • -
  • 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.
    • +
  • Screen-reader-only instructions can now be added to explain complex behaviors to screen reader users.
    • +
  • A new, more accessible theme is now available (accessible-slick-theme.min.css), which comes with bigger icons and better, browser-default focus indicators! It's used by all the demos below.

    • Read more about all of these features here!

    diff --git a/slick/accessible-slick-theme.min.css b/slick/accessible-slick-theme.min.css index 67dfb1199..6c5f7234e 100644 --- a/slick/accessible-slick-theme.min.css +++ b/slick/accessible-slick-theme.min.css @@ -1 +1 @@ -@charset "UTF-8";@font-face{font-family:slick;src:url(fonts/slick.eot);src:url(fonts/slick.eot?#iefix) format("embedded-opentype"),url(fonts/slick.woff) format("woff"),url(fonts/slick.ttf) format("truetype"),url(fonts/slick.svg#slick) format("svg");font-weight:400;font-style:normal}.slick-loading .slick-list{background:#fff url(ajax-loader.gif) center center no-repeat}.slick-next,.slick-prev{position:absolute;top:50%;display:block;padding:0;height:20px;width:20px;line-height:0;font-size:0;cursor:pointer;background:0 0;color:transparent;border:none;outline:0;transform:translate(0,-50%)}.slick-next:focus .slick-next-icon,.slick-next:focus .slick-prev-icon,.slick-next:hover .slick-next-icon,.slick-next:hover .slick-prev-icon,.slick-prev:focus .slick-next-icon,.slick-prev:focus .slick-prev-icon,.slick-prev:hover .slick-next-icon,.slick-prev:hover .slick-prev-icon{opacity:1}.slick-next:focus,.slick-prev:focus{top:calc(50% - 1px)}.slick-next:focus .slick-next-icon,.slick-next:focus .slick-prev-icon,.slick-prev:focus .slick-next-icon,.slick-prev:focus .slick-prev-icon{color:orange;font-size:28px;margin-left:-2px}.slick-next.slick-disabled,.slick-prev.slick-disabled{cursor:default}.slick-next.slick-disabled .slick-next-icon,.slick-next.slick-disabled .slick-prev-icon,.slick-prev.slick-disabled .slick-next-icon,.slick-prev.slick-disabled .slick-prev-icon{opacity:.25}.slick-next .slick-next-icon,.slick-next .slick-prev-icon,.slick-prev .slick-next-icon,.slick-prev .slick-prev-icon{color:#000;opacity:.75;font-family:slick;font-size:24px;line-height:1}.slick-prev{left:-25px}[dir=rtl] .slick-prev{left:auto;right:-25px}.slick-prev .slick-prev-icon:before{content:"←"}[dir=rtl] .slick-prev .slick-prev-icon:before{content:"→"}.slick-next{right:-25px}[dir=rtl] .slick-next{left:-25px;right:auto}.slick-next .slick-next-icon:before{content:"→"}[dir=rtl] .slick-next .slick-next-icon:before{content:"←"}.slick-slider{margin-bottom:30px}.slick-slider.slick-dotted{margin-bottom:60px}.slick-dots{position:absolute;bottom:-20px;display:block;padding:0;margin:0;width:100%;list-style:none;text-align:center}.slick-dots li{position:relative;display:inline-block;margin:0 7px;padding:0}.slick-dots li button{display:block;outline:0;line-height:0;font-size:0;color:transparent;border:0;background:0 0;cursor:pointer}.slick-dots li button:focus,.slick-dots li button:hover{outline:0}.slick-dots li button:focus .slick-dot-icon,.slick-dots li button:hover .slick-dot-icon{opacity:1}.slick-dots li button:focus .slick-dot-icon:before{color:orange}.slick-dots li button .slick-dot-icon{color:#000;opacity:.25}.slick-dots li button .slick-dot-icon:before{position:absolute;top:0;left:0;content:"•";font-family:slick;font-size:12px;line-height:1;text-align:center;transition:all .05s linear}.slick-dots li.slick-active button:focus .slick-dot-icon{color:orange;opacity:1}.slick-dots li.slick-active button .slick-dot-icon{color:#000;opacity:1}.slick-dots li.slick-active button .slick-dot-icon:before{margin-top:-3px;margin-left:-2px;font-size:18px}.slick-sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}.slick-autoplay-toggle-button{position:absolute;left:5px;bottom:-32px;z-index:10;opacity:.75;background:0 0;border:0;cursor:pointer;color:#000}.slick-autoplay-toggle-button:focus,.slick-autoplay-toggle-button:hover{outline:0;opacity:1}.slick-autoplay-toggle-button:focus{color:orange}.slick-autoplay-toggle-button .slick-pause-icon:before{content:"⏸";width:20px;height:20px;font-family:slick;font-size:18px;font-weight:400;line-height:20px;text-align:center}.slick-autoplay-toggle-button .slick-play-icon:before{content:"▶";width:20px;height:20px;font-family:slick;font-size:18px;font-weight:400;line-height:20px;text-align:center} \ No newline at end of file +@charset "UTF-8";@font-face{font-family:slick;src:url(fonts/slick.eot);src:url(fonts/slick.eot?#iefix) format("embedded-opentype"),url(fonts/slick.woff) format("woff"),url(fonts/slick.ttf) format("truetype"),url(fonts/slick.svg#slick) format("svg");font-weight:400;font-style:normal}.slick-loading .slick-list{background:#fff url(ajax-loader.gif) center center no-repeat}.slick-next,.slick-prev{position:absolute;top:50%;display:block;padding:0;height:20px;width:20px;line-height:0;font-size:0;cursor:pointer;background:0 0;color:transparent;border:none;transform:translate(0,-50%)}.slick-next:focus .slick-next-icon,.slick-next:focus .slick-prev-icon,.slick-next:hover .slick-next-icon,.slick-next:hover .slick-prev-icon,.slick-prev:focus .slick-next-icon,.slick-prev:focus .slick-prev-icon,.slick-prev:hover .slick-next-icon,.slick-prev:hover .slick-prev-icon{opacity:1}.slick-next:focus,.slick-prev:focus{top:calc(50% - 1px)}.slick-next:focus .slick-next-icon,.slick-next:focus .slick-prev-icon,.slick-prev:focus .slick-next-icon,.slick-prev:focus .slick-prev-icon{color:orange;font-size:28px;margin-left:-2px}.slick-next.slick-disabled,.slick-prev.slick-disabled{cursor:default}.slick-next.slick-disabled .slick-next-icon,.slick-next.slick-disabled .slick-prev-icon,.slick-prev.slick-disabled .slick-next-icon,.slick-prev.slick-disabled .slick-prev-icon{opacity:.25}.slick-next .slick-next-icon,.slick-next .slick-prev-icon,.slick-prev .slick-next-icon,.slick-prev .slick-prev-icon{display:block;color:#000;opacity:.75;font-family:slick;font-size:24px;line-height:1}.slick-prev{left:-25px}[dir=rtl] .slick-prev{left:auto;right:-25px}.slick-prev .slick-prev-icon:before{content:"←"}[dir=rtl] .slick-prev .slick-prev-icon:before{content:"→"}.slick-next{right:-25px}[dir=rtl] .slick-next{left:-25px;right:auto}.slick-next .slick-next-icon:before{content:"→"}[dir=rtl] .slick-next .slick-next-icon:before{content:"←"}.slick-slider{margin-bottom:30px}.slick-slider.slick-dotted{margin-bottom:60px}.slick-dots{position:absolute;bottom:-30px;display:block;padding:0;margin:0;width:100%;list-style:none;text-align:center}.slick-dots li{position:relative;display:inline-block;margin:0 5px;padding:0}.slick-dots li button{display:block;height:20px;width:20px;margin-top:-4px;margin-left:-4px;line-height:0;font-size:0;color:transparent;border:0;background:0 0;cursor:pointer}.slick-dots li button:focus .slick-dot-icon,.slick-dots li button:hover .slick-dot-icon{opacity:1}.slick-dots li button:focus .slick-dot-icon:before{color:orange}.slick-dots li button .slick-dot-icon{color:#000;opacity:.25}.slick-dots li button .slick-dot-icon:before{position:absolute;top:0;left:0;content:"•";font-family:slick;font-size:12px;line-height:1;text-align:center;transition:all .05s linear}.slick-dots li.slick-active button:focus .slick-dot-icon{color:orange;opacity:1}.slick-dots li.slick-active button .slick-dot-icon{color:#000;opacity:1}.slick-dots li.slick-active button .slick-dot-icon:before{margin-top:-3px;margin-left:-2px;font-size:18px}.slick-sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}.slick-autoplay-toggle-button{position:absolute;left:5px;bottom:-32px;z-index:10;opacity:.75;background:0 0;border:0;cursor:pointer;color:#000}.slick-autoplay-toggle-button:focus,.slick-autoplay-toggle-button:hover{opacity:1}.slick-autoplay-toggle-button:focus{color:orange}.slick-autoplay-toggle-button .slick-pause-icon:before{content:"⏸";width:20px;height:20px;font-family:slick;font-size:18px;font-weight:400;line-height:20px;text-align:center}.slick-autoplay-toggle-button .slick-play-icon:before{content:"▶";width:20px;height:20px;font-family:slick;font-size:18px;font-weight:400;line-height:20px;text-align:center} \ No newline at end of file diff --git a/slick/accessible-slick-theme.scss b/slick/accessible-slick-theme.scss index a5cb1b147..bb99aee10 100644 --- a/slick/accessible-slick-theme.scss +++ b/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; }