Fix accessibility.

assets/javascripts/app.js

@@ -48,6 +48,31 @@
     }
     window.already_fix_first_element = true;
   }
+  function open_kenjoh(flag){
+    if(flag){
+      if (parseInt($('.layout-content').css('margin-top'))==0 && $('.layout-content.topcontent').length != 0 && $('.layout-content.topcontent').offset().top<400){
+        $('.layout-content').css('margin-top',$('.kenjohn').height()-$('#orbit-bar').height());
+      }
+      $('.kenjohn').addClass('navFixed').removeClass('navRel');   /* 幫選單加上固定效果 */
+    }else{
+      if ($('.header-banner').html().trim() == "") {
+        $('.kenjohn').removeClass('navFixed').addClass('navRel');
+      }else{
+        $('.kenjohn').removeClass('navRel').removeClass('navFixed'); /* 移除選單固定效果 */
+      }
+      $('.layout-content').css('margin-top','');
+    }
+  }
+  function recalc_kenjohn_header(){
+    $('.layout-header').css('height', '');
+    var scrollTop = $(window).scrollTop();
+    var scrollBottom = $('html').height() - $(window).height() - $('.kenjohn').height();
+    if (scrollTop>5 && scrollBottom>0)  {          /* 要滑動到選單的距離 */
+      open_kenjoh(true);
+    } else {
+      open_kenjoh(false);
+    }
+  }
   function initdata1 () {
     window.temp_scrollY = window.pageYOffset;
     window.temp_scrollX = window.pageXOffset;
@@ -57,19 +82,7 @@
     }
     // if (location.href.search('editmode') == -1 && document.getElementsByClassName('asideright').length != 0) {
     if ( $('.header-banner').length != 0) {
-      $('.layout-header').css('height', '');
+      recalc_kenjohn_header();
-      var scrollTop = $(window).scrollTop();
-      if (!window.has_topest_banner){
-        $('.kenjohn').removeClass('navRel').addClass('navFixed'); /* 正常選單固定效果 */
-      }else if (scrollTop>5) {          /* 要滑動到選單的距離 */
-        if (parseInt($('.layout-content').css('margin-top'))==0 && $('.layout-content.topcontent').length != 0 && $('.layout-content.topcontent').offset().top<400){
-          $('.layout-content').css('margin-top',$('.kenjohn').height()-$('#orbit-bar').height());
-        }
-        $('.kenjohn').addClass('navFixed').removeClass('navRel');   /* 幫選單加上固定效果 */
-      } else {
-        $('.kenjohn').removeClass('navRel').removeClass('navFixed'); /* 移除選單固定效果 */
-        $('.layout-content').css('margin-top','');
-      }
     }
     var navFixed = $('.kenjohn.navFixed');
     window.top_barrier_height = (navFixed.length ? navFixed.height() : 0) + $('#orbit-bar').height();
@@ -706,6 +719,31 @@ function transdate(){
       window.temp_scrollX = document.documentElement.scrollLeft;
     }
     if(!isMobile){
+      $('.orbit-bar-search-sign-language .logout-btn:eq(-1), #loginbutton').on('focusout', function(){
+        if(window.is_press_tab){
+          console.log('open')
+          open_kenjoh(true);
+          $('#accesskey_top').focus();
+        }
+      })
+      $('#gotocenter').on('focusout', function(){
+        recalc_kenjohn_header();
+      })
+      $('.kenjohn a').eq(-1).on('focusout', function(){
+        if(window.is_press_tab){
+          recalc_kenjohn_header();
+        }
+      })
+      $('#accesskey_top').on('focusout', function(){
+        if(window.is_press_shift_tab){
+          recalc_kenjohn_header();
+        }
+      })
+      $(document).on('click', '#accesskey_top, #accesskey_menu', function(e){
+        e.preventDefault();
+        open_kenjoh(true);
+        $(this).focus();
+      })
       $(document).on('focusin','*',function(event){
         // event.stopPropagation();
         if(window.focus_timeout_id){
@@ -732,7 +770,6 @@ function transdate(){
           }, 800);
           if ($('header>.kenjohn').attr('class') == "kenjohn" && _this.is('a.orbit-bar-logo')){
             $('header>.kenjohn').addClass('navRel');
-            $('#gotocenter').focus();
           }
         }
       });

assets/stylesheets/template/layout/content.scss

@@ -35,7 +35,7 @@ body{
     box-sizing: border-box;
   }
 
-  a:hover span {
+  a:focus span, a:hover span {
     width: 60px;
     height: 60px;
     margin-left: -30px;
@@ -44,7 +44,7 @@ body{
     border-color: #facf3d;
   }
 }
-.downIcon a:hover span::after {
+.downIcon a:focus span::after, .downIcon a:hover span::after {
   width: 21px;
   height: 21px;
   border-left-width: 4px;

assets/stylesheets/template/layout/header.scss

@@ -245,6 +245,7 @@ a#content{
       color: $theme-color-main;
       font-size: 0.6em;
       font-family: $main-font;
+      height: auto;
       @media (max-width: $screen-sm) {
         height: 5em;
         display: none;
@@ -259,46 +260,20 @@ a#content{
       .site-logo{
         width:100%!important;
       }
-             @media(min-width:1900px){
+      @media(min-width:1900px){
-                width: 225px;
+        width: 330px;
-                margin-top: -12px;
+      }
-             }
+      @media screen and (min-width:1025px) and (max-width:1899px){
-            @media screen and (min-width:1025px) and (max-width:1899px){
+        width: 261px;
-              width: 181px;
+      }
-              margin-top: -3px;
+      @media screen and (min-width:$screen-xs) and (max-width:1025px){
-            }
+        width: 200px;
-            @media screen and (min-width:769px) and (max-width:1025px){
+      }
-              width: 150px;
+      @media screen and (max-width:$screen-xs){
-              margin-top: -5px;
+        width: 150px !important;
-            }
+      }
-            @media screen and (min-width:$screen-xs) and (max-width:769px){
-              width: 146px !important;
-            }
-            @media screen and (max-width:$screen-xs){
-                width: 110px !important;
-                margin-top: 3px;
-            }
 
     }
-        .navbar-brand:nth-child(2){
-                 @media(min-width:1900px){
-                    width: 330px!important;
-                    margin-top: -14px;
-                 }
-                 @media screen and (min-width:1025px) and (max-width:1899px){
-                   width: 261px!important;
-                   margin-top: -5px;
-                 }
-                @media screen and (min-width:769px) and (max-width:1025px){
-                  width: 200px!important;
-                }
-                @media screen and (min-width:$screen-xs) and (max-width:769px){
-                  width: 200px!important;
-                }
-                @media screen and (max-width:$screen-xs){
-                    width: 150px !important;
-                }
-        }
   }
 }