#8 switching from aria-disabled to HTML5 disabled, with documentation

Accessible360 · Sep 9, 2020 · 3d96575 · 3d96575
1 parent 68081a6
commit 3d96575
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 21 deletions.
diff --git a/README.markdown b/README.markdown
@@ -88,8 +88,8 @@ This package implements the following changes, all of which have been tested and
   </thead>
   <tbody>
     <tr valign="top">
-      <th scope="row" align="left"><a href="https://github.com/Accessible360/accessible-slick/issues/8">Previous and Next button markup</a> improved to no longer use <code>aria-label</code>, and to safely hide the icons from screen readers.</th>
-      <td>See the <a href="https://www.w3.org/TR/using-aria/#rule1">First Rule of ARIA Use</a>. Also, custom font icons are read out as "unrecognizable characters" by screen readers, so they need to be hidden from them.</td>
+      <th scope="row" align="left"><a href="https://github.com/Accessible360/accessible-slick/issues/8">Previous and Next button markup</a> improved to use less ARIA and to safely hide the icons from screen readers.</th>
+      <td>Per the <a href="https://www.w3.org/TR/using-aria/#rule1">First Rule of ARIA Use</a>, <code>aria-label</code> has been removed in favor of inner screen-reader-only text. Also, the HTML5 <code>disabled</code> is now used instead of <code>aria-disabled</code> for more consistency across all input modalities. Finally, the custom icons are attached to inner <code>span</code>s that are properly hidden from screen readers with <code>aria-hidden</code>.</td>
     </tr>
     <tr valign="top">
       <th scope="row" align="left">Tab markup is no longer used for <a href="https://github.com/Accessible360/accessible-slick/issues/10">slide dots</a> or <a href="https://github.com/Accessible360/accessible-slick/issues/9">slides</a>.</th>

diff --git a/slick/slick.js b/slick/slick.js
@@ -470,9 +470,6 @@
 
             if( _.slideCount > _.options.slidesToShow ) {
 
-                _.$prevArrow.removeClass('slick-hidden').removeAttr('aria-hidden tabindex');
-                _.$nextArrow.removeClass('slick-hidden').removeAttr('aria-hidden tabindex');
-
                 if (_.htmlExpr.test(_.options.prevArrow)) {
                     _.$prevArrow.prependTo(_.options.appendArrows);
                 }
@@ -484,19 +481,15 @@
                 if (_.options.infinite !== true) {
                     _.$prevArrow
                         .addClass('slick-disabled')
-                        .attr('aria-disabled', 'true');
+                        .prop('disabled', true);
                 }
 
             } else {
 
                 _.$prevArrow.add( _.$nextArrow )
 
                     .addClass('slick-hidden')
-                    .attr({
-                        'aria-disabled': 'true',
-                        'tabindex': '-1'
-                    });
-
+                    .prop('disabled', true);
             }
 
         }
@@ -901,7 +894,7 @@
 
             _.$prevArrow
                 .removeClass('slick-disabled slick-arrow slick-hidden')
-                .removeAttr('aria-hidden aria-disabled tabindex')
+                .prop('disabled', false)
                 .css('display','');
 
             if ( _.htmlExpr.test( _.options.prevArrow )) {
@@ -913,7 +906,7 @@
 
             _.$nextArrow
                 .removeClass('slick-disabled slick-arrow slick-hidden')
-                .removeAttr('aria-hidden aria-disabled tabindex')
+                .prop('disabled', false)
                 .css('display','');
 
             if ( _.htmlExpr.test( _.options.nextArrow )) {
@@ -2889,23 +2882,23 @@
             _.slideCount > _.options.slidesToShow &&
             !_.options.infinite ) {
 
-            _.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false');
-            _.$nextArrow.removeClass('slick-disabled').attr('aria-disabled', 'false');
+            _.$prevArrow.removeClass('slick-disabled').prop('disabled', false);
+            _.$nextArrow.removeClass('slick-disabled').prop('disabled', false);
 
             if (_.currentSlide === 0) {
 
-                _.$prevArrow.addClass('slick-disabled').attr('aria-disabled', 'true');
-                _.$nextArrow.removeClass('slick-disabled').attr('aria-disabled', 'false');
+                _.$prevArrow.addClass('slick-disabled').prop('disabled', true);
+                _.$nextArrow.removeClass('slick-disabled').prop('disabled', false);
 
             } else if (_.currentSlide >= _.slideCount - _.options.slidesToShow && _.options.centerMode === false) {
 
-                _.$nextArrow.addClass('slick-disabled').attr('aria-disabled', 'true');
-                _.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false');
+                _.$nextArrow.addClass('slick-disabled').prop('disabled', true);
+                _.$prevArrow.removeClass('slick-disabled').prop('disabled', false);
 
             } else if (_.currentSlide >= _.slideCount - 1 && _.options.centerMode === true) {
 
-                _.$nextArrow.addClass('slick-disabled').attr('aria-disabled', 'true');
-                _.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false');
+                _.$nextArrow.addClass('slick-disabled').prop('disabled', true);
+                _.$prevArrow.removeClass('slick-disabled').prop('disabled', false);
 
             }