diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index 13e12b7..29f31df 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -1246,17 +1246,24 @@ //公告頁籤無障礙 $(function() { function fixTabLinearOrder() { - var $tabs = $('.filter_tab'); - var $anncList = $('.w-annc__list'); + // ✅ 只處理內部含有 .tab_nav 的 .w-annc + var $targetAnnc = $('.w-annc').filter(function() { + return $(this).find('.tab_nav').length > 0; + }); + + // 若頁面上沒有符合條件的 .w-annc,直接離開 + if ($targetAnnc.length === 0) return; + + var $tabs = $targetAnnc.find('.filter_tab'); + var $anncList = $targetAnnc.find('.w-annc__list'); // --- 1. 順向遊走:標籤 -> 對應內容 --- $tabs.on('keydown', function(e) { - // 當在標籤按下 Tab (排除 Shift+Tab) if (e.which === 9 && !e.shiftKey) { var category = $(this).data('category'); - var $visibleItems = $('.w-annc__item[data-category="' + category + '"]:visible'); - - // 如果目前選中的標籤內容有連結,跳轉到內容的第一個連結 + var $scope = $(this).closest('.w-annc'); // ✅ 限定在同一個 .w-annc + var $visibleItems = $scope.find('.w-annc__item[data-category="' + category + '"]:visible'); + if ($visibleItems.length > 0) { var $firstLink = $visibleItems.find('a').first(); if ($firstLink.length > 0) { @@ -1265,7 +1272,6 @@ } } } - // 處理標籤的 Enter/Space 切換 if (e.which === 13 || e.which === 32) { e.preventDefault(); $(this).click(); @@ -1276,25 +1282,25 @@ $anncList.on('keydown', '.w-annc__item a', function(e) { var $currentLink = $(this); var $currentItem = $currentLink.closest('.w-annc__item'); + var $scope = $currentLink.closest('.w-annc'); // ✅ 限定在同一個 .w-annc var category = $currentItem.data('category'); - var $visibleItems = $('.w-annc__item[data-category="' + category + '"]:visible'); - - // 如果是目前內容的第一個連結,按下 Shift+Tab 應回到對應標籤 + var $visibleItems = $scope.find('.w-annc__item[data-category="' + category + '"]:visible'); + if (e.which === 9 && e.shiftKey) { if ($currentLink.is($visibleItems.find('a').first())) { e.preventDefault(); - $('.filter_tab[data-category="' + category + '"]').focus(); + $scope.find('.filter_tab[data-category="' + category + '"]').focus(); } } - // 如果是目前內容的最後一個連結,按下 Tab 應跳往「下一個標籤」 if (e.which === 9 && !e.shiftKey) { if ($currentLink.is($visibleItems.find('a').last())) { - var $nextTab = $('.filter_tab[data-category="' + category + '"]').next('.filter_tab'); + var $currentTab = $scope.find('.filter_tab[data-category="' + category + '"]'); + var $nextTab = $currentTab.next('.filter_tab'); if ($nextTab.length > 0) { e.preventDefault(); $nextTab.focus(); - $nextTab.click(); // 自動切換分頁內容,符合視覺直覺 + $nextTab.click(); } } } @@ -1303,17 +1309,15 @@ // --- 3. 反向遊走:標籤 -> 上一個標籤的內容最後一個連結 --- $tabs.on('keydown', function(e) { if (e.which === 9 && e.shiftKey) { + var $scope = $(this).closest('.w-annc'); // ✅ 限定在同一個 .w-annc var $prevTab = $(this).prev('.filter_tab'); if ($prevTab.length > 0) { var prevCategory = $prevTab.data('category'); - - // 先切換到上一個分頁 $prevTab.click(); - - // 找出上一個分頁最後一個可見連結 - var $prevItems = $('.w-annc__item[data-category="' + prevCategory + '"]:visible'); + + var $prevItems = $scope.find('.w-annc__item[data-category="' + prevCategory + '"]:visible'); var $lastLink = $prevItems.find('a').last(); - + if ($lastLink.length > 0) { e.preventDefault(); $lastLink.focus();