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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user