https://www.redconcesionariosmazda.com/ormauto/wp-content/themes/mazdaesp/js/accesibility.js

1function accesibleNav(navList, menuAria){
2    navList.forEach(nav => {
3        const ul = nav.querySelector('ul');
4        const lisItems = ul.querySelectorAll('li');
5        const links = ul.querySelectorAll('a');
6
7        nav.setAttribute('aria-label', menuAria);
8        ul.setAttribute('role', 'menubar');
9
10        lisItems.forEach(item => {
11            item.setAttribute('role', 'none');
12
13            const hasSubmenu = item.classList.contains('menu-item-has-children');
14
15            if(hasSubmenu){
16                const submenu = item.querySelector('ul.sub-menu');
17                accesibleSubmenu(submenu);
18            }
19        });
20
21        links.forEach(item => {
22            
23            if(!item.getAttribute('href')){
24                const textContent = item.textContent
25                const button = document.createElement('button');
26                button.setAttribute('role', 'menuitem');
27                button.setAttribute('aria-haspopup', 'true');
28                button.setAttribute('aria-expanded', 'false');
29                button.setAttribute('aria-controls', textContent.toLowerCase());
30                button.setAttribute('id', textContent.split(' ').join('-').toLowerCase());
31                button.textContent = textContent;
32                item.replaceWith(button);
33
34            }
35            else{
36                item.setAttribute('role', 'menuitem');
37            }
38        });
39    })
40};
41
42function accesibleSubmenu(submenu){
43    submenu.setAttribute('role', 'group');
44    const lisItems = submenu.querySelectorAll('li');
45    const links = submenu.querySelectorAll('a');
46
47    lisItems.forEach(item => {
48        item.setAttribute('role', 'none');
49    });
50
51    links.forEach(item => {
52            
53        item.setAttribute('role', 'menuitem');
54    });
55};
56
57function accesibleForms() {
58    const form = document.querySelector("form.forminator-custom-form");
59
60    if (!form) return;
61
62    const container = form.closest('.forminator-formularios--container');
63    const allRows = container?.querySelectorAll('.row') || [];
64
65    // Crear fieldset
66    const fieldset = document.createElement("fieldset");
67
68    // Si hay más de una row, se asume que la primera es encabezado
69    const headerRow = allRows.length > 1 ? allRows[0] : null;
70
71    if (headerRow && !headerRow.contains(form)) {
72        fieldset.appendChild(headerRow);
73    }
74
75    // Mover todos los hijos actuales del form al fieldset
76    while (form.firstChild) {
77        fieldset.appendChild(form.firstChild);
78    }
79
80    // Insertar el fieldset en el form
81    form.appendChild(fieldset);
82
83    // Accesibilidad: reemplazar heading por legend
84    if (headerRow) {
85        const uppercaseDiv = headerRow.querySelector('.tt-uppercase');
86        const secondDiv = uppercaseDiv?.nextElementSibling;
87
88        if (uppercaseDiv) {
89            const legend = document.createElement('legend');
90            legend.className = uppercaseDiv.className;
91            legend.innerHTML = uppercaseDiv.innerHTML;
92            uppercaseDiv.replaceWith(legend);
93        }
94
95        if (secondDiv?.tagName === 'DIV') {
96            const paragraph = document.createElement('p');
97            paragraph.className = secondDiv.className;
98            paragraph.innerHTML = secondDiv.innerHTML;
99            secondDiv.replaceWith(paragraph);
100        }
101    }
102}
103
104
105
106function formFieldHtmlAriaHidden(){
107    const hiddenField = document.querySelector('#html-3')
108
109    if(hiddenField){
110        hiddenField.setAttribute('aria-hidden', 'true');
111    }
112};
113
114function accesibleLabels(){
115    const labels = document.querySelectorAll('label');
116    if(labels.length ){
117
118            labels.forEach(label => {
119                if(label.classList.contains('forminator-label') && getComputedStyle(label).display === 'none'){
120                label.style.display = 'initial!important';
121                label.classList.add('sr-only');
122            
123                }
124            });
125    }
126    
127};
128
129const mainNavs = document.querySelectorAll('nav.menu-container-navegacion');
130const footerNavs = document.querySelectorAll('nav.menu-container-footer_legales');
131
132accesibleNav(mainNavs, 'Menú principal');
133accesibleNav(footerNavs, 'Menú inferior enlaces legales');
134
135accesibleForms();

136formFieldHtmlAriaHidden();
137accesibleLabels();