Menüs als aufklappbaren Baum darstellen?

[xwolfde]

Im FAU-Einrichtungen-Theme haben wir noch eine uralte (wohlweislich undokumentierte) Funktion eines Shortcodes

[organigram menu="hauptseite"]

Siehe z.B.
https://www.fau.de/fau/leitung-und-gremien/geschaeftsverteilungsplan-der-verwaltung/
http://zentral.tindu.rrze.uni-erlangen.de/shortcodes/shortcode-organigram/

Kann man diese Funktion ins Element-Plugin verschieben und in dem Zuge dann auch prüfen ob die Barrierefreiheit (ARIA-Attribite) und Druckbarkeit der Aufklappelemente korrekt ist?

[xwolfde]

Weitere Details:

Im Theme sind folgende Codes vorhanden:

1. Shortcode-Definition:
   https://github.com/RRZE-Webteam/FAU-Einrichtungen/blob/master/functions/shortcodes.php

add_shortcode('organigram', array($this, 'fau_organigram'));
...
function fau_organigram($atts, $content = null) {
		extract(shortcode_atts(
			array(
				"menu" => 'menu'
			), $atts));

		return wp_nav_menu(array('menu' => $menu, 'container' => false, 'menu_id' => 'organigram', 'menu_class' => 'organigram', 'echo' => 0));
	}

2. Das JavaScript zum Einfügen eines +/- Toggles:
   https://github.com/RRZE-Webteam/FAU-Einrichtungen/blob/master/src/js/main/main.js

 // Add toggle icons to organigram
    $('.organigram .has-sub').each(function () {
        $(this).prepend('<span class="toggle-icon"></span>');
        $(this).children('ul').hide();
    });

    $('.organigram .has-sub .toggle-icon').bind('click', function (event) {
        event.preventDefault();

        $(this).closest('.has-sub').toggleClass('active');
        $(this).closest('.has-sub').children('ul').slideToggle();
    });

3. Das CSS (SASS):
   https://github.com/RRZE-Webteam/FAU-Einrichtungen/blob/master/src/sass/structure/content/_organigramm.scss

.organigram {
	@include no-list;
	margin: var(--width-gutter-half) 0;
	
	ul, li {
		@include no-list;
	}
	
	ul {
		margin-bottom: var(--width-gutter-half);
		border-left: 2px solid var(--color-primary-ci-hell);
		margin-left: var(--width-gutter-half);
	}
	
	li {
		background: none;
		@include px2rem($font-size-large);
		margin-bottom: var(--width-gutter-half);
		margin-top: 5px;
		
		li {
			@include px2rem($font-size-base);
			padding-left: var(--width-gutter-half);
			margin-bottom: 0;
			
			li {
				@include px2rem($font-size-small);
			}
		}
	}
	
	a {
		@include defaultlinkstyle();
	}
	


	
	.toggle-icon {
		@extend .fa;
		@extend .fa-plus-square;
		color: var(--color-Text);
		margin-right: 5px;
		cursor: pointer;
	}
	
	.active > .toggle-icon {
		@extend .fa-minus-square;
	}
	
}

Bitte dies in das Elements Plugin übernehmen, so daß es aus dem Theme herausgenommen werden kann.
Dabei bitte den Shortcode-Befehl organigramm nur noch für abwärtscompataibiltät unterstützen und stattdessen einen Shortcode-Befehl wie z.B.
[fau-menutree menu="$MENUSLUG"]
einführen.

ggf. dann auch menu_class' => 'organigram' in menu_class' => 'rrze-elements-menutree'. ändern.

Die obige optische Darstellung (CSS) ist auch veraltet. Hier wäre eine richtige Menutree-Darstellung günstiger.
Ein entsprechendes Beispiel findet sich hier im Codepen: https://codepen.io/xwolfde/pen/BaEJyad