#8 moving prev/next icons to inner elements w/ aria-hidden, moving ar…

…ia-label to inner text
Accessible360 · Aug 17, 2020 · ea64d24 · ea64d24
1 parent 9764882
commit ea64d24
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 25 deletions.
diff --git a/slick/slick-theme.scss b/slick/slick-theme.scss
@@ -78,25 +78,35 @@ $slick-opacity-not-active: 0.25 !default;
     padding: 0;
     border: none;
     outline: none;
+
     &:hover, &:focus {
-        outline: none;
-        background: transparent;
-        color: transparent;
-        &:before {
-            opacity: $slick-opacity-on-hover;
+        .slick-prev-icon, .slick-next-icon {
+            &:before {
+                opacity: $slick-opacity-on-hover;
+            }
         }
     }
-    &.slick-disabled:before {
-        opacity: $slick-opacity-not-active;
+
+    &.slick-disabled {
+        cursor: default;
+
+        .slick-prev-icon, .slick-next-icon {
+            &:before {
+                opacity: $slick-opacity-not-active;
+            }
+        }
     }
-    &:before {
-        font-family: $slick-font-family;
-        font-size: 20px;
-        line-height: 1;
-        color: $slick-arrow-color;
-        opacity: $slick-opacity-default;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
+
+    .slick-prev-icon, .slick-next-icon {
+        &:before {
+            font-family: $slick-font-family;
+            font-size: 20px;
+            line-height: 1;
+            color: $slick-arrow-color;
+            opacity: $slick-opacity-default;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
     }
 }
 
@@ -106,10 +116,13 @@ $slick-opacity-not-active: 0.25 !default;
         left: auto;
         right: -25px;
     }
-    &:before {
-        content: $slick-prev-character;
-        [dir="rtl"] & {
-            content: $slick-next-character;
+
+    .slick-prev-icon {
+        &:before {
+            content: $slick-prev-character;
+            [dir="rtl"] & {
+                content: $slick-next-character;
+            }
         }
     }
 }
@@ -120,10 +133,13 @@ $slick-opacity-not-active: 0.25 !default;
         left: -25px;
         right: auto;
     }
-    &:before {
-        content: $slick-next-character;
-        [dir="rtl"] & {
-            content: $slick-prev-character;
+
+    .slick-next-icon {
+        &:before {
+            content: $slick-next-character;
+            [dir="rtl"] & {
+                content: $slick-prev-character;
+            }
         }
     }
 }
@@ -192,3 +208,20 @@ $slick-opacity-not-active: 0.25 !default;
         }
     }
 }
+
+/**
+ Improved .sr-only class by ffoodd: https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034
+ */
+.slick-sr-only {
+	border: 0 !important;
+	clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
+	-webkit-clip-path: inset(50%) !important;
+		clip-path: inset(50%) !important;  /* 2 */
+	height: 1px !important;
+	margin: -1px !important;
+	overflow: hidden !important;
+	padding: 0 !important;
+	position: absolute !important;
+	width: 1px !important;
+	white-space: nowrap !important;            /* 3 */
+}
diff --git a/slick/slick.js b/slick/slick.js
@@ -44,8 +44,8 @@
                 appendDots: $(element),
                 arrows: true,
                 asNavFor: null,
-                prevArrow: '<button class="slick-prev" aria-label="Previous" type="button">Previous</button>',
-                nextArrow: '<button class="slick-next" aria-label="Next" type="button">Next</button>',
+                prevArrow: '<button class="slick-prev" type="button"><span class="slick-prev-icon" aria-hidden="true"></span><span class="slick-sr-only">Previous</span></button>',
+                nextArrow: '<button class="slick-next" type="button"><span class="slick-next-icon" aria-hidden="true"></span><span class="slick-sr-only">Next</span></button>',
                 autoplay: false,
                 autoplaySpeed: 3000,
                 centerMode: false,