Fix accessibility.

assets/javascripts/app.js

@@ -49,22 +49,8 @@
     }
     window.already_fix_first_element = true;
   }
-  function initdata1 () {
+  function open_kenjoh(flag){
-    window.temp_scrollY = window.pageYOffset;
+    if(flag){
-    window.temp_scrollX = window.pageXOffset;
-    if(window.temp_scrollY == undefined){
-        window.temp_scrollY = document.documentElement.scrollTop;
-        window.temp_scrollX = document.documentElement.scrollLeft;
-    }
-    if ($('.header-banner').html().trim() == "") {
-      $('.downIcon').css('display','none')
-    }
-    // if (location.href.search('editmode') == -1 && document.getElementsByClassName('asideright').length != 0) {
-    if ( $('.header-banner').length != 0) {
-      $('.layout-header').css('height', '');
-      var scrollTop = $(window).scrollTop();
-      var scrollBottom = $('html').height() - $(window).height() - $('.kenjohn').height();
-      if (scrollTop>5 && scrollBottom>0)  {          /* 要滑動到選單的距離 */
       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());
       }
@@ -78,6 +64,30 @@
       $('.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;
+    if(window.temp_scrollY == undefined){
+        window.temp_scrollY = document.documentElement.scrollTop;
+        window.temp_scrollX = document.documentElement.scrollLeft;
+    }
+    if ($('.header-banner').html().trim() == "") {
+      $('.downIcon').css('display','none')
+    }
+    // if (location.href.search('editmode') == -1 && document.getElementsByClassName('asideright').length != 0) {
+    if ( $('.header-banner').length != 0) {
+      recalc_kenjohn_header();
+    }
     var navFixed = $('.kenjohn.navFixed');
     window.top_barrier_height = (navFixed.length ? navFixed.height() : 0) + $('#orbit-bar').height();
   }
@@ -406,9 +416,67 @@
       },
 
       ClickMenuHandler: function() {
+        $('.orbit-bar-search-sign-language .logout-btn:eq(-1), #loginbutton').on('focusout', function(){
+          if(window.is_press_tab){
+            open_kenjoh(true);
+            $('#accesskey_top').focus();
+          }
+        })
+        $('#gotocenter').on('focusout', function(){
+          recalc_kenjohn_header();
+        })
+        $('.kenjohn .navbar-toggle').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();
+          }
+        })
+        var focusable_items = $('.mobile-menu').find('a, button');
+        var focusout_func1 = function(){
+          if(window.is_press_tab){
+            focusable_items.eq(0).focus();
+          }
+        }
+        var focusout_func2 = function(){
+          if(window.is_press_shift_tab){
+            focusable_items.eq(-1).focus();
+          }
+        }
+        var fix_menu_focus = function(enable){
+          if(enable){
+            focusable_items.focus();
+            focusable_items.eq(-1).on('focusout', focusout_func1);
+            focusable_items.eq(0).on('focusout', focusout_func2);
+          }else{
+            focusable_items.eq(-1).off('focusout', focusout_func1);
+            focusable_items.eq(0).off('focusout', focusout_func2);
+          }
+        }
+        $('#accesskey_menu').click(function(e){
+          e.preventDefault();
+          if(!$('body').hasClass('noscroll')){
+            $('body').data('org-scrollY', window.temp_scrollY);
+            $('body').css('top', '-' +  window.temp_scrollY.toString() + 'px');
+            $('body').addClass('noscroll');
+            $('.mobile-menu').addClass('active');
+            fix_menu_focus(true);
+            $('.mobile-menu .navbar-toggle').removeClass('collapsed');
+            // $menu.slideToggle();
+            $('.mobile-menu1 > ul').slideUp(500);
+            $('.mobile-menu1 > .menu-drop').removeClass('opened');
+            $('.mobile-menu2 > ul').slideUp(500);
+            $('.mobile-menu2 > .menu-drop').removeClass('opened');
+            $('#layout-navigation').addClass('in');
+          }
+        })
         $('.navbar-toggle').click(function(e){
           e.preventDefault();
           if($('body').hasClass('noscroll')){
+            fix_menu_focus(false);
             $('.mobile-menu').removeClass('active');
             window.setTimeout(function(){
               $('body').removeClass('noscroll');
@@ -420,6 +488,7 @@
             $('body').css('top', '-' +  window.temp_scrollY.toString() + 'px');
             $('body').addClass('noscroll');
             $('.mobile-menu').addClass('active');
+            fix_menu_focus(true);
           }
 
           $('.mobile-menu .navbar-toggle').removeClass('collapsed');
@@ -733,6 +802,10 @@ function transdate(){
         if(_this.is('body')){
           return;
         }
+        if(_this.is('#gotocenter')){
+          open_kenjoh(true);
+          return;
+        }
         if($('body').css('position') != 'fixed' && !_this.hasClass('close-screen-btn') && !_this.hasClass('navbar-toggle')){
           var ele_offset = _this[0].getBoundingClientRect().top;
           if(_this.parents('.kenjohn.navFixed').length == 0)
@@ -750,7 +823,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/base/_global.scss

@@ -11,7 +11,6 @@ body {
   font-family: $sub-font;
   font-size: inherit;
   margin-top: 2.5em;
-  overflow: hidden scroll;
   background-color: #F8F8F8;
 }
 

assets/stylesheets/template/layout/content.scss

@@ -1,7 +1,11 @@
 @charset "utf-8";
 
 @import "../initial";
+html{
+  overflow: hidden auto;
+}
 body{
+  overflow: hidden;
   @media (min-width: 1150px){
     .black-screen-social-window.reactable{
       .content-social .social_wrap i, .content-social .social_wrap img {
@@ -35,7 +39,7 @@ body{
     box-sizing: border-box;
   }
 
-  a:hover span {
+  a:focus span, a:hover span {
     width: 60px;
     height: 60px;
     margin-left: -30px;

assets/stylesheets/template/layout/header.scss

@@ -26,7 +26,7 @@
           display: flex;
           justify-content: center;
   }
-  & > * {
+  & > *:not(style, script) {
     display: inline-block;
     margin-top: 0;
     margin-bottom: 0;
@@ -209,7 +209,11 @@ a#content{
     .container {
         @extend .response-container;
     }
-  .header-banner { overflow: hidden; }
+
+    .header-banner {
+        overflow: hidden;
+    }
+
     .jp-audio, .jp-audio-stream, .jp-video {
         border: 0px;
     }
@@ -222,6 +226,7 @@ a#content{
         @media (max-width: 768px) {
             position: relative !important;
         }
+
         @media (min-width: $screen-sm) {
             height: 150px;
             margin: 0;
@@ -230,67 +235,50 @@ a#content{
             font-size: 1em;
             display: flex;
         }
+
         .navbar-brand {
             margin: 0;
-      padding-bottom: 0;
+            padding: 0;
             line-height: 2.125em;
             color: $theme-color-main;
             font-size: 0.6em;
             font-family: $main-font;
+            height: auto;
             @media (max-width: $screen-sm) {
                 height: 5em;
                 display: none;
             }
+
             @media (min-width: 769px) {
                 display: none;
             }
+
             @media (max-width: 480px) {
                 margin: 0;
             }
+
             .default_site_h1 {
                 width: 100% !important;
             }
+
             .site-logo {
                 width: 100% !important;
             }
+
             @media(min-width:1900px) {
-                width: 225px;
+                width: 330px;
-                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;
             }
 
-    }
-        .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;
+                width: 261px;
-                   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:1025px) {
-                }
+                width: 200px;
-                @media screen and (min-width:$screen-xs) and (max-width:769px){
-                  width: 200px!important;
             }
+
             @media screen and (max-width:$screen-xs) {
-                    width: 150px !important;
+                width: 150px;
             }
         }
     }

home/header.html.erb

@@ -26,6 +26,9 @@
     <div class="outdropdowns">
       <div class="container dropdowns">
         <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>
+          <a title="{{site_title}}" class="navbar-brand" href="{{home_link}}"><img class="site-logo" src="{{logo_url}}" alt="site-logo"> {{site_name}}</a>
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#layout-navigation">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar icon-bar-top"></span>
@@ -34,9 +37,6 @@
             <span class="site-trigger__text">
           MENU  </span>
           </button>
-          <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>
-          <a title="{{site_title}}" class="navbar-brand" href="{{home_link}}"><img class="site-logo" src="{{logo_url}}" alt="site-logo"> {{site_name}}</a>
         </div>
         <div class="collapse navbar-collapse modules-menu modules-menus" id="layout-navigation">
           <a id="accesskey_menu" title="accesskey menu" accesskey="M" href="#" title="Main menu">:::</a>