update
This commit is contained in:
parent
8ffc18f30b
commit
60b590a25e
|
|
@ -291,9 +291,19 @@
|
|||
|
||||
// 無障礙:聚焦第一個互動元素
|
||||
if ($('.mobile-menu').hasClass('active')) {
|
||||
setTimeout(function () {
|
||||
$('.modules-menu').find('input, button, select, textarea, a').first().focus();
|
||||
}, 100);
|
||||
var $target = $($('.navbar-toggle').first().attr('data-bs-target'));
|
||||
|
||||
if ($target.length) {
|
||||
// 有 Bootstrap collapse → 等展開動畫完成再 focus
|
||||
$target.one('shown.bs.collapse', function() {
|
||||
$('.modules-menu').find('input, button, select, textarea, a').filter(':visible').first().focus();
|
||||
});
|
||||
} else {
|
||||
// 無 Bootstrap collapse → 直接 setTimeout
|
||||
setTimeout(function() {
|
||||
$('.modules-menu').find('input, button, select, textarea, a').filter(':visible').first().focus();
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -2414,7 +2424,63 @@ $(document).ready(function() {
|
|||
|
||||
init();
|
||||
});
|
||||
//post
|
||||
$(document).ready(function () {
|
||||
setTimeout(function () {
|
||||
$('iframe.twitter-share-button, iframe.twitter-tweet-button').each(function () {
|
||||
$(this).attr('title', '分享至 X 在新視窗開啟');
|
||||
});
|
||||
}, 1500);
|
||||
});
|
||||
$(function() {
|
||||
function bindIframeFocus() {
|
||||
var $iframe = $('.twitter-share-button');
|
||||
if ($iframe.length === 0) return;
|
||||
|
||||
$iframe.each(function() {
|
||||
var $wrap = $(this).closest('.tw-share-button');
|
||||
|
||||
// 讓外層可以被 tab 到並顯示焦點框
|
||||
$wrap.attr('tabindex', '-1');
|
||||
|
||||
$(window).on('blur.twitterFocus', function() {
|
||||
setTimeout(function() {
|
||||
if (document.activeElement &&
|
||||
$(document.activeElement).hasClass('twitter-share-button')) {
|
||||
$wrap.css({
|
||||
'outline': '3px solid #005fcc',
|
||||
'outline-offset': '2px',
|
||||
'border-radius': '2px'
|
||||
});
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
|
||||
$(window).on('focus.twitterFocus', function() {
|
||||
$wrap.css({
|
||||
'outline': '',
|
||||
'outline-offset': ''
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 用 MutationObserver 等 iframe 被 Twitter script 插入後才綁定
|
||||
var observer = new MutationObserver(function(mutations) {
|
||||
if ($('.twitter-share-button').length > 0) {
|
||||
bindIframeFocus();
|
||||
observer.disconnect(); // 綁定成功後停止監聽
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
|
||||
// 保險:2秒後強制執行一次
|
||||
setTimeout(bindIframeFocus, 1000);
|
||||
});
|
||||
//orbitbar無障礙js
|
||||
$(document).ready(function() {
|
||||
const isEnglish = document.documentElement.lang === 'en';
|
||||
|
|
@ -3022,6 +3088,9 @@ $(function() {
|
|||
var target = document.getElementById('gallery-theater-stage');
|
||||
if (!target) return;
|
||||
|
||||
// 頁面載入時若已存在 #gallery-theater-stage,則還原 z-index
|
||||
$('.verticalhome').css('z-index', 'auto');
|
||||
|
||||
var observer = new MutationObserver(function() {
|
||||
var display = target.style.display;
|
||||
if (display === 'block') {
|
||||
|
|
@ -3161,5 +3230,34 @@ $(document).ready(function () {
|
|||
fixSearchInputA11y();
|
||||
}, 500);
|
||||
});
|
||||
//a無障礙空連結
|
||||
function removeHiddenContentLinks() {
|
||||
// 若網址含有 editmode=on 則不執行
|
||||
if (window.location.href.indexOf('editmode=on') !== -1) return;
|
||||
|
||||
$('a').each(function () {
|
||||
var $link = $(this);
|
||||
|
||||
// 若連結本身是 display:none,直接移除
|
||||
if ($link.css('display') === 'none') {
|
||||
$link.remove();
|
||||
return;
|
||||
}
|
||||
|
||||
// 若連結內有子元素,且全部都是 display:none
|
||||
var $children = $link.children();
|
||||
if ($children.length > 0) {
|
||||
var allHidden = $children.toArray().every(function (child) {
|
||||
return $(child).css('display') === 'none';
|
||||
});
|
||||
if (allHidden) {
|
||||
$link.remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
setTimeout(removeHiddenContentLinks, 500);
|
||||
});
|
||||
}(jQuery, window));
|
||||
|
|
|
|||
|
|
@ -2,12 +2,60 @@
|
|||
|
||||
@import "../initial";
|
||||
@import "variables";
|
||||
.fa-classic, .fa-regular, .fa-solid, .far, .fas ,.fa{
|
||||
font-family: var(--fa-style-family, "FontAwesome")!important;
|
||||
}
|
||||
#orbit-bar .orbit-bar-inner > label:focus, #orbit-bar .orbit-bar-inner > label.focus{
|
||||
.orbit-bar-search-sign-language{
|
||||
display: block
|
||||
}
|
||||
}
|
||||
#orbit-bar .orbit-bar-menu .orbit-bar-logo{
|
||||
cursor: unset!important;
|
||||
}
|
||||
|
||||
.login-btn:focus {
|
||||
outline: 0.3125em auto -webkit-focus-ring-color !important;
|
||||
transition: all 0.2s ease-in-out!important;
|
||||
}
|
||||
.orbit-bar-inner{
|
||||
li.active {
|
||||
@media(min-width:768px){
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
label[for="open-orbit-login"] {
|
||||
@media(max-width:768px){
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
[accesskey="U"],[accesskey="W"]{
|
||||
@media(max-width:768px){
|
||||
color: #666!important;
|
||||
}
|
||||
}
|
||||
.orbit-bar-inner{
|
||||
[accesskey="U"]{
|
||||
height: 40px;
|
||||
display: inline-block!important;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
@media(min-width:769px){
|
||||
color: #fff!important;
|
||||
}
|
||||
}
|
||||
[accesskey="W"]{
|
||||
height: 40px;
|
||||
display: inline-block!important;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
color: #fff!important;
|
||||
@media(min-width:769px){
|
||||
color: #fff!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.orbit-bar-search-sign-language{
|
||||
@media(max-width:767px){
|
||||
position: absolute !important;
|
||||
|
|
@ -19,12 +67,12 @@
|
|||
}
|
||||
body #orbit-bar .orbit-bar-search-sign-language #search input[type="search"]{
|
||||
&:hover{
|
||||
outline: 3px solid $theme-color-third;
|
||||
outline: 3px solid $theme-color-second;
|
||||
background-color: #e6f0ff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
&:focus{
|
||||
outline: 3px solid $theme-color-third;
|
||||
outline: 3px solid $theme-color-second;
|
||||
background-color: #e6f0ff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
|
||||
<div class="container layout-footer-inner">
|
||||
<div class="layout-footer-content">{{footer-data}}</div>
|
||||
<div class="footer-counter"><a href="https://orbitek.co"><img src="/assets/orbitek.png" alt="orbitek-logo-icon" style="width: 15px;"></a>{{site-counter}}</div>
|
||||
<div class="footer-updated-date">{{last-updated}}</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -76,6 +76,14 @@
|
|||
|
||||
$caption.after($controlplay);
|
||||
}, 500);
|
||||
|
||||
$('.ba-banner-widget-0 .w-ad-banner__slide a')
|
||||
.on('focus', function() {
|
||||
$('.ba-banner-widget-0 img').css('position', 'relative');
|
||||
})
|
||||
.on('blur', function() {
|
||||
$('.ba-banner-widget-0 img').css('position', '');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style type="text/css">
|
||||
|
|
@ -91,4 +99,27 @@
|
|||
.next-button,.prev-button{
|
||||
cursor: pointer;
|
||||
}
|
||||
/* ✅ 焦點可見樣式 */
|
||||
.w-ba-banner .w-ba-banner__slide a:focus,
|
||||
.w-ba-banner .w-ba-banner__slide a:focus-visible {
|
||||
outline: 3px solid #005fcc;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.w-ba-banner .prev-button:focus,
|
||||
.w-ba-banner .prev-button:focus-visible,
|
||||
.w-ba-banner .next-button:focus,
|
||||
.w-ba-banner .next-button:focus-visible {
|
||||
outline: 3px solid #005fcc;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.w-ba-banner .controlplay a:focus,
|
||||
.w-ba-banner .controlplay a:focus-visible {
|
||||
outline: 3px solid #005fcc;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.w-ba-banner .banner-pager button:focus,
|
||||
.w-ba-banner .banner-pager button:focus-visible {
|
||||
outline: 3px solid #005fcc;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="index-content">
|
||||
<div class="index-content-inner clearfix row">
|
||||
<div class="index-pic col-xs-5 col-sm-2">
|
||||
<img class="index-img" src="{{thumb-src}}" alt="{{alt_title}}">
|
||||
<img class="img-thumbnail" src="{{thumb-src}}" alt="{{album-name}}">
|
||||
</div>
|
||||
<section class="index-part col-xs-7 col-sm-10">
|
||||
<h4 class="index-content-title">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="index-content">
|
||||
<div class="index-content-inner clearfix row">
|
||||
<div class="index-pic col-xs-5 col-sm-2">
|
||||
<img class="index-img" src="{{thumb-src}}" alt="{{alt_title}}">
|
||||
<img class="img-thumbnail" src="{{thumb-src}}" alt="{{album-name}}">
|
||||
</div>
|
||||
<section class="index-part col-xs-7 col-sm-10">
|
||||
<h4 class="index-content-title">
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
{{thumb-large-src}} 1024w,
|
||||
{{thumb-src}} 768w"
|
||||
src="{{thumb-src}}"
|
||||
alt="{{alt_title}}"
|
||||
alt="{{album-name}}"
|
||||
>
|
||||
</a>
|
||||
<a href="{{link_to_show}}" title="{{album-name}}">
|
||||
|
|
|
|||
|
|
@ -5,14 +5,14 @@
|
|||
<div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
|
||||
<div class="index-content">
|
||||
<div class="index-content-inner clearfix row">
|
||||
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
|
||||
<a href="{{link_to_show}}" title="{{album-name}}">
|
||||
<div class="index-pic col-xs-5 col-sm-2">
|
||||
<img class="index-img" src="{{thumb-src}}" alt="{{alt_title}}">
|
||||
<img class="img-thumbnail" src="{{thumb-src}}" alt="{{album-name}}">
|
||||
</div>
|
||||
</a>
|
||||
<div class="index-part col-xs-7 col-sm-10">
|
||||
<h4 class="index-content-title">
|
||||
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">{{album-name}}</a>
|
||||
<a href="{{link_to_show}}" title="{{album-name}}">{{album-name}}</a>
|
||||
</h4>
|
||||
<div class="index-img-description">{{album-description}}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
</h2>
|
||||
<div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
|
||||
<div class="index-content col-sm-3">
|
||||
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
|
||||
<a href="{{link_to_show}}" title="{{album-name}}">
|
||||
<div class="index-content-inner">
|
||||
<div class="index-pic">
|
||||
<img class="img-thumbnail" src="{{thumb-src}}" alt="{{alt_title}}">
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</a>
|
||||
<div class="index-part">
|
||||
<h4 class="index-content-title">
|
||||
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">{{album-name}}</a>
|
||||
<a href="{{link_to_show}}" title="{{album-name}}">{{album-name}}</a>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,14 +5,14 @@
|
|||
<div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
|
||||
<div class="index-content">
|
||||
<div class="index-content-inner clearfix row">
|
||||
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
|
||||
<a href="{{link_to_show}}" title="{{album-name}}">
|
||||
<div class="index-pic col-xs-5 col-sm-2">
|
||||
<img class="index-img" src="{{thumb-src}}" alt="{{alt_title}}">
|
||||
<img class="img-thumbnail" src="{{thumb-src}}" alt="{{album-name}}">
|
||||
</div>
|
||||
</a>
|
||||
<div class="index-part col-xs-7 col-sm-10">
|
||||
<h4 class="index-content-title">
|
||||
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">{{album-name}}</a>
|
||||
<a href="{{link_to_show}}" title="{{album-name}}">{{album-name}}</a>
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@
|
|||
|
||||
<div class="card-front">
|
||||
<div class="card-body" style="padding:0;">
|
||||
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
|
||||
<a href="{{link_to_show}}" title="{{album-name}}">
|
||||
<img src="{{thumb-src}}"alt="{{alt_title}}">
|
||||
</a>
|
||||
<div class="card-footer">
|
||||
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
|
||||
<a href="{{link_to_show}}" title="{{album-name}}">
|
||||
<h3 class="card-title">{{album-name}}</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@
|
|||
<div class="index-content col-sm-3">
|
||||
|
||||
<div class="index-content-inner">
|
||||
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
|
||||
<a href="{{link_to_show}}" title="{{album-name}}">
|
||||
<div class="index-pic">
|
||||
<img class="img-thumbnail" src="{{thumb-src}}" alt="{{alt_title}}">
|
||||
</div>
|
||||
</a>
|
||||
<section class="index-part">
|
||||
<h4 class="index-content-title">
|
||||
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">{{album-name}}</a>
|
||||
<a href="{{link_to_show}}" title="{{album-name}}">{{album-name}}</a>
|
||||
</h4>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue