I need to remove an element from a jQuery Cycle2 slide as it is causing accessibility problems. This is the first slide in a slide show, with HTML content and so it is in the sentinel div.
A simple jQuery command like this does not work:
$( '.cycle-sentinel .cycle-search' ).destroy();
Even when I try using the cycle-initialized callback (admiteddly, I am not sure I am using that correctly). To make the page ADA compliant I need to be able to remove that form or make changes to some elements. Here is the relevant slide html:
<div class="cycle-slide cycle-sentinel" style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;">
<img src="image.jpg" width="100%" alt="alt" style="visibility: hidden;">
<div class="cycle-search" style="visibility: hidden;">
<!-- role="search" -->
<form method="get" class="searchform" action="#" style="visibility: hidden;">
<label for="s2" class="screen-reader-only" style="visibility: hidden;">Enter search term</label>
<input type="text" value="" class="homeform" placeholder=" ? Find information, services, agencies and more..." style="visibility: hidden;">
<button type="submit" class="home-search-button" style="visibility: hidden;">
<i class="fa fa-search" style="visibility: hidden;"></i><span class="screen-reader-only" style="visibility: hidden;">Search</span>
</button>
</form>
</div>
<script>
jQuery(function($) {
$("#s2").focus(function() {
$(".cycle-slideshow").cycle("pause");
});
$("#s2").focusout(function() {
$(".cycle-slideshow").cycle("resume");
});
$( '#mySlideshow' ).on( 'cycle-initialized', function( event, optionHash ) {
$( '.cycle-sentinel .cycle-search' ).destroy();
});
});
</script>
BTW, the accessibility problem is that the sentinel slide is repeated in the first slide and therefore I have two labels attached to the same id (using "for").
I found a solution, using the cycle2 settings. The sentinel slide is used to set slideshow height, but there are several options you can implement related to that. One is to use any slide in the slideshow as the sentinel. Since only my first slide had a form, I used the second slide, thus:
data-cycle-auto-height=0
For all the options see: http://jquery.malsup.com/cycle2/api/#auto-height. The form is only appearing once in the html, as required for accessibility.