diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index 47a80e3..34ac7bb 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -3248,5 +3248,70 @@ $(document).ready(function () { // ORBITFRONT.member.equalHeight('.i-member-item-inner'); // } // }); + function fixCarouselImagesA11y() { + $('.carousel_images').each(function () { + var $widget = $(this); + var $slideshow = $widget.find('.cycle-slideshow'); + var $thumbList = $widget.find('.carousel_img_item'); + var $slides = $slideshow.find('.event_carousel_slide').not('.cycle-sentinel'); + + // 縮圖列加 tablist 語意 + $thumbList.closest('ul').attr('role', 'tablist').attr('aria-label', '輪播圖片縮圖選擇'); + + // 每個縮圖 li 加無障礙屬性 + $thumbList.each(function (i) { + var $li = $(this); + var $slide = $slides.eq(i); + + // 從對應 slide 的 img 取 alt,或從縮圖本身的 img 取 + var altText = $slide.find('img').attr('alt') || + $li.find('img').attr('alt') || + ('圖片 ' + (i + 1)); + + $li.attr({ + 'role': 'tab', + 'tabindex': '0', + 'aria-label': '第 ' + (i + 1) + ' 張:' + altText, + 'aria-selected': 'false' + }); + + // 點擊縮圖切換主圖 + $li.off('click.carouselA11y').on('click.carouselA11y', function () { + $slideshow.cycle(i); + $thumbList.attr('aria-selected', 'false'); + $li.attr('aria-selected', 'true'); + }); + + // 鍵盤 Enter/Space 觸發點擊 + $li.off('keydown.carouselA11y').on('keydown.carouselA11y', function (e) { + if (e.which === 13 || e.which === 32) { + e.preventDefault(); + $li.trigger('click'); + } + // 左右方向鍵切換縮圖 + if (e.which === 37) { + e.preventDefault(); + var prev = i === 0 ? $thumbList.length - 1 : i - 1; + $thumbList.eq(prev).focus().trigger('click'); + } + if (e.which === 39) { + e.preventDefault(); + var next = i === $thumbList.length - 1 ? 0 : i + 1; + $thumbList.eq(next).focus().trigger('click'); + } + }); + }); + + // Cycle2 切換後同步更新 aria-selected + $slideshow.on('cycle-after', function (e, opts) { + $thumbList.attr('aria-selected', 'false'); + $thumbList.eq(opts.currSlide).attr('aria-selected', 'true'); + }); + }); +} + +$(document).ready(function () { + setTimeout(fixCarouselImagesA11y, 500); +}); }(jQuery, window));