fix: refactor breadcrumb partial to WAI-ARIA best-practice pattern

- Replace <div>+<i> structure with <nav aria-label>+<ol>+<li>
- Move separators from DOM to CSS pseudo-elements (li+li::before)
- Add hover/focus-visible states and color differentiation
- Replace hard-coded px values with design tokens
- Explicitly reset shell nav/ol/li rules for self-contained styling
- Add i18n key for breadcrumb nav landmark label

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-24 14:51:40 +01:00
parent 3c0821fcd7
commit 44620bd786
4 changed files with 96 additions and 34 deletions

View File

@@ -8,24 +8,25 @@ if (!$items) {
}
$lastIndex = count($items) - 1;
?>
<div class="app-breadcrumb">
<?php foreach ($items as $index => $item): ?>
<?php
$label = (string) ($item['label'] ?? '');
$href = (string) ($item['href'] ?? '');
$path = (string) ($item['path'] ?? '');
$isLast = $index === $lastIndex;
if ($href === '' && $path !== '') {
$href = lurl($path);
}
?>
<?php if ($href !== '' && !$isLast): ?>
<a href="<?php e($href); ?>"><?php e($label); ?></a>
<?php else: ?>
<span<?php if ($isLast): ?> aria-current="page"<?php endif; ?>><?php e($label); ?></span>
<?php endif; ?>
<?php if (!$isLast): ?>
<i class="bi bi-chevron-right"></i>
<?php endif; ?>
<?php endforeach; ?>
</div>
<nav class="app-breadcrumb" aria-label="<?php e(t('Breadcrumb')); ?>">
<ol>
<?php foreach ($items as $index => $item): ?>
<?php
$label = (string) ($item['label'] ?? '');
$href = (string) ($item['href'] ?? '');
$path = (string) ($item['path'] ?? '');
$isLast = $index === $lastIndex;
if ($href === '' && $path !== '') {
$href = lurl($path);
}
?>
<li>
<?php if ($href !== '' && !$isLast): ?>
<a href="<?php e($href); ?>"><?php e($label); ?></a>
<?php else: ?>
<span<?php if ($isLast): ?> aria-current="page"<?php endif; ?>><?php e($label); ?></span>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ol>
</nav>