up

assets/javascripts/app.js

@@ -3377,7 +3377,6 @@ $(document).ready(function() {
   //     ORBITFRONT.member.equalHeight('.i-member-item-inner');
   //   }
   // });
-
 //banner英文
 $(function() {
   function fixBannerA11yByLang() {
@@ -3398,57 +3397,71 @@ $(document).ready(function() {
       $('.w-ba-banner').each(function() {
         var $banner = $(this);
 
-                // ✅ 播放控制選項 radiogroup label
         $banner.find('.controlplay').attr('aria-label', i18n.playControls);
 
-                // ✅ 繼續播放按鈕
         $banner.find('.resume-slide').attr({
           'aria-label': i18n.resume,
           'title': i18n.resume
         });
         $banner.find('.resume-slide p').text(i18n.resume);
 
-                // ✅ 暫停播放按鈕
         $banner.find('.pause-slide').attr({
           'aria-label': i18n.pause,
           'title': i18n.pause
         });
         $banner.find('.pause-slide p').text(i18n.pause);
 
-                // ✅ 上一張按鈕
         $banner.find('.prev-button').attr('aria-label', i18n.prev);
-
-                // ✅ 下一張按鈕
         $banner.find('.next-button').attr('aria-label', i18n.next);
 
-                // ✅ Pager 按鈕
         var $slides = $banner.find('.w-ba-banner__slide');
         $banner.find('.banner-pager button').each(function(index) {
           var slideTitle = $slides.eq(index).data('cycle-title') || '';
           var ariaLabel = isEn
             ? i18n.slide + ' ' + (index + 1) + (slideTitle ? ' ' + slideTitle : '')
             : i18n.slide + (index + 1) + i18n.slideUnit + (slideTitle ? ' ' + slideTitle : '');
-                    $(this).attr({
+          $(this).attr({ 'aria-label': ariaLabel, 'title': ariaLabel });
-                        'aria-label': ariaLabel,
-                        'title': ariaLabel
-                    });
         });
       });
 
-            // ✅ Cycle2 初始化後也重新處理 Pager（因為 pager 是動態產生的）
+      // ✅ Cycle2 初始化後重新處理 Pager + 切換後播報當前圖片資訊
-            $('.w-ba-banner .cycle-slideshow').on('cycle-post-initialize cycle-after', function() {
+      $('.w-ba-banner .cycle-slideshow').on('cycle-post-initialize cycle-after', function(event) {
-                var $banner = $(this).closest('.w-ba-banner');
+        var $slideshow = $(this);
+        var $banner    = $slideshow.closest('.w-ba-banner');
         var $slides    = $banner.find('.w-ba-banner__slide');
+
+        // 更新 Pager aria-label
         $banner.find('.banner-pager button').each(function(index) {
           var slideTitle = $slides.eq(index).data('cycle-title') || '';
           var ariaLabel = isEn
             ? i18n.slide + ' ' + (index + 1) + (slideTitle ? ' ' + slideTitle : '')
             : i18n.slide + (index + 1) + i18n.slideUnit + (slideTitle ? ' ' + slideTitle : '');
-                    $(this).attr({
+          $(this).attr({ 'aria-label': ariaLabel, 'title': ariaLabel });
-                        'aria-label': ariaLabel,
-                        'title': ariaLabel
-                    });
         });
+
+        // ✅ 問題1：cycle-after 時用 live region 播報當前圖片資訊
+        if (event.type === 'cycle-after') {
+          var opts = $slideshow.data('cycle.opts');
+          if (opts) {
+            var currentIndex = opts.currSlide;
+            var $currentSlide = $slides.eq(currentIndex);
+            var currentTitle  = $currentSlide.data('cycle-title') || '';
+            var currentAlt    = $currentSlide.find('img').attr('alt') || '';
+            var announceText  = isEn
+              ? 'Slide ' + (currentIndex + 1) + ' of ' + $slides.length + (currentTitle ? ': ' + currentTitle : (currentAlt ? ': ' + currentAlt : ''))
+              : '第 ' + (currentIndex + 1) + ' 張，共 ' + $slides.length + ' 張' + (currentTitle ? '：' + currentTitle : (currentAlt ? '：' + currentAlt : ''));
+
+            var $announcer = $banner.find('.banner-announcer');
+            if ($announcer.length === 0) {
+              $announcer = $('<div class="banner-announcer" aria-live="polite" aria-atomic="true" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;"></div>');
+              $banner.append($announcer);
+            }
+            $announcer.text('');
+            setTimeout(function() {
+              $announcer.text(announceText);
+            }, 100);
+          }
+        }
       });
 
     }, 800);
@@ -3456,6 +3469,7 @@ $(document).ready(function() {
 
   fixBannerA11yByLang();
 });
+
 //bannercontrolplay
 $(function() {
   function fixBannerPlayPauseA11y() {
@@ -3471,11 +3485,10 @@ $(function() {
       $('.w-ba-banner').each(function() {
         var $banner     = $(this);
         var $controlplay = $banner.find('.controlplay');
+        var $slideshow  = $banner.find('.cycle-slideshow');
 
-                // ✅ 把 radiogroup 改為一般容器
         $controlplay.removeAttr('role aria-label');
 
-                // ✅ 繼續播放按鈕
         var $resume = $banner.find('.resume-slide');
         $resume
           .attr('role', 'button')
@@ -3484,7 +3497,6 @@ $(function() {
           .attr('title', i18n.resume)
           .removeAttr('aria-checked aria-live');
 
-                // ✅ 暫停播放按鈕
         var $pause = $banner.find('.pause-slide');
         $pause
           .attr('role', 'button')
@@ -3493,7 +3505,6 @@ $(function() {
           .attr('title', i18n.pause)
           .removeAttr('aria-checked aria-live');
 
-                // ✅ 點擊後同步 aria-pressed
         $resume.off('click.bannerA11y').on('click.bannerA11y', function() {
           $resume.attr('aria-pressed', 'true');
           $pause.attr('aria-pressed', 'false');
@@ -3503,6 +3514,30 @@ $(function() {
           $pause.attr('aria-pressed', 'true');
           $resume.attr('aria-pressed', 'false');
         });
+
+        // ✅ 問題2：focus 時動態讀出當前播放狀態
+        $resume.off('focus.bannerStatus').on('focus.bannerStatus', function() {
+          var isPlaying = !$slideshow.hasClass('cycle-paused');
+          var statusText = isEn
+            ? 'Play button. Current status: ' + (isPlaying ? 'Playing' : 'Paused')
+            : '繼續播放按鈕。目前狀態：' + (isPlaying ? '播放中' : '已暫停');
+          $(this).attr('aria-label', statusText);
+        });
+        $resume.off('blur.bannerStatus').on('blur.bannerStatus', function() {
+          $(this).attr('aria-label', i18n.resume);
+        });
+
+        $pause.off('focus.bannerStatus').on('focus.bannerStatus', function() {
+          var isPlaying = !$slideshow.hasClass('cycle-paused');
+          var statusText = isEn
+            ? 'Pause button. Current status: ' + (isPlaying ? 'Playing' : 'Paused')
+            : '暫停播放按鈕。目前狀態：' + (isPlaying ? '播放中' : '已暫停');
+          $(this).attr('aria-label', statusText);
+        });
+        $pause.off('blur.bannerStatus').on('blur.bannerStatus', function() {
+          $(this).attr('aria-label', i18n.pause);
+        });
+
       });
 
     }, 800);
@@ -3510,5 +3545,91 @@ $(function() {
 
   fixBannerPlayPauseA11y();
 });
+//banner進入自動暫停
+$(function() {
+  function fixBannerFocusPauseA11y() {
+    setTimeout(function() {
+      $('.w-ba-banner').each(function() {
+        var $banner    = $(this);
+        var $slideshow = $banner.find('.cycle-slideshow');
+        var $pauseBtn  = $banner.find('.pause-slide');
+        var $resumeBtn = $banner.find('.resume-slide');
+
+        var manuallyPaused = false;
+
+        // ✅ 焦點進入輪播區域時自動暫停
+        $banner.on('focusin', function() {
+          $slideshow.cycle('pause');
+          $pauseBtn.addClass('active').attr('aria-checked', 'true');
+          $resumeBtn.removeClass('active').attr('aria-checked', 'false');
+        });
+
+        // ✅ 若使用者手動按下暫停，焦點離開後不自動恢復
+        $pauseBtn.on('click', function() {
+          manuallyPaused = true;
+        });
+
+        $resumeBtn.on('click', function() {
+          manuallyPaused = false;
+        });
+
+        // ✅ 覆寫 focusout 加入 manuallyPaused 判斷
+        $banner.off('focusout').on('focusout', function() {
+          setTimeout(function() {
+            if (!$banner.find(':focus').length && !manuallyPaused) {
+              $slideshow.cycle('resume');
+              $resumeBtn.addClass('active').attr('aria-checked', 'true');
+              $pauseBtn.removeClass('active').attr('aria-checked', 'false');
+            }
+          }, 150);
+        });
+
+      });
+    }, 800);
+  }
+
+  fixBannerFocusPauseA11y();
+});
+//googlemap加title
+function fixGoogleMapIframeTitle(){
+    setTimeout(function(){
+        var pageLang = (document.documentElement.getAttribute('lang') || '').toLowerCase();
+        var isEnglish = pageLang.indexOf('en') === 0; // lang="en"、"en-us" 都算英文頁
+
+        $('iframe[src*="google.com/maps/embed"]').each(function(){
+            var $iframe = $(this);
+            var currentTitle = ($iframe.attr('title') || '').trim();
+
+            // 只處理明顯是佔位文字、空白、或沒有 title 的 iframe，
+            // 已經有具體地點名稱的（例如「紅館」）不會被動到
+            if (currentTitle !== '' && currentTitle.toLowerCase() !== 'googleoauth') {
+                return;
+            }
+
+            // 優先找上層容器上手動標記的地點名稱
+            var name = $iframe.closest('[data-map-name]').data('map-name');
+
+            // 找不到的話，往上找最接近的標題文字（h1~h6 或粗體）當地點名稱
+            if (!name) {
+                var $context = $iframe.closest('section, div').prevAll('h1,h2,h3,h4,h5,h6,strong').first();
+                name = $context.length ? $context.text().trim() : '';
+            }
+
+            var newTitle;
+            if (isEnglish) {
+                newTitle = name ? ('Google Map: location of ' + name)
+                                 : 'Google Map (embedded map, please manually confirm and fill in the actual location name)';
+            } else {
+                newTitle = name ? ('Google地圖：' + name + ' 位置')
+                                 : 'Google地圖（嵌入地圖，請人工確認並填寫實際地點名稱）';
+            }
+
+            $iframe.attr('title', newTitle);
+        });
+    }, 800);
+}
+$(document).ready(function(){
+    fixGoogleMapIframeTitle();
+});
 
 }(jQuery, window));

assets/stylesheets/template/modules/event_news.scss

@@ -492,7 +492,6 @@
   .i-annc__list {
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
   }
   .i-annc__title {
     font-family: $main-font;