https://www.faehre.de/_assets/6020ad64298e304d8b844c8dc69c472e/JavaScript/Optional/accessability.js?1749043721

1let userAgent = window.navigator.userAgent;
2
3document.addEventListener("DOMContentLoaded", () => {
4    openSubmenusOnFocusWithin();
5    const colorSwitch = document.getElementById('colorSwitch');
6
7    if(document.getElementById('contrastToggle')) {
8        const contrastToggle = document.getElementById('contrastToggle');
9        contrastToggle.addEventListener('click', (e) => {
10            colorSwitch.checked = !colorSwitch.checked;
11            toggleAccessibleClass(colorSwitch)
12        });
13    }
14
15    const accessibleMode = getCookie('accessible_mode') === 'true';
16    if (accessibleMode || userAgent.includes("Eye-Able")) {
17        colorSwitch.checked = true;
18        document.body.classList.add('accessible');
19    } else {
20        colorSwitch.checked = false;
21        document.body.classList.remove('accessible');
22    }
23
24
25
26    document.addEventListener("keydown", (e) => {
27        this.handleFirstTab(e);
28        let mainNav = document.querySelector('#mainNav');
29        if ((e.keyCode || e.which) === 32 && e.target.closest('#navbtn') && !mainNav.classList.contains('is-active')) {
30            setTimeout(() => {
31                document.querySelector('#mainNav-list a').focus();
32            },500)
33        }
34        if ((e.keyCode || e.which) === 27) {
35            document.activeElement.classList.toggle('no-hover');
36            mainNav.classList.remove('is-active');
37            document.querySelector('#navbtn').classList.remove('is-active');
38        }
39
40        // if ((e.keyCode || e.which) === 13) {
41        //     let customClickEvent = new MouseEvent("click", {
42        //         "view": window,
43        //         "bubbles": true,
44        //         "cancelable": false
45        //     });
46        //
47        //     e.preventDefault();
48        //     document.activeElement.click()
49        // }
50    });
51
52    document.documentElement.addEventListener("focusout", function (event) {
53        if (event.target.closest('.no-hover')) {
54            event.target.closest('.no-hover').classList.remove('no-hover');
55        }
56    }, false);
57})
58
59/**
60 * detects keyboardnavigation and add a corresponding body class
61 * @param event
62 */
63function handleFirstTab(event) {
64    if (event.key === "Tab") {
65        document.body.classList.add("keyboard-navigation");
66        window.removeEventListener("keydown", handleFirstTab);
67        window.addEventListener("pointerdown", handleMouseInput);
68    }
69};
70
71/**
72 * switches to mouse / touch navigation
73 */
74function handleMouseInput() {
75    document.body.classList.remove("keyboard-navigation");
76    window.removeEventListener("pointerdown", handleMouseInput);
77    window.addEventListener("keydown", handleFirstTab);
78};
79
80// Funktion zum Setzen von Cookies
81function setCookie(name, value, days) {
82    const expires = new Date(Date.now() + days * 24 * 60 * 60 * 1000).toUTCString();
83    const hostname = window.location.hostname;
84
85    let domainAttr = '';
86    // Use domain attribute only if hostname is not localhost or IP address
87    if (
88        hostname !== 'localhost' &&
89        !/^\d{1,3}(\.\d{1,3}){3}$/.test(hostname) // Simple IPv4 check
90    ) {
91        const baseDomain = hostname.split('.').slice(-2).join('.');
92        domainAttr = `; domain=.${baseDomain}`;
93    }
94
95    document.cookie = `${name}=${value}; expires=${expires}; path=/${domainAttr}`;
96}
97
98// Funktion zum Lesen von Cookies
99function getCookie(name) {
100    const cookies = document.cookie.split(';');
101    for (let i = 0; i < cookies.length; i++) {
102        const cookie = cookies[i].trim().split('=');
103        if (cookie[0] === name) return cookie[1];
104    }
105    return null;
106}
107
108
109function toggleAccessibleClass(colorSwitch) {
110    if (colorSwitch.checked) {
111        document.body.classList.add('accessible');
112        setCookie('accessible_mode', true, 30);
113    } else {
114        document.body.classList.remove('accessible');
115        setCookie('accessible_mode', false, 30);
116    }
117}
118
119function openSubmenusOnFocusWithin() {
120    const mainmenus = document.querySelectorAll("#mainNav-list.base-level > div > a");
121    const submenus = document.querySelectorAll(".sub");
122    const mainNav = document.querySelector('#mainNav');
123

124    if(getBreakpoint('xs,sm,md,lg')) {
125        mainmenus.forEach((mainmenu) => {
126            mainmenu.addEventListener('focus', (e) => {
127               mainNav.classList.add('is-active');
128            })
129        })
130    }
131
132    submenus.forEach((submenu) => {
133        const links = submenu.querySelectorAll(".subnaviwrap a");
134
135        links.forEach((link) => {
136            link.addEventListener("focus", () => {
137                submenu.classList.add("is-open"); // Open submenu on focus
138            });
139        });
140
141        // Close submenu when focus leaves all its links
142        submenu.addEventListener("focusout", (event) => {
143            // Check if focus moved outside the submenu
144            if (!submenu.contains(event.relatedTarget)) {
145                submenu.classList.remove("is-open"); // Close submenu
146            }
147        });
148    });
149}