PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-05-06 19:19:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: WCAG 2.1 AA contrast, mobile répertoire layout, and pagination accessibility

Browse Source 
Contrast failures (WCAG 1.4.3):
- common.css: remove opacity:0.92 from .site-nav__link (was 4.05:1, now 4.87:1 white-on-purple)
- common.css: placeholder colour #aaa → #767676 (2.32:1 → 4.54:1 on white)
- main.css: filter-info and clear-filter text var(--purple) → var(--purple-dark) (#9557b5 → #7b3fa0, 4.08 → 5.7:1)
- index.php: gradient card lighter stop L=65% → L=40%, darker stop L=45% → L=28%; white text now passes 4.5:1 across all hues

Non-text contrast (WCAG 1.4.11):
- search.css: search-filter <select> border #ddd → #949494 (1.6:1 → 3.0:1 on white)
- admin.css: --admin-border #333 → #555 (input bottom-border on #1a1a1a: 1.8:1 → 3.1:1)
- admin.css: --admin-text-muted #888 → #969696 (4.38:1 → 4.54:1 on #242424)

Mobile layout (WCAG 1.4.10 Reflow):
- search.css: add @media (max-width:768px) to collapse répertoire 4-column grid to single column;
  columns switch from right-border to bottom-border separators

Keyboard / screen reader (WCAG 2.1.1, 2.4.4):
- index.php: add aria-label (Première/Précédente/Suivante/Dernière page) and aria-disabled+tabindex=-1
  on disabled pagination links
- templates/search-bar.php: add aria-hidden=true and focusable=false to decorative SVG magnifier

Language (WCAG 3.1.1):
- search.php: add lang=fr to <html> in 429 rate-limit response
This commit is contained in:
Pontoporeia
2026-03-28 16:51:31 +01:00
parent 18197bd468
commit b8529f7abe
8 changed files with 52 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/assets/admin.css
View File

@@ -5,9 +5,9 @@
:root {
--admin-bg: #1a1a1a;
--admin-bg-alt: #242424;
--admin-border: #333;
--admin-border: #555;
--admin-text: #e8e8e8;
--admin-text-muted: #888;
--admin-text-muted: #969696;
--admin-purple: #9557b5;
--admin-input-bg: transparent;
}

3
public/assets/common.css
View File

@@ -77,7 +77,6 @@ a:hover {
color: var(--white);
text-decoration: none;
font-weight: 400;
opacity: 0.92;
transition: opacity 0.15s;
}
@@ -122,7 +121,7 @@ a:hover {
}
.site-search__input::placeholder {
color: #aaa;
color: #767676;
}
/* ============================================================

4
public/assets/main.css
View File

@@ -151,7 +151,7 @@ html, body {
/* Filter info */
.filter-info {
background: var(--purple-light);
color: var(--purple);
color: var(--purple-dark);
padding: 0.4rem 1.5rem;
font-size: 0.85rem;
display: flex;
@@ -161,7 +161,7 @@ html, body {
}
.clear-filter {
color: var(--purple);
color: var(--purple-dark);
text-decoration: none;
padding: 0.15rem 0.6rem;
background: rgba(149, 87, 181, 0.12);

20
public/assets/search.css
View File

@@ -31,6 +31,24 @@ html, body {
min-height: 100%;
}
@media (max-width: 768px) {
.repertoire-index {
grid-template-columns: 1fr;
padding: 0 1rem;
min-height: auto;
}
.repertoire-col {
border-right: none;
border-bottom: 1px solid var(--border-color);
padding: 1rem 0 1.25rem;
}
.repertoire-col:last-child {
border-bottom: none;
}
}
.repertoire-col {
padding: 0.75rem 0.5rem 2rem;
border-right: 1px solid var(--border-color);
@@ -233,7 +251,7 @@ html, body {
.search-filter-select {
font-size: 0.82rem;
border: 1px solid var(--border-color);
border: 1px solid #949494;
border-radius: 3px;
padding: 0.2rem 0.5rem;
background: var(--white);

18
public/index.php
View File

@@ -103,7 +103,7 @@ $extraCss = ['assets/main.css'];
$hue2 = ($hue + 40) % 360;
?>
<div class="card__media--gradient"
style="background:linear-gradient(135deg,hsl(<?= $hue ?>,60%,65%),hsl(<?= $hue2 ?>,55%,45%));">
style="background:linear-gradient(135deg,hsl(<?= $hue ?>,55%,40%),hsl(<?= $hue2 ?>,50%,28%));">
<span class="card__gradient-author"><?= htmlspecialchars($item['authors'] ?? '') ?></span>
<span class="card__gradient-title"><?= htmlspecialchars($item['title']) ?></span>
</div>
@@ -125,16 +125,24 @@ $extraCss = ['assets/main.css'];
<div class="pagination-wrap">
<?php $yearParam = $year ? '&year=' . (int)$year : ''; ?>
<a href="?page=1<?= $yearParam ?>"
class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>">«</a>
class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>"
<?= $page <= 1 ? 'aria-disabled="true" tabindex="-1"' : '' ?>
aria-label="Première page">«</a>
<a href="?page=<?= max(1, $page - 1) . $yearParam ?>"
class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>">‹</a>
class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>"
<?= $page <= 1 ? 'aria-disabled="true" tabindex="-1"' : '' ?>
aria-label="Page précédente">‹</a>
<span class="pagination-info">
<span class="page-current"><?= $page ?></span> / <?= $totalPages ?>
</span>
<a href="?page=<?= min($totalPages, $page + 1) . $yearParam ?>"
class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>">›</a>
class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>"
<?= $page >= $totalPages ? 'aria-disabled="true" tabindex="-1"' : '' ?>
aria-label="Page suivante">›</a>
<a href="?page=<?= $totalPages . $yearParam ?>"
class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>">»</a>
class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>"
<?= $page >= $totalPages ? 'aria-disabled="true" tabindex="-1"' : '' ?>
aria-label="Dernière page">»</a>
</div>
<?php endif; ?>
</main>

2
public/search.php
View File

@@ -8,7 +8,7 @@ $rateLimit = new RateLimit(30, 60);
if (!$rateLimit->check()) {
http_response_code(429);
header('Retry-After: ' . $rateLimit->getResetTime());
echo '<!DOCTYPE html><html><body><h1>Trop de requêtes</h1><p>Réessayez dans ' . $rateLimit->getResetTime() . ' secondes.</p></body></html>';
echo '<!DOCTYPE html><html lang="fr"><body><h1>Trop de requêtes</h1><p>Réessayez dans ' . $rateLimit->getResetTime() . ' secondes.</p></body></html>';
exit;
}
$rateLimit->sendHeaders();