From 880032a4167a95a4dfa6dd08c5e361372624347e Mon Sep 17 00:00:00 2001 From: ken Date: Tue, 28 Jul 2026 16:48:31 +0800 Subject: [PATCH] update --- assets/javascripts/app.js | 122 ++++++++++++++++++ .../template/modules/announcement.scss | 4 +- .../stylesheets/template/modules/gallery.scss | 12 +- home/index.html.erb | 4 +- modules/gallery/_gallery_widget1.html.erb | 23 ++-- modules/gallery/_gallery_widget7.html.erb | 2 +- 6 files changed, 147 insertions(+), 20 deletions(-) diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index 046018d..12ebf74 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -3128,6 +3128,128 @@ function fixCarouselBtnA11y() { $(document).ready(function () { fixCarouselBtnA11y(); +}); +//cycle2無障礙 +$(document).ready(function() { + // 取得頁面上所有的 Cycle2 輪播圖 + var $allSlideshows = $('.cycle-slideshow'); + + /** + * 核心無障礙狀態刷新函式 + */ + function refreshCycleA11y($el) { + var $items = $el.find('.w-annc__item, .widget-link__item, [class*="cycle-slide"], .widget-pic'); + + $items.each(function() { + var $slide = $(this); + var isActive = $slide.hasClass('cycle-slide-active'); + + if (isActive) { + // ✅ li 只設 aria-hidden，不加 tabindex + $slide.attr('aria-hidden', 'false'); + $slide.removeAttr('tabindex'); // ← 確保 li 本身沒有 tabindex + $slide.find('a, button, input, [tabindex]').attr('tabindex', '0'); + } else { + // 隱藏中的投影片：徹底隔離 + $slide.attr('aria-hidden', 'true'); + $slide.removeAttr('tabindex'); + $slide.find('a, button, input, [tabindex]').attr('tabindex', '-1'); + } + }); + + // --- 防鎖死邊界處理 (Shift + Tab) --- + var $container = $el.closest('.w-annc, .widget-link_wrapper, .widget-link'); + var $prevBtn = $container.find('.btn-left, .prev-button'); + + $el.find('.cycle-slide-active a, .cycle-slide-active button').first() + .off('keydown.a11y').on('keydown.a11y', function(e) { + if (e.keyCode === 9 && e.shiftKey) { + if ($prevBtn.length) { + e.preventDefault(); + $prevBtn.focus(); + } + } + }); + } + + /** + * 針對 widget-link 非語意化標籤 (如 i 標籤當按鈕) 的無障礙補強 + */ + function refreshCycleA11y($el) { + var $items = $el.find('.w-annc__item, .widget-link__item, [class*="cycle-slide"]'); + + $items.each(function() { + var $slide = $(this); + var isActive = $slide.hasClass('cycle-slide-active'); + + if (isActive) { + // ✅ li 只設 aria-hidden，不加 tabindex + $slide.attr('aria-hidden', 'false'); + $slide.removeAttr('tabindex'); // ← 確保 li 本身沒有 tabindex + $slide.find('a, button, input, [tabindex]').attr('tabindex', '0'); + } else { + // 隱藏中的投影片：徹底隔離 + $slide.attr('aria-hidden', 'true'); + $slide.removeAttr('tabindex'); + $slide.find('a, button, input, [tabindex]').attr('tabindex', '-1'); + } + }); + + // --- 防鎖死邊界處理 (Shift + Tab) --- + var $container = $el.closest('.w-annc, .widget-link_wrapper, .widget-link'); + var $prevBtn = $container.find('.btn-left, .prev-button'); + + $el.find('.cycle-slide-active a, .cycle-slide-active button').first() + .off('keydown.a11y').on('keydown.a11y', function(e) { + if (e.keyCode === 9 && e.shiftKey) { + if ($prevBtn.length) { + e.preventDefault(); + $prevBtn.focus(); + } + } + }); + } + + // 輔助函式：切換後更新 A11y 狀態並鎖定焦點 + function triggerPostUpdate($el, $activeBtn) { + $el.one('cycle-after', function() { + setTimeout(function() { + refreshCycleA11y($el); + $activeBtn.focus(); + }, 300); + }); + } + + /** + * 舊有按鈕事件相容與整合 + */ + $(document).on('keydown', '.btn-right, .btn-left', function(e) { + if (e.keyCode === 13) { + var $btn = $(this); + var $el = $btn.closest('.w-annc').find('.cycle-slideshow'); + triggerPostUpdate($el, $btn); + } + }); + + /** + * 綁定 Cycle2 核心事件 + */ + $allSlideshows.on('cycle-initialized cycle-after', function() { + var $this = $(this); + setTimeout(function() { + refreshCycleA11y($this); + }, 300); + }); + + // 初始化執行 + patchWidgetLinkElements(); + + $allSlideshows.each(function() { + var $this = $(this); + setTimeout(function() { + refreshCycleA11y($this); + }, 500); + }); }); // 執行 member等高計算，目前改用flexbox故mark掉 by ika 20160105 // $(window).load(function() { diff --git a/assets/stylesheets/template/modules/announcement.scss b/assets/stylesheets/template/modules/announcement.scss index ac77695..9043ed9 100644 --- a/assets/stylesheets/template/modules/announcement.scss +++ b/assets/stylesheets/template/modules/announcement.scss @@ -1938,7 +1938,7 @@ // Widget-11 .widget-announcement-11 { .w-annc__postdate-wrap{ - color: #CEB60F; + color: #817003; font-family: 'Poppins', sans-serif; letter-spacing: 1.5px; } @@ -2593,7 +2593,7 @@ .i-annc__content,.i-annc__postdate,.category{ // border-bottom: 0.0625em dashed #ddd!important; border-top: 0!important; - color: #CEB60F; + color: #817003; } .i-annc__postdate, .i-annc__category, diff --git a/assets/stylesheets/template/modules/gallery.scss b/assets/stylesheets/template/modules/gallery.scss index 373b9a6..f7d66fa 100644 --- a/assets/stylesheets/template/modules/gallery.scss +++ b/assets/stylesheets/template/modules/gallery.scss @@ -20,6 +20,9 @@ } // Gallery MODULES .widget-gallery { + .button-mid{ + z-index: 202; + } .widget-title { @extend .unity-title; } @@ -31,6 +34,7 @@ &.widget1 { border: 5px solid #85BF5E; padding: 0 60px; + position: relative; .gallery-button-mid{ .next-button{ border-radius: 0; @@ -43,9 +47,7 @@ color: #fff; cursor: pointer; right: 0; - @media(min-width:769px){ - right: 0.9375em; - } + } .prev-button{ border-radius: 0; @@ -58,9 +60,7 @@ color: #fff; cursor: pointer; left: 0; - @media(min-width:769px){ - left: 0.9375em; - } + } } .cycle-carousel-wrap{ diff --git a/home/index.html.erb b/home/index.html.erb index 4786b49..1ccd67f 100644 --- a/home/index.html.erb +++ b/home/index.html.erb @@ -86,14 +86,14 @@
-
+
-
+
diff --git a/modules/gallery/_gallery_widget1.html.erb b/modules/gallery/_gallery_widget1.html.erb index 6d4732a..41bba63 100644 --- a/modules/gallery/_gallery_widget1.html.erb +++ b/modules/gallery/_gallery_widget1.html.erb @@ -2,13 +2,16 @@

{{widget-title}}

- +
- -
{{image_description}}
 +
- + - \ No newline at end of file + + \ No newline at end of file diff --git a/modules/gallery/_gallery_widget7.html.erb b/modules/gallery/_gallery_widget7.html.erb index e48405e..c7f6573 100644 --- a/modules/gallery/_gallery_widget7.html.erb +++ b/modules/gallery/_gallery_widget7.html.erb @@ -8,7 +8,7 @@ data-list="images" data-cycle-slides="> .widget-pic" data-cycle-fx="carousel" - data-cycle-timeout="3000" + data-cycle-timeout="0" data-cycle-carousel-visible="4" data-cycle-pause-on-hover="true" data-cycle-log="false"