custom/plugins/theme/src/Resources/views/storefront/layout/header/accessibility-fix.html.twig line 1

Open in your IDE?
  1. {# Temporary accessibility fix for carousel navigation #}
  2. <script>
  3.     (function() {
  4.         function fixCarouselAccessibility() {
  5.             // Fix role for div elements with aria-label
  6.             const elements = document.querySelectorAll('.tns-controls[aria-label], .base-slider-controls[aria-label]');
  7.             elements.forEach(el => {
  8.                 if (!el.hasAttribute('role')) {
  9.                     el.setAttribute('role', 'group');
  10.                 }
  11.             });
  12.             
  13.             // Fix missing labels for navigation buttons
  14.             const prevButtons = document.querySelectorAll('.base-slider-controls-prev, .tns-prev');
  15.             prevButtons.forEach(button => {
  16.                 if (!button.hasAttribute('aria-label') && !button.textContent.trim()) {
  17.                     button.setAttribute('aria-label', 'Vorheriges Bild');
  18.                 }
  19.             });
  20.             
  21.             const nextButtons = document.querySelectorAll('.base-slider-controls-next, .tns-next');
  22.             nextButtons.forEach(button => {
  23.                 if (!button.hasAttribute('aria-label') && !button.textContent.trim()) {
  24.                     button.setAttribute('aria-label', 'Nächstes Bild');
  25.                 }
  26.             });
  27.             
  28.             // Fix Clerk wishlist buttons without labels
  29.             const clerkWishlistButtons = document.querySelectorAll('div.clerk-slider-content button.product-card__wishlist-btn');
  30.             clerkWishlistButtons.forEach(button => {
  31.                 if (!button.hasAttribute('aria-label') && !button.textContent.trim() && !button.hasAttribute('title')) {
  32.                     button.setAttribute('aria-label', 'Zur Wunschliste hinzufügen');
  33.                 }
  34.             });
  35.         }
  36.         
  37.         // Run on page load
  38.         document.addEventListener('DOMContentLoaded', fixCarouselAccessibility);
  39.         
  40.         // Run on dynamic content changes
  41.         const observer = new MutationObserver(fixCarouselAccessibility);
  42.         observer.observe(document.body, { childList: true, subtree: true });
  43.     })();
  44. </script>