Set `aria-live` manually here as we cannot use Swiper's navigation since we use custom arrows.

set-aria-live.ts

/**
 * Set `aria-live` manually here as we cannot use Swiper's navigation since we use custom arrows.
 */
function setAriaLive(el: HTMLDivElement | null, value: string) {
  if (!el) return;
  el.innerHTML = '';
  setTimeout(() => {
    el.innerHTML = `<div aria-live="polite" aria-atomic="true" className="visually-hidden">${value}</div>`;
  }, 100);
}

visually-hidden.css

/* A11y */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}