feat(a11y): ARIA labels, focus management, skip-nav, keyboard nav, contrast fix
All checks were successful
Deploy Feature Branch to Test / deploy (push) Successful in 23s
All checks were successful
Deploy Feature Branch to Test / deploy (push) Successful in 23s
Accessibility improvements per WCAG 2.1 AA: - Skip-to-content link (TA-1) - ARIA landmarks and roles for nav, main, sections, footer (TA-2) - Accordion keyboard navigation + aria-expanded (TA-3) - Lightbox focus trap + focus management + dialog role (TA-4) - Gallery grid items keyboard accessible (TA-5) - Improved alt texts for all images (TA-6) - Focus-visible styles for all interactive elements (TA-7) - Darker --stone color for WCAG AA contrast compliance (TA-8) Fix #18
This commit is contained in:
@@ -36,38 +36,104 @@ $(function () {
|
||||
var item = $(this).closest(".floor-item");
|
||||
var isOpen = item.hasClass("open");
|
||||
$(".floor-item").removeClass("open");
|
||||
$(".floor-header").attr("aria-expanded", "false");
|
||||
$(".floor-body").slideUp(300);
|
||||
if (!isOpen) {
|
||||
item.addClass("open");
|
||||
$(this).attr("aria-expanded", "true");
|
||||
item.find(".floor-body").slideDown(300);
|
||||
}
|
||||
});
|
||||
|
||||
// Accordion keyboard handler (Enter/Space)
|
||||
$(".floor-header").on("keydown", function (e) {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
$(this).trigger("click");
|
||||
}
|
||||
});
|
||||
|
||||
// Lightbox – track last focused element for focus return
|
||||
var lightboxTrigger = null;
|
||||
|
||||
function openLightbox(src) {
|
||||
lightboxTrigger = document.activeElement;
|
||||
$("#lightboxImg").attr("src", src).attr("alt", "");
|
||||
$("#lightbox").addClass("open");
|
||||
$("body").css("overflow", "hidden");
|
||||
// Set focus to close button
|
||||
setTimeout(function () {
|
||||
$("#lightboxClose").focus();
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function closeLightbox() {
|
||||
$("#lightbox").removeClass("open");
|
||||
$("body").css("overflow", "");
|
||||
// Return focus to trigger
|
||||
if (lightboxTrigger) {
|
||||
$(lightboxTrigger).focus();
|
||||
lightboxTrigger = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Lightbox – gallery grid items
|
||||
$(document).on("click", ".grid-item", function () {
|
||||
var src = $(this).data("img") || $(this).find("img").attr("src");
|
||||
$("#lightboxImg").attr("src", src);
|
||||
$("#lightbox").addClass("open");
|
||||
$("body").css("overflow", "hidden");
|
||||
openLightbox(src);
|
||||
});
|
||||
|
||||
// Lightbox – floor plan images in Raumaufteilung
|
||||
$(document).on("click", ".floor-plan img[data-img]", function () {
|
||||
var src = $(this).data("img");
|
||||
$("#lightboxImg").attr("src", src);
|
||||
$("#lightbox").addClass("open");
|
||||
$("body").css("overflow", "hidden");
|
||||
openLightbox(src);
|
||||
});
|
||||
$("#lightboxClose, #lightbox").on("click", function (e) {
|
||||
|
||||
// Lightbox close handlers
|
||||
$("#lightboxClose").on("click", function () {
|
||||
closeLightbox();
|
||||
});
|
||||
$("#lightbox").on("click", function (e) {
|
||||
if (e.target === this) {
|
||||
$("#lightbox").removeClass("open");
|
||||
$("body").css("overflow", "");
|
||||
closeLightbox();
|
||||
}
|
||||
});
|
||||
|
||||
// Escape key to close lightbox
|
||||
$(document).on("keydown", function (e) {
|
||||
if (e.key === "Escape") {
|
||||
$("#lightbox").removeClass("open");
|
||||
$("body").css("overflow", "");
|
||||
if (e.key === "Escape" && $("#lightbox").hasClass("open")) {
|
||||
closeLightbox();
|
||||
}
|
||||
});
|
||||
|
||||
// Focus trap for lightbox
|
||||
$("#lightbox").on("keydown", function (e) {
|
||||
if (e.key !== "Tab") return;
|
||||
|
||||
var focusable = $(this).find("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])").filter(":visible");
|
||||
if (focusable.length === 0) return;
|
||||
|
||||
var first = focusable[0];
|
||||
var last = focusable[focusable.length - 1];
|
||||
|
||||
if (e.shiftKey) {
|
||||
if (document.activeElement === first) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
}
|
||||
} else {
|
||||
if (document.activeElement === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Gallery keyboard handler (Enter/Space)
|
||||
$(document).on("keydown", ".grid-item", function (e) {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
$(this).trigger("click");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user