diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index a7ca7d0..0f2df1e 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -515,20 +515,28 @@ }); //播放驗證碼語音 $(function () { - $('.ask-question') - .find('.controls button.fas.fa-volume-up') - .each(function () { - const $btn = $(this); + var pageLang = ($('html').attr('lang') || 'zh-Hant').toLowerCase(); + var isEn = pageLang.startsWith('en'); + var label = isEn ? 'Play Captcha Voice' : '播放驗證碼語音'; - // 已經補過就不重複處理 - if ($btn.attr('aria-label')) return; + $('.ask-question') + .find('.controls button.fas.fa-volume-up') + .each(function () { + var $btn = $(this); - $btn.attr({ - 'aria-label': '播放驗證碼語音', - 'aria-controls': 'captcha_audio', - 'role': 'button' - }); - }); + $btn.attr({ + 'aria-label': label, + 'title': label, + 'aria-controls': 'captcha_audio', + 'role': 'button' + }); + + // ✅ 同步更新 sr-only 文字(若有) + var $sr = $btn.find('.sr-only'); + if ($sr.length > 0) { + $sr.text(label); + } + }); }); //刪除td的id @@ -2119,28 +2127,68 @@ $(document).ready(function () { //rucaptcha-image $(document).ready(function () { - // >>> 修正:先確認頁面上真的有驗證碼圖片,再往下執行,避免沒有驗證碼的頁面也發出多餘的 wav 請求 - if ($('.rucaptcha-image').length) { - $('.rucaptcha-image').removeAttr('onload'); - // 檢查是否已插入過 - if (!$('#captcha_audio').length) { - const audioButton = $(` - - `); - const 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 = $( + '' + ); + + var $audio = $(''); + + $captchaImg.after($audioButton, $audio); + } + + }, 500); } - // <<< 修正結束 + + fixCaptchaImgA11y(); }); //萬用表格searchbtn2 @@ -3316,66 +3364,67 @@ $(function() { }, 200); }); }); -$(function() { - function fixNavDropdownKeyboard() { - setTimeout(function() { - // ✅ 找所有有子選單的父層連結 - $('#main-nav > li > a[aria-haspopup="true"]').each(function() { - var $parentLink = $(this); - var $submenu = $parentLink.next('ul'); - if ($submenu.length === 0) return; +//選單 +// $(function() { +// function fixNavDropdownKeyboard() { +// setTimeout(function() { +// // ✅ 找所有有子選單的父層連結 +// $('#main-nav > li > a[aria-haspopup="true"]').each(function() { +// var $parentLink = $(this); +// var $submenu = $parentLink.next('ul'); +// if ($submenu.length === 0) return; - $parentLink.off('keydown.navDropdown').on('keydown.navDropdown', function(e) { - // ✅ Enter 鍵:若選單已展開則收合,未展開則展開(不跳頁) - if (e.which === 13) { - var isExpanded = $parentLink.attr('aria-expanded') === 'true'; - if (isExpanded) { - e.preventDefault(); // ✅ 阻止跳頁 - $parentLink.attr('aria-expanded', 'false'); - $submenu.removeClass('show'); - } - // 未展開時讓原本的 hover/focus 展開邏輯處理,不攔截 - } +// $parentLink.off('keydown.navDropdown').on('keydown.navDropdown', function(e) { +// // ✅ Enter 鍵:若選單已展開則收合,未展開則展開(不跳頁) +// if (e.which === 13) { +// var isExpanded = $parentLink.attr('aria-expanded') === 'true'; +// if (isExpanded) { +// e.preventDefault(); // ✅ 阻止跳頁 +// $parentLink.attr('aria-expanded', 'false'); +// $submenu.removeClass('show'); +// } +// // 未展開時讓原本的 hover/focus 展開邏輯處理,不攔截 +// } - // ✅ Escape 鍵收合 - if (e.which === 27) { - $parentLink.attr('aria-expanded', 'false'); - $submenu.removeClass('show'); - $parentLink.focus(); - } - }); - }); +// // ✅ Escape 鍵收合 +// if (e.which === 27) { +// $parentLink.attr('aria-expanded', 'false'); +// $submenu.removeClass('show'); +// $parentLink.focus(); +// } +// }); +// }); - // ✅ 二層子選單同樣處理 - $('#main-nav li > a[aria-haspopup="true"]').filter(function() { - return $(this).closest('ul').hasClass('modules-menu-level-1'); - }).each(function() { - var $parentLink = $(this); - var $submenu = $parentLink.next('ul'); - if ($submenu.length === 0) return; +// // ✅ 二層子選單同樣處理 +// $('#main-nav li > a[aria-haspopup="true"]').filter(function() { +// return $(this).closest('ul').hasClass('modules-menu-level-1'); +// }).each(function() { +// var $parentLink = $(this); +// var $submenu = $parentLink.next('ul'); +// if ($submenu.length === 0) return; - $parentLink.off('keydown.navDropdown2').on('keydown.navDropdown2', function(e) { - if (e.which === 13) { - var isExpanded = $parentLink.attr('aria-expanded') === 'true'; - if (isExpanded) { - e.preventDefault(); - $parentLink.attr('aria-expanded', 'false'); - $submenu.removeClass('show'); - } - } - if (e.which === 27) { - $parentLink.attr('aria-expanded', 'false'); - $submenu.removeClass('show'); - $parentLink.focus(); - } - }); - }); +// $parentLink.off('keydown.navDropdown2').on('keydown.navDropdown2', function(e) { +// if (e.which === 13) { +// var isExpanded = $parentLink.attr('aria-expanded') === 'true'; +// if (isExpanded) { +// e.preventDefault(); +// $parentLink.attr('aria-expanded', 'false'); +// $submenu.removeClass('show'); +// } +// } +// if (e.which === 27) { +// $parentLink.attr('aria-expanded', 'false'); +// $submenu.removeClass('show'); +// $parentLink.focus(); +// } +// }); +// }); - }, 500); - } +// }, 500); +// } - fixNavDropdownKeyboard(); -}); +// fixNavDropdownKeyboard(); +// }); // 執行 member等高計算,目前改用flexbox故mark掉 by ika 20160105 // $(window).load(function() { // if ($('.index-member-3').length && $(window).width() > 992) { @@ -3461,4 +3510,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)); diff --git a/assets/stylesheets/template/base/_global.scss b/assets/stylesheets/template/base/_global.scss index 72dbcc8..157232d 100644 --- a/assets/stylesheets/template/base/_global.scss +++ b/assets/stylesheets/template/base/_global.scss @@ -217,6 +217,6 @@ img{ // overflow-x: auto; // } // } -*[data-pp]>.editmode-ps>a, .admin-subpart-area .content>.editmode-ps>a{ - position: !important; -} \ No newline at end of file +input[type=checkbox]:focus { + outline: 0.3125em auto -webkit-focus-ring-color; +} diff --git a/home/index.html.erb b/home/index.html.erb index 0e4365d..b971a3d 100644 --- a/home/index.html.erb +++ b/home/index.html.erb @@ -81,13 +81,7 @@