https://hematon.nl/wp-content/themes/kadence-child/wcag-fix/wcag-carousel-slide-labels.js?ver=1.0.0

1document.addEventListener('DOMContentLoaded', function () {
2	var observerTimeout;
3
4	function isBrokenLabel(label) {
5		return (
6			!label ||
7			label.indexOf('%1$s') !== -1 ||
8			label.indexOf('%2$s') !== -1 ||
9			label.trim() === ''
10		);
11	}
12
13	function getSlideTitle(slide) {
14		var titleEl = slide.querySelector('.entry-title');
15		return titleEl ? titleEl.textContent.trim() : '';
16	}
17
18	function fixBrokenSplideAriaLabels(scope) {
19		var root = scope || document;
20		var sliders = root.querySelectorAll('.splide, .kt-blocks-post-slider');
21
22		sliders.forEach(function (slider) {
23			var realSlides = Array.from(
24				slider.querySelectorAll('.splide__slide:not(.splide__slide--clone)')
25			);
26
27			if (!realSlides.length) return;
28
29			var total = realSlides.length;
30			var titleMap = {};
31
32			realSlides.forEach(function (slide, index) {
33				var titleText = getSlideTitle(slide);
34				titleMap[index] = titleText;
35
36				var label = 'Dia ' + (index + 1) + ' van ' + total;
37
38				if (titleText) {
39					label += ': ' + titleText;
40				}
41
42				if (isBrokenLabel(slide.getAttribute('aria-label'))) {
43					slide.setAttribute('aria-label', label);
44				}
45			});
46
47			var allSlides = Array.from(slider.querySelectorAll('.splide__slide'));
48
49			allSlides.forEach(function (slide) {
50				var currentLabel = slide.getAttribute('aria-label') || '';
51
52				if (!isBrokenLabel(currentLabel)) return;
53
54				var titleText = getSlideTitle(slide);
55				var matchingIndex = realSlides.findIndex(function (realSlide) {
56					return getSlideTitle(realSlide) === titleText;
57				});
58
59				if (matchingIndex === -1) {
60					matchingIndex = 0;
61				}
62
63				var label = 'Dia ' + (matchingIndex + 1) + ' van ' + total;
64
65				if (titleText || titleMap[matchingIndex]) {
66					label += ': ' + (titleText || titleMap[matchingIndex]);
67				}
68
69				slide.setAttribute('aria-label', label);
70			});
71		});
72	}
73
74	function fixSplidePagination(scope) {
75		var root = scope || document;
76
77		root.querySelectorAll('.splide__pagination').forEach(function (pagination) {
78			if (pagination.getAttribute('aria-label') !== 'Selecteer een dia om te tonen') {
79				pagination.setAttribute('aria-label', 'Selecteer een dia om te tonen');
80			}
81
82			var buttons = pagination.querySelectorAll('.splide__pagination__page');
83
84			buttons.forEach(function (button, index) {
85				var label = 'Ga naar dia ' + (index + 1);
86
87				if (button.classList.contains('is-active')) {
88					label = 'Huidige dia, ga naar dia ' + (index + 1);
89				}
90
91				if (button.getAttribute('aria-label') !== label) {
92					button.setAttribute('aria-label', label);
93				}
94			});
95		});
96	}
97
98	function runSplideAccessibilityFixes() {
99		fixBrokenSplideAriaLabels(document);
100		fixSplidePagination(document);
101	}
102
103	runSplideAccessibilityFixes();
104
105	var observer = new MutationObserver(function (mutations) {
106		var shouldRun = false;
107
108		mutations.forEach(function (mutation) {
109			if (mutation.type === 'childList' && mutation.addedNodes.length) {
110				shouldRun = true;
111			}
112		});
113
114		if (!shouldRun) return;
115
116		clearTimeout(observerTimeout);
117
118		observerTimeout = setTimeout(function () {
119			runSplideAccessibilityFixes();
120		}, 100);
121	});
122
123	observer.observe(document.body, {
124		childList: true,
125		subtree: true
126	});
127});