up

2026-09-22 10:31:16 +08:00 · 2026-09-22 10:31:16 +08:00 · e03192c0d5
parent 4b4ed8f392
commit e03192c0d5
4 changed files with 142 additions and 91 deletions
--- a/assets/javascripts/app.js
+++ b/assets/javascripts/app.js
@ -2143,27 +2143,68 @@ $(function() {
  });
  //rucaptcha-image
  $(document).ready(function () {
-      $('.rucaptcha-image').removeAttr('onload');
-    
-      // 檢查是否已插入過
-      if (!$('#captcha_audio').length) {
-        const audioButton = $(`
-          <button 
-            title="播放驗證碼語音" 
-            type="button" 
-            onclick="document.getElementById('captcha_audio').play();" 
-            class="fas fa-volume-up" 
-            aria-label="播放驗證碼語音"
-            role="button"
-            style="font-size: 1.5em; color: #333; cursor: pointer; border: 2px solid #333; padding: 0.2em;">
-            <span class="sr-only">播放驗證碼語音</span>
-          </button>
-        `);
-    
-        const audio = $('<audio id="captcha_audio" src="/rucaptcha/?format=wav&amp;locale=zh_tw"></audio>');
-    
-        $('.rucaptcha-image').after(audioButton, audio);
+      function fixCaptchaImgA11y() {
+          setTimeout(function () {
+              // ✅ 先確認頁面上真的有驗證碼圖片，再往下執行
+              if (!$('.rucaptcha-image').length) return;
+
+              var pageLang = ($('html').attr('lang') || 'zh-Hant').toLowerCase();
+              var isEn = pageLang.startsWith('en');
+
+              var i18n = {
+                  alt:      isEn ? 'Captcha image, click to refresh' : '驗證碼圖片，點擊可更換',
+                  title:    isEn ? 'Captcha image, click to refresh' : '驗證碼圖片，點擊可更換',
+                  label:    isEn ? 'Click to refresh captcha'        : '點擊更換驗證碼',
+                  audioBtn: isEn ? 'Play captcha audio'              : '播放驗證碼語音',
+                  audioSrc: isEn ? '/rucaptcha/?format=wav&locale=en' : '/rucaptcha/?format=wav&locale=zh_tw'
+              };
+
+              var $captchaImg = $('.rucaptcha-image');
+
+              // ✅ 移除 onload
+              $captchaImg.removeAttr('onload');
+
+              // ✅ 補上有意義的 alt、role、tabindex、title
+              $captchaImg.attr({
+                  'alt':        i18n.alt,
+                  'title':      i18n.title,
+                  'role':       'button',
+                  'tabindex':   '0',
+                  'aria-label': i18n.label
+              });
+
+              // ✅ Enter / Space 觸發更換驗證碼
+              $captchaImg.off('keydown.captchaA11y').on('keydown.captchaA11y', function (e) {
+                  if (e.which === 13 || e.which === 32) {
+                      e.preventDefault();
+                      $(this).trigger('click');
+                  }
+              });
+
+              // ✅ 插入語音按鈕和 audio（若還沒插入過）
+              if (!$('#captcha_audio').length) {
+                  var $audioButton = $(
+                      '<button ' +
+                          'title="' + i18n.audioBtn + '" ' +
+                          'type="button" ' +
+                          'onclick="document.getElementById(\'captcha_audio\').play();" ' +
+                          'class="fas fa-volume-up" ' +
+                          'aria-label="' + i18n.audioBtn + '" ' +
+                          'role="button" ' +
+                          'style="font-size: 1.5em; color: #333; cursor: pointer; border: 2px solid #333; padding: 0.2em;">' +
+                          '<span class="sr-only">' + i18n.audioBtn + '</span>' +
+                      '</button>'
+                  );
+
+                  var $audio = $('<audio id="captcha_audio" src="' + i18n.audioSrc + '"></audio>');
+
+                  $captchaImg.after($audioButton, $audio);
+              }
+
+          }, 500);
      }
+
+      fixCaptchaImgA11y();
  });

  //萬用表格searchbtn2
@ -3728,61 +3769,12 @@ $(function() {

    fixVoicePlayerA11y();
 });
+  $(function() {
+    setTimeout(function() {
+      $('.voice-player').removeAttr('title');
+    }, 500);
+  });

-//bannercontrolplay
-$(function() {
-    function fixBannerPlayPauseA11y() {
-        setTimeout(function() {
-            var pageLang = ($('html').attr('lang') || 'zh-Hant').toLowerCase();
-            var isEn = pageLang.startsWith('en');
-
-            var i18n = {
-                resume: isEn ? 'Play' : '繼續播放',
-                pause:  isEn ? 'Pause' : '暫停播放'
-            };
-
-            $('.w-ba-banner').each(function() {
-                var $banner = $(this);
-                var $controlplay = $banner.find('.controlplay');
-
-                // ✅ 把 radiogroup 改為一般容器
-                $controlplay.removeAttr('role aria-label');
-
-                // ✅ 繼續播放按鈕
-                var $resume = $banner.find('.resume-slide');
-                $resume
-                    .attr('role', 'button')
-                    .attr('aria-pressed', $resume.hasClass('active') ? 'true' : 'false')
-                    .attr('aria-label', i18n.resume)
-                    .attr('title', i18n.resume)
-                    .removeAttr('aria-checked aria-live');
-
-                // ✅ 暫停播放按鈕
-                var $pause = $banner.find('.pause-slide');
-                $pause
-                    .attr('role', 'button')
-                    .attr('aria-pressed', $pause.hasClass('active') ? 'true' : 'false')
-                    .attr('aria-label', i18n.pause)
-                    .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');
-                });
-
-                $pause.off('click.bannerA11y').on('click.bannerA11y', function() {
-                    $pause.attr('aria-pressed', 'true');
-                    $resume.attr('aria-pressed', 'false');
-                });
-            });
-
-        }, 800);
-    }
-
-    fixBannerPlayPauseA11y();
-});
  //banner英文
  $(function() {
    function fixBannerA11yByLang() {
@ -3861,4 +3853,59 @@ $(function() {

    fixBannerA11yByLang();
  });
+//bannercontrolplay
+$(function() {
+    function fixBannerPlayPauseA11y() {
+        setTimeout(function() {
+            var pageLang = ($('html').attr('lang') || 'zh-Hant').toLowerCase();
+            var isEn = pageLang.startsWith('en');
+
+            var i18n = {
+                resume: isEn ? 'Play' : '繼續播放',
+                pause:  isEn ? 'Pause' : '暫停播放'
+            };
+
+            $('.w-ba-banner').each(function() {
+                var $banner = $(this);
+                var $controlplay = $banner.find('.controlplay');
+
+                // ✅ 把 radiogroup 改為一般容器
+                $controlplay.removeAttr('role aria-label');
+
+                // ✅ 繼續播放按鈕
+                var $resume = $banner.find('.resume-slide');
+                $resume
+                    .attr('role', 'button')
+                    .attr('aria-pressed', $resume.hasClass('active') ? 'true' : 'false')
+                    .attr('aria-label', i18n.resume)
+                    .attr('title', i18n.resume)
+                    .removeAttr('aria-checked aria-live');
+
+                // ✅ 暫停播放按鈕
+                var $pause = $banner.find('.pause-slide');
+                $pause
+                    .attr('role', 'button')
+                    .attr('aria-pressed', $pause.hasClass('active') ? 'true' : 'false')
+                    .attr('aria-label', i18n.pause)
+                    .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');
+                });
+
+                $pause.off('click.bannerA11y').on('click.bannerA11y', function() {
+                    $pause.attr('aria-pressed', 'true');
+                    $resume.attr('aria-pressed', 'false');
+                });
+            });
+
+        }, 800);
+    }
+
+    fixBannerPlayPauseA11y();
+});
+
 }(jQuery, window));
