Untitled
unknown
plain_text
a year ago
1.8 kB
7
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