tiny-slider

Summary

• Two workarounds required:
  1. Library sets tabindex="-1" on navigation buttons, making them unreachable by keyboard
  2. Loop mode clones slides, and focusable elements in clones create focus traps
• Fix: Remove tabindex from buttons after init + manage tabindex on cloned slide elements

Accessibility Analysis

Score: 58.5% — 24/41 accessibility issues resolved Median resolution time: 80.2 days

Open Issues (17)

• Arrow key navigation affects ALL sliders on page simultaneously
• aria-live announces wrong slide counts (“slide 6 of 5”)
• Navigation buttons have tabindex="-1" — unreachable by keyboard
• ARIA attributes don’t match their roles

Our Workarounds

1. Navigation Button Fix

tiny-slider sets tabindex="-1" on buttons in the controlsContainer:

setTimeout(() => {
  const controlButtons = document.querySelectorAll('#controls button')
  controlButtons.forEach((btn) => btn.removeAttribute('tabindex'))
}, 100)

2. Cloned Slides Focus Trap

In loop mode, tiny-slider clones slides. Focusable elements in clones trap focus:

const updateFocusableElements = () => {
  const allSlides = document.querySelectorAll('.tns-item')
  allSlides.forEach((slide) => {
    const isActive = slide.classList.contains('tns-slide-active')
    const focusables = slide.querySelectorAll('a, button')
    focusables.forEach((el) => {
      el.setAttribute('tabindex', isActive ? '0' : '-1')
    })
  })
}

Slide Index Calculation

indexChanged returns DOM index including clones. Use displayIndex for actual slide number:

slider.events.on('indexChanged', (info) => {
  const realIndex = (info.displayIndex - 1) % totalSlides
  updateDots(realIndex)
})