update

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() {

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;

home/header.html.erb

@@ -22,10 +22,7 @@
   <div class="outdropdowns kenjohn">
   <div class="dropdowns">
   <div class="container ">
-    <div class="header-nav no-print">
+
-      <a id="accesskey_top" accesskey="U" title="accesskey top" href="#" title="Toolbar">:::</a>
-        {{header-data}}
-    </div>
     <div class="navbar-header">
         <a title="{{site_title_1}}" class="navbar-brand" href="{{home_link_1}}"><img class="site-logo" src="{{logo_url_1}}" alt="site-logo"></a>
         <script>$(document).ready(function(){var url =$('.site-logo').eq(0).attr('src');if(url == "/assets/default-site-logo.png"){$('.navbar-brand').eq(0).remove();};if($('.navbar-brand').length == 2){$('.site-logo').css('height','auto')};$('.site-logo').eq(0).css('margin-right',0);$('.navbar-brand').css('padding-right',0)})</script>
@@ -37,6 +34,10 @@
           <span class="icon-bar icon-bar-bottom"></span>
         </button>
     </div>
+    <div class="header-nav no-print">
+      <a id="accesskey_top" accesskey="U" title="accesskey top" href="#" title="Toolbar">:::</a>
+        {{header-data}}
+    </div>
   </div>
     <div class="collapse navbar-collapse modules-menu" id="layout-navigation">
     <a id="accesskey_menu" title="accesskey menu" accesskey="M" href="#" title="Main menu">:::</a>