https://ontarioonecall.ca/wp-content/plugins/smart-slider-accessibility/assets/js/script.js?ver=1.0.2

1jQuery(document).ready(function ($) {
2
3    const targetArea = $('.n2-section-smartslider'); // Replace with your actual class selector
4    let isInside = false; // Track whether the user is inside the area
5
6    const autoplayWidget = $('.n2-ss-widget.nextend-autoplay');
7    let autoplayPaused = false;
8
9    const slides = targetArea.find('.n2-slide');
10
11    const bulletPagerItems = $('.n2-bullet');
12
13    // TODO: is this causing unusual behaviour?
14    // Ensure focus stays on the clicked bullet
15    /*
16    bulletPagerItems.on('click', function () {
17        const $this = $(this);
18
19        // Use setTimeout to ensure focus logic runs after the slide transition
20        setTimeout(() => {
21            $this.focus(); // Keep focus on the selected bullet
22        }, 600);
23    });
24    */
25
26    // Add keyboard support for bullet navigation
27    bulletPagerItems.on('keydown', function (e) {
28        if (e.key === 'Enter' || e.key === ' ') {
29            e.preventDefault();
30            $(this).click();
31        }
32    });
33
34    // Add role and aria attributes to the carousel container
35    targetArea.attr({
36        'role': 'region',
37        'aria-roledescription': 'carousel',
38        'aria-label': 'Content showcase'
39    });
40
41    // Apply roles and attributes to each slide container
42    slides.each(function (index) {
43        const $slide = $(this);
44        $slide.attr({
45            'role': 'group',
46            'aria-roledescription': 'slide',
47            'aria-label': `Content panel ${index + 1}`,
48            // 'aria-hidden': 'true'
49        });
50    });
51
52    // Update aria-hidden state based on visibility
53    /*
54    function updateSlideVisibility() {
55        slides.each(function (index) {
56            const $slide = $(this);
57            if ($slide.is(':visible')) {
58                $slide.attr('aria-hidden', 'false');
59            } else {
60                $slide.attr('aria-hidden', 'true');
61            }
62        });
63    }
64    */
65
66    // Listen to events that might change slide visibility
67    // targetArea.on('slideChange', updateSlideVisibility);
68
69    // Update visibility on load and when the slide changes
70    // updateSlideVisibility();
71
72    // Pause autoplay on hover or focus
73    function pauseAutoplay() {
74        if (!autoplayPaused) {
75            autoplayWidget.click();
76            autoplayPaused = true;
77        }
78    }
79
80    // Resume autoplay on mouse leave or blur
81    function resumeAutoplay() {
82        if (autoplayPaused) {
83            autoplayWidget.click();
84            autoplayPaused = false;
85        }
86    }
87
88    // Function to handle when user enters the area
89    function handleEnter() {
90        if (!isInside) {
91            isInside = true;
92            pauseAutoplay();
93        }
94    }
95
96    // Function to handle when user leaves the area
97    function handleLeave() {
98        if (isInside) {
99            isInside = false;

100            resumeAutoplay();
101        }
102    }
103
104    // Mouse events: Track mouse entry and exit
105    // targetArea.on('mouseenter', handleEnter);
106    // targetArea.on('mouseleave', handleLeave);
107
108    // Keyboard events: Detect focus moving in and out
109    targetArea.on('focusin', handleEnter);  // Fires when any child element gains focus
110    targetArea.on('focusout', function (e) {
111        // Check if the focus is moving outside of the target area
112        if (!targetArea.has(e.relatedTarget).length) {
113            handleLeave();
114        }
115    });
116
117    setTimeout(function() {
118        const bulletBar = $('.nextend-bullet-bar');
119        const bulletItems = bulletBar.children('div');
120
121        bulletBar.attr('role', 'list');
122        bulletItems.each(function () {
123            $(this).attr('role', 'listitem');
124        });
125    }, 600);
126
127    // Enhance all bullet buttons
128    $('.n2-bullet').each(function (index) {
129        const $bullet = $(this);
130
131        // Ensure role and tabindex are correctly set
132        if (!$bullet.attr('role')) {
133            $bullet.attr('role', 'button');
134        }
135        if (!$bullet.attr('tabindex')) {
136            $bullet.attr('tabindex', '0');
137        }
138
139        // Add aria-label dynamically if missing
140        if (!$bullet.attr('aria-label')) {
141            $bullet.attr('aria-label', `Navigate to slide ${index + 1}`);
142        }
143
144        // Add aria-current to the active bullet
145        if ($bullet.hasClass('n2-active')) {
146            $bullet.attr('aria-current', 'true');
147        } else {
148            $bullet.removeAttr('aria-current');
149        }
150
151        // Handle keyboard navigation
152        $bullet.on('keydown', function (e) {
153            if (e.key === 'Enter' || e.key === ' ') {
154                e.preventDefault();
155                $bullet.click(); // Trigger click for navigation
156            }
157        });
158
159        // Manage state updates on click
160        $bullet.on('click', function () {
161            $('.n2-bullet').removeClass('n2-active').removeAttr('aria-current');
162            $bullet.addClass('n2-active').attr('aria-current', 'true');
163        });
164    });
165});