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

frontend/app.js

@@ -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(); });

frontend/i18n.js

@@ -47,6 +47,7 @@ export const translations = {
 
         reviewsEyebrow: "Kundenmeinungen",
         reviewsTitle: "Erlebnisse, die bleiben.",
+        review: "Kundenmeinung",
 
         bookingEyebrow: "Jetzt buchen",
         bookingTitle: "Traumwagen unverbindlich anfragen.",
@@ -168,6 +169,7 @@ export const translations = {
 
         reviewsEyebrow: "Testimonials",
         reviewsTitle: "Experiences that last.",
+        review: "Review",
 
         bookingEyebrow: "Book now",
         bookingTitle: "Request your dream car without obligation.",

frontend/index.html

@@ -223,7 +223,7 @@
     </footer>
 
     <!-- Vehicle details dialog -->
-    <dialog id="carDialog">
+    <dialog id="carDialog" aria-labelledby="dialogTitle">
         <div class="dialog-head">
             <h3 id="dialogTitle" style="margin:0;"></h3>
             <button class="dialog-close" id="dialogClose" aria-label="Close">×</button>