SELF-Wiki: zugängliches Dropdown-Menü

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

function dropdownExtension () {
	const submenus = document.querySelectorAll('nav li > ul');
	console.log(submenus)

Das sollte wohl raus.

    submenus.forEach(function (submenu) {

Ist eine einfache Schleife for(let submenu of submenus) nicht besser lesbar als forEach mit Funktion darin? (Und wenn man schon letzteres macht, bietet sich eine Pfeilfunktion an.)

      submenu.classList.add('geändert');
	  let button = document.createElement('button');

Nicht let, sondern const. Das gilt auch für die nachfolgenden.

	  button.setAttribute('aria-expanded','false')
	  let span   = document.createElement('span');
      let myText = document.createTextNode('Untermenü aufklappen');
      span.appendChild(myText);
	  span.classList.add('visually-hidden');
	  button.appendChild(span);
      submenu.before(button);
    });
}

Anstatt alle Element-, Attribut- und Textknoten einzeln zu generieren und in den Baum zu hängen, was aufwendig, schlecht lesbar und auch wenig performant ist, bietet sich an, das in einem Rutsch mit insertAdjacentHTML() zu machen:

submenu.insertAdjacentHTML('beforebegin', `
  <button aria-expanded="false">
    <span class="visually-hidden">Untermenü aufklappen</span>
  </button>
`);

Ja, viel besser!

Herzliche Grüße

Matthias Scharwies