From fc246a4961a4498322d73265b9b37b9789f67994 Mon Sep 17 00:00:00 2001 From: rulingcom Date: Sat, 8 Jul 2023 16:55:36 +0800 Subject: [PATCH] Fix accessibility. --- assets/javascripts/app.js | 65 +++++++++++++++---- .../stylesheets/template/layout/content.scss | 4 +- .../stylesheets/template/layout/header.scss | 51 ++++----------- 3 files changed, 66 insertions(+), 54 deletions(-) diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index 40bc89a..efc9e67 100644 --- a/assets/javascripts/app.js +++ b/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(); } } }); diff --git a/assets/stylesheets/template/layout/content.scss b/assets/stylesheets/template/layout/content.scss index 91c8f16..cd54334 100644 --- a/assets/stylesheets/template/layout/content.scss +++ b/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; diff --git a/assets/stylesheets/template/layout/header.scss b/assets/stylesheets/template/layout/header.scss index 836086b..9ffdab8 100644 --- a/assets/stylesheets/template/layout/header.scss +++ b/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; - } - } } }