[Update June 2022: This issue was fixed in Oxygen 4.0. Only use this script with earlier versions.]

Beschreibung

Wenn Sie das Element Repeater in Oxygen Builderwird es allen untergeordneten Elementen doppelte id-Attributwerte zuweisen.

Dies ist ein Verstoß gegen die WCAG 4.1.1, die besagt, dass Attribute eindeutig sein müssen. Es gibt gute Gründe für diese. Vor allem aber können doppelte IDs Probleme für unterstützende Technologien wie Bildschirmleser verursachen.

Dieser Fehler wurde gemeldet vor Jahren, aber Soflyy hat noch keine Lösung bereitgestellt. Es gibt mindestens zwei verschiedene Lösungen von Drittanbietern zur Verfügung. Beide entfernen das Attribut id vollständig, was möglicherweise nicht die von Ihnen gewünschte Lösung ist.

Dieses Codeschnipsel (Download-Link und Quellcode unten auf dieser Seite) verwendet einen geeigneten XML-Parser, um die HTML-Ausgabe des Builders zu filtern und jedem Knoten innerhalb des Repeaters eine inkrementelle id auf der Grundlage des ursprünglichen id-Attributs zu geben.

Also, stattdessen:

<div id="list" class="oxy-dynamic-list">
	<article id="item">
		<h2 id="headline">
			Erste Überschrift
		</h2>
		<p id="paragraph">
			Erster Absatz.
		</p>
	</article>
	<article id="item">
		<h2 id="headline">
			Zweite Überschrift
		</h2>
		<p id="paragraph">
			Zweiter Absatz.
		</p>
	</article>
</div>

Sie werden dies erhalten:

<div id="list" class="oxy-dynamic-list">
	<article id="item-1">
		<h2 id="headline-1">
			Erste Überschrift
		</h2>
		<p id="paragraph-1">
			Erster Absatz.
		</p>
	</article>
	<article id="item-2">
		<h2 id="headline-2">
			Zweite Überschrift
		</h2>
		<p id="paragraph-2">
			Zweiter Absatz.
		</p>
	</article>
</div>

Bitte beachten Sie, dass alle CSS-Stile, die Sie möglicherweise auf den ID-Selektor des ursprünglichen Elements angewendet haben, nicht mehr gelten. Kopieren Sie sie stattdessen in eine Klasse.

Herunterladen

Der Download ist eine JSON-Datei zur Verwendung mit dem Code-Schnipsel oder Erweiterte Skripte Plugin.

Datei herunterladen

Datei: oxygen-repeater-incremental-ids-1.0.3.code-snippets.json.zip
Version: 1.0.3 (2021-04-18)

Quellcode


add_filter( 'do_shortcode_tag', function ( $output, $tag, $attr ) { 
	
	if ( in_array($tag, ['oxy_dynamic_list_3']) ) {
		$query = '//*[@id]/*';
		$output = cl_rename_element_id($query, $output);
	}
	
	return $output;
	
}, 10, 3);

function cl_rename_element_id($query, $output) {
	
	$flag = libxml_use_internal_errors(true);
	
	$dom = new DOMDocument();
	$dom->loadHTML(mb_convert_encoding( $output, 'HTML-ENTITIES', 'UTF-8') );
	$xpath = new DOMXPath($dom);
	$elements = $xpath->query($query);
	
	if ( $elements->length > 0 ) {
		
		$counter = 1;
		$attribute = 'id';
		$repeater_id = $elements[0]->parentNode->getAttribute($attribute);
	
		foreach( $elements as $element ) {
		
			$parent_id = $element->parentNode->getAttribute($attribute);
		
			if ( $element->hasAttribute($attribute) ) {
				$new_id = $element->getAttribute($attribute) . '-' . ( ( $parent_id == $repeater_id ) ? $counter : ( $counter - 1 ) );
				$element->removeAttribute($attribute);
	    		$element->setAttribute($attribute, $new_id);
			}
		
			if ( $parent_id == $repeater_id ) $counter++;
		}
	
		$output = $dom->saveHTML();
		
	}
	
	libxml_clear_errors();
	libxml_use_internal_errors($flag);
	
	return $output;
}
Conlumina
Eine Boutique-Agentur für Webdesign und -entwicklung mit Schwerpunkt auf Benutzerfreundlichkeit, Ästhetik und Leistung.