diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index ad31a9b..9a2a5e6 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -3310,6 +3310,149 @@ $(document).ready(function () { $btn.focus(); } }); +}); +$(document).ready(function () { + var $searchBox = $('.search-box'); + var $btn = $('.btn-search'); + var $input = $('.input-search'); + + // ✅ 將按鈕移到 input 之前,Tab 順序變為:按鈕 → input → 送出 + $btn.insertBefore($input); + + // ✅ 補充 aria-label 說明展開收合功能 + $btn.attr('aria-label', '展開或收合搜尋欄'); + $btn.attr('title', '展開或收合搜尋欄'); + + // 點擊按鈕展開/收合 + $btn.on('click', function () { + var isExpanded = $btn.attr('aria-expanded') === 'true'; + if (isExpanded) { + $btn.attr('aria-expanded', 'false'); + $btn.attr('aria-label', '展開搜尋欄'); + $('.search-box').removeClass('searching'); + $input.blur(); + } else { + $btn.attr('aria-expanded', 'true'); + $btn.attr('aria-label', '收合搜尋欄'); + $('.search-box').addClass('searching'); + $input.focus(); + } + }); + + // focusin 同步狀態 + $searchBox.on('focusin', function () { + $btn.attr('aria-expanded', 'true'); + $btn.attr('aria-label', '收合搜尋欄'); + $searchBox.addClass('searching'); + }); + + // focusout 同步狀態 + $searchBox.on('focusout', function () { + setTimeout(function () { + if (!$searchBox.find(':focus').length) { + $btn.attr('aria-expanded', 'false'); + $btn.attr('aria-label', '展開搜尋欄'); + $searchBox.removeClass('searching'); + } + }, 150); + }); + + // Escape 收合 + $input.on('keydown', function (e) { + if (e.keyCode === 27) { + $btn.attr('aria-expanded', 'false'); + $btn.attr('aria-label', '展開搜尋欄'); + $searchBox.removeClass('searching'); + $btn.focus(); + } + }); +}); +function fixTabKeyboardNav() { + setTimeout(function () { + var $tablist = $('.member-plugins[role="tablist"]'); + var $tabs = $tablist.find('a[role="tab"]'); + + // 初始化 roving tabindex 和 aria-selected + $tabs.each(function (i) { + var $tab = $(this); + var isActive = $tab.closest('li').hasClass('active'); + $tab.attr({ + 'tabindex': isActive ? '0' : '-1', + 'aria-selected': isActive ? 'true' : 'false' + }); + }); + + // 方向鍵切換頁籤 + $tabs.on('keydown', function (e) { + var $current = $(this); + var currentIndex = $tabs.index($current); + var $target; + + if (e.keyCode === 39 || e.keyCode === 40) { + // 右鍵或下鍵:下一個 + e.preventDefault(); + $target = $tabs.eq((currentIndex + 1) % $tabs.length); + } else if (e.keyCode === 37 || e.keyCode === 38) { + // 左鍵或上鍵:上一個 + e.preventDefault(); + $target = $tabs.eq((currentIndex - 1 + $tabs.length) % $tabs.length); + } else if (e.keyCode === 36) { + // Home:第一個 + e.preventDefault(); + $target = $tabs.first(); + } else if (e.keyCode === 35) { + // End:最後一個 + e.preventDefault(); + $target = $tabs.last(); + } else { + return; + } + + // 更新 roving tabindex 和 aria-selected + $tabs.attr({ 'tabindex': '-1', 'aria-selected': 'false' }); + $target.attr({ 'tabindex': '0', 'aria-selected': 'true' }); + $target.focus().trigger('click'); + }); + + // 點擊頁籤時同步更新狀態 + $tabs.on('click', function () { + $tabs.attr({ 'tabindex': '-1', 'aria-selected': 'false' }); + $(this).attr({ 'tabindex': '0', 'aria-selected': 'true' }); + }); + + }, 500); +} + +$(document).ready(function () { + fixTabKeyboardNav(); +}); +function removeBareUrlLinks() { + setTimeout(function () { + $('.dtr-control a').each(function () { + var $a = $(this); + var text = $a.text().trim(); + var href = $a.attr('href') || ''; + + // 判斷連結文字是否為網址(以 http:// 或 https:// 開頭) + if (/^https?:\/\//i.test(text)) { + $a.replaceWith(text); + } + }); + }, 500); +} + +$(document).ready(function () { + removeBareUrlLinks(); +}); +$(document).ready(function () { + $('.widget-breadcrumb .breadcrumb li:last-child a').attr('aria-current', 'page'); + + // 若尚未有 nav 包住,自動加上 + $('.widget-breadcrumb .breadcrumb').each(function () { + if (!$(this).closest('nav').length) { + $(this).wrap(''); + } + }); }); // 執行 member等高計算,目前改用flexbox故mark掉 by ika 20160105 // $(window).load(function() { diff --git a/assets/stylesheets/template/layout/addcss.scss b/assets/stylesheets/template/layout/addcss.scss index 742e838..9f0cf66 100644 --- a/assets/stylesheets/template/layout/addcss.scss +++ b/assets/stylesheets/template/layout/addcss.scss @@ -17358,9 +17358,6 @@ img.sppb-element-lazy.sppb-element-loaded { } .sppb-reset-button-styles { - background: 0 0; - border: none; - outline: 0; text-align: inherit } diff --git a/assets/stylesheets/template/modules/menu.scss b/assets/stylesheets/template/modules/menu.scss index 8f577eb..ba01c2d 100644 --- a/assets/stylesheets/template/modules/menu.scss +++ b/assets/stylesheets/template/modules/menu.scss @@ -395,6 +395,7 @@ body { color:#fff; font-weight: bold; position: relative; + padding: 1em 0.5em; } &:hover {