Lago/mc_cars_gmbh_infraestructure
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: accessibility improvements (aria-labels, roles, semantic dialog)

Browse Source
This commit is contained in:
Lago
2026-04-18 00:05:11 +02:00
parent ac8f1a8d9b
commit 6f5cf6c42c
3 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app.js
+6 -6
View File
@@ -92,11 +92,11 @@ function renderGrid() {
const card = document.createElement("article");
card.className = "vehicle-card";
card.innerHTML = `
<div class="vehicle-photo" style="background-image:url('${escapeAttr(v.photo_url)}');">
<span class="badge">${escapeHtml(v.brand)}</span>
<div class="vehicle-photo" role="img" aria-label="${escapeAttr(v.brand)} ${escapeAttr(v.model)}" style="background-image:url('${escapeAttr(v.photo_url)}');">
<span class="badge" aria-hidden="true">${escapeHtml(v.brand)}</span>
</div>
<div class="vehicle-body">
<p class="model-brand">${escapeHtml(v.brand)}</p>
<p class="model-brand" aria-hidden="true">${escapeHtml(v.brand)}</p>
<h3>${escapeHtml(v.model)}</h3>
<div class="spec-row">
<div><strong>${v.power_hp}</strong><span>${t("hp")}</span></div>
@@ -106,8 +106,8 @@ function renderGrid() {
<div class="vehicle-footer">
<div class="vehicle-price">€ ${v.daily_price_eur}<span> / ${t("perDay")}</span></div>
<div style="display:flex;gap:0.4rem;">
<button class="btn ghost small" data-details="${v.id}">${t("details")}</button>
<button class="btn small" data-book="${v.id}">${t("book")}</button>
<button class="btn ghost small" data-details="${v.id}" aria-label="${t("details")} ${escapeAttr(v.brand)} ${escapeAttr(v.model)}">${t("details")}</button>
<button class="btn small" data-book="${v.id}" aria-label="${t("book")} ${escapeAttr(v.brand)} ${escapeAttr(v.model)}">${t("book")}</button>
</div>
</div>
</div>
@@ -164,7 +164,7 @@ function renderReviews() {
<p class="review-author">${escapeHtml(r.author)}</p>
`;
reviewDots.innerHTML = list.map((_, i) =>
`<button class="${i === state.reviewIdx ? 'active' : ''}" data-rev="${i}"></button>`
`<button class="${i === state.reviewIdx ? 'active' : ''}" data-rev="${i}" aria-label="${t("review")} ${i + 1}"></button>`
).join("");
reviewDots.querySelectorAll("button").forEach(b => {
b.addEventListener("click", () => { state.reviewIdx = +b.dataset.rev; renderReviews(); });