<?php if(have_rows('testimonials')): ?>
<div class="relative w-full omni-slider grid gap-5" data-allow-keyboard-nav="true"
data-allow-mouse-nav="true"
data-nav="true"
data-auto-scroll-interval="10000"
data-build-nav-on-scroll="true"
data-nav-position="below"
data-nav-back-forward="true"
data-nav-container-class="flex justify-center items-center gap-2 py-2"
data-nav-button-container-class="flex justify-center items-center gap-2 py-2"
data-nav-back-class="cursor-pointer border-0 px-2 py-1 mx-2 bg-gray-100 rounded hover:bg-gray-200 transition-all duration-200"
data-nav-forward-class="cursor-pointer border-0 px-2 py-1 mx-2 bg-gray-100 rounded hover:bg-gray-200 transition-all duration-200"
data-nav-item-class="cursor-pointer transition-all duration-200"
data-nav-dot-class="transition-all border-0 duration-200 w-3 h-3 rounded-full bg-gray-300 hover:bg-gray-500 hover:scale-110 [&[aria-selected='true']]:bg-gray-600 [&[aria-selected='true']]:scale-110 cursor-pointer"
data-nav-text-class="px-3 py-1 bg-gray-100 rounded hover:bg-gray-200 [&.current-slide]:bg-gray-300">
<!-- Added role and aria-label -->
<ul
class="omni-slide-container flex flex-nowrap gap-3 sm:gap-8 overflow-x-auto snap-x snap-mandatory [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
role="region"
aria-label="Testimonials slider. Use left and right arrow keys to navigate between testimonials."
aria-live="polite"
tabindex="0"
>
<?php
$testimonialCount = 0;
while(have_rows('testimonials')): the_row();
$testimonialCount++;
?>
<!-- Added role, aria-label and tabindex -->
<li
class="omni-slide snap-center flex-none w-[85%] sm:w-7/10 p-10 bg-white rounded-3xl flex items-center justify-center first:ml-[7.5%] last:mr-[7.5%] sm:first:ml-[15%] sm:last:mr-[15%]"
role="group"
aria-label="Testimonial <?php echo $testimonialCount; ?>"
tabindex="0"
>
<?php
$content = get_sub_field('testimonial');
$author = get_sub_field('testimonial_name');
?>
<div class="grid gap-6 place-items-center">
<!-- Added aria-hidden for decorative SVG -->
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 32 32" xml:space="preserve">
<g>
<path fill="#828282" d="M16,32c8.822,0,16-7.178,16-16S24.822,0,16,0S0,7.178,0,16S7.178,32,16,32z M16,1c8.271,0,15,6.729,15,15 s-6.729,15-15,15S1,24.271,1,16S7.729,1,16,1z"></path>
<path fill="#828282" d="M10.734,13.646c0.507,0.165,1.034,0.089,1.531-0.222c0.233-0.146,0.305-0.455,0.158-0.689 c-0.146-0.233-0.454-0.305-0.689-0.158c-0.241,0.15-0.473,0.188-0.688,0.119c-0.229-0.075-0.445-0.268-0.626-0.558 c-0.162-0.258-0.214-0.564-0.146-0.861c0.069-0.298,0.249-0.55,0.508-0.712c0.618-0.39,1.422-0.167,1.943,0.224 C13.606,11.448,14,12.594,14,14.5c0,2.814-1.28,6.313-3.727,7.554c-0.246,0.125-0.345,0.426-0.22,0.673 C10.143,22.9,10.318,23,10.5,23c0.076,0,0.153-0.018,0.227-0.054C13.662,21.457,15,17.523,15,14.5c0-2.222-0.532-3.655-1.675-4.512 c-0.952-0.717-2.188-0.824-3.073-0.271c-0.485,0.303-0.823,0.777-0.951,1.335c-0.129,0.558-0.032,1.132,0.271,1.616 C9.879,13.158,10.28,13.496,10.734,13.646z"></path>
<path fill="#828282" d="M18.734,13.646c0.506,0.165,1.034,0.089,1.531-0.222c0.233-0.146,0.305-0.455,0.158-0.689 c-0.146-0.233-0.454-0.305-0.689-0.158c-0.24,0.15-0.473,0.188-0.688,0.119c-0.229-0.075-0.445-0.268-0.626-0.558 c-0.162-0.258-0.214-0.564-0.146-0.861c0.069-0.298,0.249-0.55,0.508-0.712c0.619-0.39,1.423-0.167,1.943,0.224 C21.606,11.448,22,12.594,22,14.5c0,2.814-1.28,6.313-3.727,7.554c-0.246,0.125-0.345,0.426-0.22,0.673 C18.143,22.9,18.318,23,18.5,23c0.076,0,0.153-0.018,0.227-0.054C21.662,21.457,23,17.523,23,14.5c0-2.222-0.532-3.655-1.675-4.512 c-0.952-0.717-2.188-0.824-3.073-0.271c-0.485,0.303-0.823,0.777-0.951,1.335c-0.129,0.558-0.032,1.132,0.271,1.616 C17.879,13.158,18.28,13.496,18.734,13.646z"></path>
</g>
</svg>
<!-- Added proper semantic structure with blockquote -->
<blockquote class="m-0">
<p class="line-clamp-20 font-poppins text-sm text-gray-700"><?php echo esc_html($content); ?></p>
<footer class="font-gloock mt-4 text-lg font-bold justify-self-end">
<cite><?php echo esc_html($author); ?></cite>
</footer>
</blockquote>
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
<?php endif; ?>
