https://trnava-vuc.sk/wp-content/plugins/trnava_vuc/public/js/accessibility.js?ver=1.1.3.3620.1790241331

1jQuery(document).ready(function ($) {
2    const setupToggleAccessibility = () => {
3        document.querySelectorAll('.oxy-expand-collapse-icon').forEach((toggle, index) => {
4            const content = toggle.closest('.oxy-toggle')?.nextElementSibling;
5            if (!content) return;
6
7            toggle.setAttribute('role', 'button');
8            toggle.setAttribute('tabindex', '0');
9            toggle.setAttribute('aria-expanded', 'false');
10            toggle.setAttribute('aria-controls', content.id || `toggle-content-${index}`);
11            if (!content.id) content.id = `toggle-content-${index}`;
12
13            toggle.addEventListener('click', () => {
14                const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
15                toggle.setAttribute('aria-expanded', String(!isExpanded));
16                content.style.display = isExpanded ? 'none' : 'block';
17            });
18
19            toggle.addEventListener('keydown', (e) => {
20                if (e.key === 'Enter' || e.key === ' ') {
21                    e.preventDefault();
22                    toggle.click();
23                }
24            });
25        });
26    };
27
28    const setupDfButtons = () => {
29        document.querySelectorAll('.df-ui-btn').forEach((button) => {
30            button.setAttribute('role', 'button');
31            button.setAttribute('tabindex', '0');
32
33            button.addEventListener('keydown', (e) => {
34                if (e.key === 'Enter' || e.key === ' ') {
35                    e.preventDefault();
36                    button.click();
37                }
38            });
39        });
40    };
41
42    const setupOxyTabsAccessibility = () => {
43        document.querySelectorAll('.oxy-tabs-wrapper').forEach((wrapper, wrapperIndex) => {
44            const activeTabClass = wrapper.dataset.oxyTabsActiveTabClass;
45            if (!activeTabClass) return;
46
47            const tabs = wrapper.querySelectorAll('.oxy-tab');

48            tabs.forEach((tab, tabIndex) => {
49                tab.setAttribute('role', 'tab');
50                tab.setAttribute('tabindex', '0');
51                tab.setAttribute(
52                    'aria-selected',
53                    tab.classList.contains(activeTabClass).toString()
54                );
55
56                if (!tab.id) {
57                    tab.id = `oxy-tab-${wrapperIndex}-${tabIndex}`;
58                }
59
60                const contentWrapperId = wrapper.dataset.oxyTabsContentsWrapper;
61                if (contentWrapperId) {
62                    tab.setAttribute('aria-controls', tab.id + '-content');
63                }
64
65                tab.addEventListener('keydown', (e) => {
66                    if (e.key === 'Enter' || e.key === ' ') {
67                        e.preventDefault();
68                        tab.click();
69                    } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
70                        e.preventDefault();
71                        const nextTab = tabs[tabIndex + 1] || tabs[0];
72                        nextTab.focus();
73                    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
74                        e.preventDefault();
75                        const prevTab = tabs[tabIndex - 1] || tabs[tabs.length - 1];
76                        prevTab.focus();
77                    }
78                });
79
80                tab.addEventListener('click', () => {

81                    tabs.forEach((t) => t.setAttribute('aria-selected', (t === tab).toString()));
82                });
83            });
84        });
85    };
86
87    const initializeAccessibility = () => {
88        setupToggleAccessibility();
89        setupDfButtons();
90        setupOxyTabsAccessibility();
91    };
92
93    initializeAccessibility();
94    $(window).on('load', initializeAccessibility);
95
96    const observer = new MutationObserver((mutations) => {
97        const hasRelevantChanges = mutations.some(
98            (mutation) =>
99                mutation.addedNodes.length &&
100                Array.from(mutation.addedNodes).some(
101                    (node) =>
102                        node.nodeType === Node.ELEMENT_NODE &&
103                        (node.matches('.df-ui-btn, .oxy-tabs-wrapper') ||
104                            node.querySelector('.df-ui-btn, .oxy-tabs-wrapper'))
105                )
106        );
107
108        if (hasRelevantChanges) {
109            initializeAccessibility();
110        }
111    });
112
113    observer.observe(document.body, { childList: true, subtree: true });
114});