Accessibility: init and afterChange events running before accessibility functionality is added

[robhowells]

Background

There are a few instances where I need to alter the accessibility attributes added to the slider when the accessibility option is set to true.

1. aria-label - I'm using the customPaging option to display button text in the pagination buttons (see fiddle). To meet accessibility requirements, I need to either alter the aria labels that get automatically added (e.g. 1 of 3) to match this text, or remove the aria labels

2. tabIndex - the tabIndex of the active slide gets set to 0, adding that slide to the tab order. When a slide contains a list of elements, these elements all get read aloud when using some assistive technologies. To meet accessibility requirements I need to remove the tabIndex on the slides and focus on the first item 'focusable' item in the side instead.

https://jsfiddle.net/cns1h0Lb/8/

====================================================================

Issue

I was planning on utilising the init and afterChange events to modify the aria-label and tabIndex. However it appears that the function where these attributes are added in slick.js (Slick.prototype.initADA) is invoked after the init and afterChange triggers are set e.g.

// line 1313 of https://github.com/kenwheeler/slick/blob/master/slick/slick.js
if (creation) {
   _.$slider.trigger('init', [_]);
}

if (_.options.accessibility === true) {
  _.initADA();
}

This means that further functionality gets added after init and afterChange have be triggered.

====================================================================

Proposed solution / feature request

• Could these triggers be modified to run after the accessibility attributes have been added? So the slider is completely initialised first?
• Alternatively, could an additional event be made available that is triggered once any additional accessibility functionality is complete? E.g. accessibleReady?

Either would allow someone to hook into these attributes and alter them as needed.

[bobort]

I'm having an issue similar to yours where the arrows have the slick-disabled class added to them after the afterChange event is called. I was trying to manipulate those arrows after the slide finished animating. It seems that our problems could be resolved by a simple fix: trigger the afterChange event at the end of the postSlide function rather than at the beginning as is currently the case.