Support Accessible Slick

Currently we are getting more requests that our sites need to comply with WCAG criteria and one of the most problematic features seems to be the sliders.

I noticed that there is an drop in replacement for Slick which has much better support for accessibility at https://github.com/Accessible360/accessible-slick.

The default Slick version seems to be last updated in 1.8.1 and the drop in replacement seems to be in active development.

I tested replacing the original Slick library in the module by installing the Accessible Slick to the same location and then adjusting the library paths like so:

js:
    /libraries/slick/slick/slick.min.js: { weight: -3, minified: true }
  css:
    base:
      /libraries/slick/slick/slick.min.css: {}
      /libraries/slick/slick/accessible-slick-theme.min.css: {}

This gave me 99% the same look as the original slider except for small color changes and the new pause button which needs positioning. Took me around ~2 hours to implement.

Could we add this as an option to the module?

I would suggest that we add the accessible version of Slick as a separate library to the module and when the Accessibility option is checked in the module settings it would load the different library JS files and also add the needed theme files or the accessible skin could be also added as an option to the module which you could select instead of the default one.

Remaining Tasks

• Write patch and reviews
• Followups with additional fixes:
  • 📌 [Accessible Slick] Prev/Next default styles don't produce visible buttons Needs review

Side issues

• Compatibility issues with arrows:
  Solutions: adjust CSS and HTML markups, likely slick.load.js as well.
  See: 📌 [Accessible Slick] Prev/Next default styles don't produce visible buttons Needs review
• Unwanted anonymous DIV causing two issues:
  1. broken styling:
     These are due to extra/ double slide markups → .
     This issue appears to be related to Slick 1.9.0 which is not currently supported by this module due to different default values treatments between versions.
     Solutions: Needs manual adjustments to the values as noted here:
     #3123787: [Slick 1.9.0] Fix ROWS setting default value & description (ROWS needs to be 0 instead of 1) / slick-slide has unnecessary wrappers →
     See also: #3220286: [Accessible Slick] Provide a check for breaking changes with Accessible Slick →
  2. no-longer advancing slides when thumbnail navigation clicked:
     Aside from the first, it appears to be a conscious decision to not support thumbnail navigation mentioned here, and also the removal of focusOnSelect option which triggers advancing slides here.
     Solutions: No available solution for now. Even at https://accessible360.github.io/accessible-slick/ as of this writing, the thumbnail navigation does nothing. Meaning the thumbnail navigation is no longer navigating slides. Hopefully this is just an overlook.