Untitled

 avatar
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