Untitled
unknown
plain_text
5 months ago
1.8 kB
5
Indexable
import { gsap } from "gsap"; import { tns } from "tiny-slider/src/tiny-slider"; import { curtainEffect, fadeInUpTween } from '../utils/animations'; const quoteblockElement = ".bx-quote-block"; class QuoteBlock { // Constructor and other methods remain unchanged /** * Handle Dot Nav Click * * @description handle dot nav click and keyboard interaction for screen readers. */ handleDotNacheckActivelick() { this.dotNavLinks.forEach((dotLink, index) => { dotLink.addEventListener("click", event => { event.preventDefault(); this.carousel.goTo(index); this.contentCarousel.goTo(index); this.focusActiveSlide(index); }); dotLink.addEventListener("keydown", event => { // Check if 'Enter' key is pressed if (event.key === "Enter") { event.preventDefault(); this.carousel.goTo(index); this.contentCarousel.goTo(index); this.focusActiveSlide(index); } }); }); } /** * Focus the active slide's section * * @description Shift focus to the active slide's section to assist screen readers. * * @param {number} index The index of the active slide. */ focusActiveSlide(index) { // Find the current active slide and move focus to it for screen reader const activeSlide = this.element.querySelectorAll('.tns-slide')[index]; if (activeSlide) { const sectionElement = activeSlide.closest("section"); if (sectionElement) { sectionElement.setAttribute("tabindex", "-1"); sectionElement.focus(); // Move focus to the section containing the active slide } } } // Rest of the class methods remain unchanged } export { QuoteBlock, quoteblockElement };
Editor is loading...
Leave a Comment