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', '');
-      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','');
-      }
+      recalc_kenjohn_header();
     }
     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){
-                width: 225px;
-                margin-top: -12px;
-             }
-            @media screen and (min-width:1025px) and (max-width:1899px){
-              width: 181px;
-              margin-top: -3px;
-            }
-            @media screen and (min-width:769px) and (max-width:1025px){
-              width: 150px;
-              margin-top: -5px;
-            }
-            @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;
-            }
+      @media(min-width:1900px){
+        width: 330px;
+      }
+      @media screen and (min-width:1025px) and (max-width:1899px){
+        width: 261px;
+      }
+      @media screen and (min-width:$screen-xs) and (max-width:1025px){
+        width: 200px;
+      }
+      @media screen and (max-width:$screen-xs){
+        width: 150px !important;
+      }
 
     }
-        .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;
-                }
-        }
   }
 }
 

modules/calendar/_calendar_widget1.html.erb

@@ -2,7 +2,7 @@
     <div class='month_template'>
             <h4 class="widget-title ">
                 <span class="text"><span style="display: none;">placeholder</span></span>
-                <i class="fa fa-circle-o-notch fa-spin fa-fw loading hide"></i> 
+                <i class="fa fa-circle-o-notch fa-spin fa-fw loading hide"></i>
             </h4>
         <div class="w-calendar-nav">
             <a href="#" class="w-calendar-nav-prev">
@@ -28,9 +28,7 @@
     <div class="calendar-events" style="display: none;">
         <div class="close_box">X</div>
         <div class="event-header"></div>
-        <div class="event-containers">
-            
-        </div>
+        <div class="event-containers"></div>
     </div> 
 </div>
 <%= stylesheet_link_tag "calendar_widget1" %>

modules/calendar/_calendar_widget2.html.erb

@@ -6,7 +6,7 @@
     <div class='month_template'>
         <h4 class="widget-title">
             <span class="text"><span style="display: none;">placeholder</span></span>
-            <i class="fa fa-circle-o-notch fa-spin fa-fw loading hide"></i> 
+            <i class="fa fa-circle-o-notch fa-spin fa-fw loading hide"></i>
         </h4>
         <div class="w-calendar-nav">
             <a href="#" class="w-calendar-nav-prev">
@@ -42,9 +42,7 @@
                 </div>
             </div>
             <div class="event-wraper">
-                <div class="event-containers">
-                    
-                </div>
+                <div class="event-containers"></div>
             </div>
         </div>
     </div>