diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index d741669..862df9f 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -1658,7 +1658,7 @@ $(function() { $(function() { function fixTabLinearOrder() { var $targetAnnc = $('.w-annc').filter(function() { - return $(this).find('.tab_nav').length > 0; + return $(this).find('.tab_nav, .nav_tabs_filter').length > 0; }); if ($targetAnnc.length === 0) return; @@ -1666,8 +1666,26 @@ $(function() { var $tabs = $targetAnnc.find('.filter_tab'); var $anncList = $targetAnnc.find('.w-annc__list'); + // ✅ 新增:初始化 tab_nav / nav_tabs_filter 和 filter_tab 的 ARIA 語意 + $targetAnnc.find('.tab_nav, .nav_tabs_filter').attr('role', 'tablist'); + + $tabs.each(function() { + var $tab = $(this); + var isActive = $tab.hasClass('active'); + $tab.attr({ + 'role' : 'tab', + 'aria-selected': isActive ? 'true' : 'false', + 'tabindex' : isActive ? '0' : '-1' + }); + }); + + // 點擊時同步更新 aria-selected 和 tabindex + $tabs.on('click', function() { + $tabs.attr('aria-selected', 'false').attr('tabindex', '-1'); + $(this).attr('aria-selected', 'true').attr('tabindex', '0'); + }); + // 智慧判斷:偵測 filter_tab 用哪個屬性來分類 - // 優先用 data-tags(若有值),否則用 data-category function getTabKey($tab) { var tags = $tab.data('tags'); if (tags && tags !== '') return { attr: 'data-tags', value: tags }; @@ -1749,25 +1767,37 @@ $(function() { var $currentItem = $currentLink.closest('.w-annc__item'); var $scope = $currentLink.closest('.w-annc'); - // 找出當前 item 對應的 filter_tab var $currentTab = getTabFromItem($currentItem, $scope); if (!$currentTab.length) return; - // 找出同類別的所有可見 item var key = getTabKey($currentTab); var $visibleItems = getVisibleItems($scope, key); - // Shift+Tab:若是第一個連結,跳回對應頁籤 + var $more = $scope.find('.w-annc__more-wrap a, .w-annc__more').filter(':visible').first(); + + // Shift+Tab:若在第一個連結,跳回對應頁籤 if (e.which === 9 && e.shiftKey) { if ($currentLink.is($visibleItems.find('a').first())) { e.preventDefault(); $currentTab.focus(); } + // Shift+Tab:若在 .w-annc__more,跳回最後一個公告連結 + if ($more.length && $currentLink.is($more)) { + e.preventDefault(); + $visibleItems.find('a').last().focus(); + } } - // Tab:若是最後一個連結,跳到下一個頁籤並切換 + // Tab:若在最後一個連結,跳到 .w-annc__more if (e.which === 9 && !e.shiftKey) { if ($currentLink.is($visibleItems.find('a').last())) { + if ($more.length) { + e.preventDefault(); + $more.focus(); + } + } + // Tab:若在 .w-annc__more,才跳到下一個頁籤 + if ($more.length && $currentLink.is($more)) { var $nextTab = $currentTab.next('.filter_tab'); if ($nextTab.length > 0) { e.preventDefault();