--- a/assets/stylesheets/template/modules/ad_banner.scss
+++ b/assets/stylesheets/template/modules/ad_banner.scss
@ -35,6 +35,7 @@ ul.button-mid{
    width: 100%;
    height: 0;
    top: 50%;
+    z-index: 201;
 }
 .banner-pager .active-slide button{
  background: $theme-color-second!important;
@ -44,6 +45,7 @@ ul.button-mid{
    width: 100%;
    height: 0;
    top: 50%;
+    z-index: 201;
 }
 .next-button, .prev-button {
    cursor: pointer;
--- a/assets/stylesheets/template/modules/event_news.scss
+++ b/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;
--- a/assets/stylesheets/template/modules/menu.scss
+++ b/assets/stylesheets/template/modules/menu.scss
@ -100,22 +100,25 @@
  .header-nav{
    display: none!important;
  }
-  padding:0;
-  z-index: 10;
-  position: fixed;
-  left: 0;
-  // top:0;
-  top:40px;
-  margin-top: 0;
-  min-width: 100%;
-  -webkit-backdrop-filter: saturate(180%) blur(20px);
-  backdrop-filter: saturate(180%) blur(20px);
-  background-color: #fff;
-  -webkit-transition: all .3s ease;
-  -moz-transition: all .3s ease;
-  -ms-transition: all .3s ease;
-  -o-transition: all .3s ease;
-  transition: all .3s ease;
+  @media (min-width: 769px){
+    padding:0;
+    z-index: 10;
+    position: fixed;
+    left: 0;
+    // top:0;
+    top:40px;
+    margin-top: 0;
+    min-width: 100%;
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+    backdrop-filter: saturate(180%) blur(20px);
+    background-color: #fff;
+    -webkit-transition: all .3s ease;
+    -moz-transition: all .3s ease;
+    -ms-transition: all .3s ease;
+    -o-transition: all .3s ease;
+    transition: all .3s ease;
+  }
+
 }

 // //直式選單更改css