https://www.uw.edu.pl/wp-content/themes/uw/library/js/wcag.js

1class Wcag {
2    body;
3    contrastButtonActiveClass = 'contrast-button--active';
4    contrastButton;
5    contrastCookieName = 'leafcon';
6
7    constructor() {
8        this.body = document.querySelector('body');
9        this.contrastButton = document.querySelector('.contrast-block__contrast-button');
10        this.initialize();
11    }
12
13    initialize() {
14        this.initializeBodyClasses();
15        this.initializeContrastButton();
16        this.initializeKeyboardMenu();
17        this.initializeAriaHiddenEmptyLinks();
18        this.initializeMiscFixes();
19        this.initializeSearchForm();
20    }
21
22    getCookieValue(name) {
23        return document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop() || '';
24    }
25
26    setCookieValue(name, value, days = 365) {
27        let expires = '';
28        if (days) {
29            let date = new Date();
30            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
31            expires = '; expires=' + date.toUTCString();
32        }
33        document.cookie = name + '=' + (value || '') + expires + '; path=/';
34    }
35
36    eraseCookie(name) {
37        document.cookie = name + '=; Max-Age=0; path=/;';
38    }
39
40    initializeBodyClasses() {
41        this.updateBodyContrastClass(this.getCookieValue(this.contrastCookieName) === '1');
42    }
43
44    updateBodyContrastClass(isContrast) {
45        if (isContrast) {
46            this.body.classList.add('body--contrast');
47            this.contrastButton.querySelector('span.visually-hidden').innerText = this.contrastButton.dataset.contrastOff;
48            this.contrastButton.classList.add(this.contrastButtonActiveClass);
49        } else {
50            this.body.classList.remove('body--contrast');
51            this.contrastButton.querySelector('span.visually-hidden').innerText = this.contrastButton.dataset.contrastOn;
52            this.contrastButton.classList.remove(this.contrastButtonActiveClass);
53        }
54    }
55
56    initializeContrastButton() {
57        let current = this;
58
59        this.contrastButton.addEventListener('click', function (e) {
60            e.preventDefault();
61
62            if (current.body.classList.contains('body--contrast')) {
63                current.eraseCookie(current.contrastCookieName);
64                current.updateBodyContrastClass(false);
65
66            } else {
67                current.body.classList.add('body--contrast');
68                current.setCookieValue(current.contrastCookieName, '1');
69                current.updateBodyContrastClass(true);
70            }
71        });
72    }
73
74    initializeKeyboardMenu() {
75        var menuItems = document.querySelectorAll('.menu li.parent');
76        Array.prototype.forEach.call(menuItems, function (el, i) {
77            el.querySelector('a').setAttribute('aria-expanded', "false");
78            // el.querySelector('div.submenu-container').setAttribute('aria-hidden', "true");
79            let childMenuLinks =   el.querySelectorAll('div.submenu-container a');
80            childMenuLinks.forEach(function (childMenuLink) {
81                // childMenuLink.setAttribute('aria-hidden', "true");
82            });
83
84            el.querySelector('div.submenu-container').style.visibility = 'hidden';
85            el.querySelector('a').addEventListener("click", function (event) {
86                if (this.parentNode.classList.contains('open-keyboard') == false) {
87                    this.parentNode.classList.add("open-keyboard");
88                    this.setAttribute('aria-expanded', "true");
89                    this.parentNode.querySelector('div.submenu-container').style.visibility = 'visible';
90                } else {
91                    this.parentNode.classList.remove("open-keyboard");
92                    this.setAttribute('aria-expanded', "false");
93                    this.parentNode.querySelector('div.submenu-container').style.visibility = 'hidden';
94                }
95                event.preventDefault();
96                return false;
97            });
98
99            // gdy najedziemy muszką na element menu to otwieramy menu dodając visibility: visible na div.submenu-container
100            el.addEventListener("mouseover", function (event) {
101                this.querySelector('div.submenu-container').style.visibility = 'visible';
102            });
103
104            // gdy zjeżdżamy z elementu menu to zamykamy menu dodając visibility: hidden n

104a div.submenu-container
105            el.addEventListener("mouseout", function (event) {
106                document.querySelector('li.menu-item.open-keyboard ')?.classList.remove("open-keyboard");
107                this.querySelector('div.submenu-container').style.visibility = 'hidden';
108            });
109
110        });
111    }
112
113    initializeAriaHiddenEmptyLinks() {
114        var emptyLinks = document.querySelectorAll('a[href=""],a[href="#"]');
115        Array.prototype.forEach.call(emptyLinks, function (el, i) {
116            // el.setAttribute('aria-hidden', "true");
117        });
118    }
119
120
121    initializeSearchForm() {
122        var searchForm = document.querySelector('#search-form');
123        var searchFormButton = searchForm.querySelector('.hover-search-form__submit');
124        var searchFormInput = searchForm.querySelector('.hover-search-form__input');
125        //akcja po kliknięciu w searhcFormButton
126        searchFormButton.addEventListener('click', function (e) {
127            if(this.type==='button') {
128                e.preventDefault();
129            }
130            searchForm.classList.toggle('hover-search-form--active', true);
131            this.querySelector('.visually-hidden').innerText = this.dataset.submitLabel;
132            this.type = 'submit';
133            // przenieś focus na searchFormInput
134            searchForm.querySelector('.hover-search-form__input').style.visibility = 'visible';
135            searchForm.querySelector('.hover-search-form__input').focus();
136        });
137
138        document.addEventListener('keydown', function (e) {
139            if (e.key === 'Escape') {
140                searchForm.classList.toggle('hover-search-form--active', false);
141                searchFormButton.querySelector('.visually-hidden').innerText = searchFormButton.dataset.buttonLabel;
142                searchFormButton.type = 'button';
143                searchFormInput.style.visibility = 'hidden';
144            }
145        });
146
147        //akcja po wciśnięciu Enter w searchFormInput
148        searchFormButton.addEventListener('keyup', function (e) {
149            if (e.key === "Enter") {
150                if(searchFormButton.type==='button') {
151                    searchFormButton.click();
152                }
153            }
154        });
155
156        // // akcja po wejściu z screenreadera w searchFormInput
157        // searchFormButton.addEventListener('focusin', function (e) {
158        //     console.log('button focusin');
159        //     searchFormButton.click();
160        // });
161
162        searchFormInput.addEventListener('focusout', function (e) {
163            if (e.relatedTarget !== searchFormButton) {
164                searchForm.classList.toggle('hover-search-form--active', false);
165                searchFormButton.querySelector('.visually-hidden').innerText = searchFormButton.dataset.buttonLabel;
166                searchFormButton.type = 'button';
167                searchFormInput.style.visibility = 'hidden';
168            }
169        });
170
171        document.addEventListener('keyup', function (e) {
172            if (e.key === "Escape" && searchForm.classList.contains('hover-search-form--active')) {
173                searchForm.classList.toggle('hover-search-form--active', false);
174                searchFormButton.querySelector('.visually-hidden').innerText = searchFormButton.dataset.buttonLabel;
175                searchFormButton.type = 'button';
176                searchFormInput.style.visibility = 'hidden';
177            }
178        });
179
180    }
181
182    initializeMiscFixes() {
183        // dodaj do .cli-modal-close atrybut aria-label="Zamknij"
184        // var cliModelClose = document.querySelectorAll('.cli-modal-close');
185        // Array.prototype.forEach.call(cliModelClose, function (el, i) {
186        //     el.setAttribute('aria-label', "Zamknij");
187        // });
188
189        // usuń atrybut title z linków, jeśli jest taki sam jak tekst linka
190        var allUrlsWithTitle = document.querySelectorAll('a[title]');
191        Array.prototype.forEach.call(allUrlsWithTitle, function (el, i) {
192            if (el.title === el.textContent) {
193                el.removeAttribute('title');
194            }
195        });
196
197        // // dla linków o powtarzającym się href ustaw atrybut aria-disabled="true"
198        // var allUrls = document.querySelectorAll('a');
199        // var allUrlsArray = Array.prototype.slice.call(allUrls);
200        // var allUrlsArrayHref = allUrlsArray.map(function (el) {
201        //     return el.getAttribute('href');
202        // });
203        // var allUrlsArrayHrefUnique = allUrlsArrayHref.filter(function (value, index, self) {
204        //     return self.indexOf(value) === index;
205        // });
206        // allUrlsArrayHrefUnique.forEach(function (href) {

207        //     var allUrlsWithHref = document.querySelectorAll('a[href="' + href + '"]');
208        //     if (allUrlsWithHref.length > 1) {
209        //         Array.prototype.forEach.call(allUrlsWithHref, function (el, i) {
210        //             el.setAttribute('aria-disabled', "true");
211        //             el.setAttribute('role', "presentation");
212        //         });
213        //     }
214        // });
215    }
216
217}
218
219function initializeWcag() {
220    const wcag = new Wcag();
221}
222
223if (document.readyState === 'loading') {
224    document.addEventListener('DOMContentLoaded', initializeWcag);
225} else {
226    initializeWcag();
227}