mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 19:19:19 +02:00
refactor(nav): replace div+BEM classes with semantic ul/li in public nav
templates/nav.php: - Replace <div class="site-nav__links"> with <ul role="list"> + <li> children - Move À Propos link inside the list (was a loose sibling <a>) - Remove .site-nav__link and .site-nav__link--active classes from all <a> elements - Active state now driven solely by aria-current="page" (already present) public/assets/common.css: - Remove .site-nav__links, .site-nav__link, .site-nav__link:hover, .site-nav__link--active rules - Add .site-nav ul (flex, gap, list-style reset), .site-nav ul a, .site-nav ul a:hover - Active indicator: .site-nav ul a[aria-current="page"] — self-documenting, screen-reader-announced Fixes TODO section I (nav semantic HTML audit). All three BEM nav-link classes deleted; zero references remain in the codebase.
This commit is contained in:
2
TODO.md
2
TODO.md
@@ -566,7 +566,7 @@ The design does **not** need to change - only the vocabulary of the markup.
|
|||||||
|
|
||||||
### I - `templates/nav.php` & `templates/search-bar.php`
|
### I - `templates/nav.php` & `templates/search-bar.php`
|
||||||
|
|
||||||
- [ ] **`<div class="site-nav__links">`** wraps the centre nav links purely for flex grouping.
|
- [x] **`<div class="site-nav__links">`** wraps the centre nav links purely for flex grouping.
|
||||||
Replace with `<ul>` + `<li>` children (links inside a nav belong in a list - standard
|
Replace with `<ul>` + `<li>` children (links inside a nav belong in a list - standard
|
||||||
pattern). The `<a>` elements stay; CSS targets `nav ul` / `nav li` / `nav a` directly,
|
pattern). The `<a>` elements stay; CSS targets `nav ul` / `nav li` / `nav a` directly,
|
||||||
removing `.site-nav__links`, `.site-nav__link`, `.site-nav__right` classes entirely.
|
removing `.site-nav__links`, `.site-nav__link`, `.site-nav__right` classes entirely.
|
||||||
|
|||||||
@@ -69,13 +69,16 @@ a:hover {
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-nav__links {
|
.site-nav ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 3rem;
|
gap: 3rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-nav__link {
|
.site-nav ul a {
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
letter-spacing: 0.12em;
|
letter-spacing: 0.12em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@@ -85,11 +88,11 @@ a:hover {
|
|||||||
transition: opacity 0.15s;
|
transition: opacity 0.15s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-nav__link:hover {
|
.site-nav ul a:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-nav__link--active {
|
.site-nav ul a[aria-current="page"] {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
|
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
|
||||||
padding-bottom: 1px;
|
padding-bottom: 1px;
|
||||||
|
|||||||
@@ -6,15 +6,18 @@ $_navCurrent = $currentNav ?? '';
|
|||||||
?>
|
?>
|
||||||
<nav class="site-nav" aria-label="Navigation principale">
|
<nav class="site-nav" aria-label="Navigation principale">
|
||||||
<a class="site-nav__logo" href="/index.php">Posterg</a>
|
<a class="site-nav__logo" href="/index.php">Posterg</a>
|
||||||
<div class="site-nav__links">
|
<ul role="list">
|
||||||
<a class="site-nav__link <?= ($_navCurrent === 'repertoire') ? 'site-nav__link--active' : '' ?>"
|
<li>
|
||||||
href="/search.php"
|
<a href="/search.php"
|
||||||
<?= ($_navCurrent === 'repertoire') ? 'aria-current="page"' : '' ?>>Répertoire</a>
|
<?= ($_navCurrent === 'repertoire') ? 'aria-current="page"' : '' ?>>Répertoire</a>
|
||||||
<a class="site-nav__link <?= ($_navCurrent === 'licence') ? 'site-nav__link--active' : '' ?>"
|
</li>
|
||||||
href="/licence.php"
|
<li>
|
||||||
|
<a href="/licence.php"
|
||||||
<?= ($_navCurrent === 'licence') ? 'aria-current="page"' : '' ?>>Licence</a>
|
<?= ($_navCurrent === 'licence') ? 'aria-current="page"' : '' ?>>Licence</a>
|
||||||
</div>
|
</li>
|
||||||
<a class="site-nav__link <?= ($_navCurrent === 'apropos') ? 'site-nav__link--active' : '' ?>"
|
<li>
|
||||||
href="/apropos.php"
|
<a href="/apropos.php"
|
||||||
<?= ($_navCurrent === 'apropos') ? 'aria-current="page"' : '' ?>>À Propos</a>
|
<?= ($_navCurrent === 'apropos') ? 'aria-current="page"' : '' ?>>À Propos</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
Reference in New Issue
Block a user