diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index 06c6687..1b361e2 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -2315,7 +2315,7 @@ $(document).ready(function() { if ($(window).width() <769) { $('.modules-menu-level-0').after($('.header-nav')); }else{ - $('.navbar-header').before($('.header-nav')); + $('.navbar-header').after($('.header-nav')); }; $('.sitemenu-vertical .sitemenu-dropdown-toggle').click(function(){ $('.sitemenu-vertical .dropdown-menu').slideToggle(); @@ -2383,7 +2383,7 @@ $(document).ready(function() { $('.modules-menu-level-0').after($('.header-nav')); }else{ - $('.navbar-header').before($('.header-nav')); + $('.navbar-header').after($('.header-nav')); }; if ($(window).width() > 821) { @@ -2907,6 +2907,65 @@ $(document).ready(function () { setTimeout(function () { $('.dtr-control').removeAttr('tabindex'); }, 500); +}); +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(); }); // 執行 member等高計算,目前改用flexbox故mark掉 by ika 20160105 // $(window).load(function() { diff --git a/assets/stylesheets/template/layout/header.scss b/assets/stylesheets/template/layout/header.scss index b1810ed..9c108fe 100644 --- a/assets/stylesheets/template/layout/header.scss +++ b/assets/stylesheets/template/layout/header.scss @@ -118,9 +118,6 @@ margin-top: 1em!important; margin-bottom: 1em!important; } - @media (min-width: 769px){ - float: none!important; - } // @media (max-width: $screen-sm) { // width: 100%; // display: flex; diff --git a/home/header.html.erb b/home/header.html.erb index b510991..0070d94 100644 --- a/home/header.html.erb +++ b/home/header.html.erb @@ -22,10 +22,7 @@