kantarciandClaude Opus 5
5d55a65c22
A button inside a summary is an interactive element in an interactive element; screen readers announce it unreliably. The handle keeps its look and its mouse, touch and arrow key behaviour. Also corrects the anchor hints and waits for the menu error in the admin check. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
30 lines
4.0 KiB
Twig
30 lines
4.0 KiB
Twig
<li class="menu-entry{{ row.level == 2 ? ' menu-child' : '' }}" data-level="{{ row.level }}">
|
|
<input type="hidden" data-key="position" name="items[{{ n }}][position]" value="{{ n }}">
|
|
<input type="hidden" data-key="level" name="items[{{ n }}][level]" value="{{ row.level }}">
|
|
<input type="hidden" data-key="type" name="items[{{ n }}][type]" value="{{ row.type }}">
|
|
{# Der Ziehknopf steht neben der Zusammenfassung, nicht in ihr: ein Knopf in einem Knopf ist
|
|
für Screenreader und Tastatur nicht bedienbar (axe: nested-interactive). #}
|
|
<button class="menu-drag-handle" type="button" data-menu-drag aria-label="{{ row.label }} verschieben" title="Ziehen · Pfeiltasten ändern Reihenfolge und Ebene"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" fill="currentColor"><circle cx="8" cy="5" r="1.6"/><circle cx="16" cy="5" r="1.6"/><circle cx="8" cy="12" r="1.6"/><circle cx="16" cy="12" r="1.6"/><circle cx="8" cy="19" r="1.6"/><circle cx="16" cy="19" r="1.6"/></svg></button>
|
|
<details>
|
|
<summary><strong class="menu-entry-title">{{ row.label }}</strong><span class="menu-entry-kind">{{ row.type == 'page' ? 'Seitenlink' : 'Eigener Link' }}</span><svg class="menu-chevron" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg></summary>
|
|
<div class="menu-entry-fields">
|
|
<label for="menu-label-{{ n }}">Beschriftung</label><input id="menu-label-{{ n }}" data-key="label" name="items[{{ n }}][label]" maxlength="80" required value="{{ row.label }}">
|
|
{% if row.type == 'page' %}
|
|
{% include 'admin/content-picker.html.twig' with {id: 'menu-target-' ~ n, name: 'items[' ~ n ~ '][pageId]', label: 'Verknüpfter Inhalt', selected: row.page} %}
|
|
<label for="menu-anchor-{{ n }}">Sprungziel (optional)</label><input id="menu-anchor-{{ n }}" data-key="anchor" name="items[{{ n }}][anchor]" maxlength="65" value="{{ row.anchor }}" placeholder="kontakt">
|
|
{% else %}
|
|
<label for="menu-url-{{ n }}">Adresse</label><div class="link-field" data-link-field><input id="menu-url-{{ n }}" data-key="url" data-link-input name="items[{{ n }}][url]" maxlength="2048" required value="{{ row.url }}" placeholder="https://… oder /kontakt"></div>
|
|
{% endif %}
|
|
<label class="check-label" for="menu-newTab-{{ n }}"><input id="menu-newTab-{{ n }}" type="checkbox" data-key="newTab" name="items[{{ n }}][newTab]" value="1"{{ row.newTab|default(false) ? ' checked' : '' }}> In neuem Tab öffnen</label>
|
|
<div class="menu-icon-fields"><div><label for="menu-icon-{{ n }}">Icon</label><select id="menu-icon-{{ n }}" data-key="icon" name="items[{{ n }}][icon]"><option value="">Kein Icon</option>{% for icon in menuIcons %}<option value="{{ icon }}"{{ row.icon|default('') == icon ? ' selected' : '' }}>{{ icon }}</option>{% endfor %}</select></div><div><label for="menu-iconPosition-{{ n }}">Icon-Position</label><select id="menu-iconPosition-{{ n }}" data-key="iconPosition" name="items[{{ n }}][iconPosition]"><option value="before"{{ row.iconPosition|default('before') == 'before' ? ' selected' : '' }}>Vor dem Text</option><option value="after"{{ row.iconPosition|default('before') == 'after' ? ' selected' : '' }}>Nach dem Text</option></select></div></div>
|
|
</div>
|
|
</details>
|
|
<div class="menu-entry-actions" role="group" aria-label="{{ row.label }} verschieben oder entfernen">
|
|
<button class="text-button" type="button" data-menu-action="up" aria-label="{{ row.label }} nach oben">↑</button>
|
|
<button class="text-button" type="button" data-menu-action="down" aria-label="{{ row.label }} nach unten">↓</button>
|
|
<button class="text-button" type="button" data-menu-action="indent">Als Unterpunkt</button>
|
|
<button class="text-button" type="button" data-menu-action="outdent">Hauptebene</button>
|
|
<button class="text-button danger-text" type="button" data-menu-action="remove">Entfernen</button>
|
|
</div>
|
|
</li>
|