update
This commit is contained in:
parent
68f01330ed
commit
880032a416
|
|
@ -3128,6 +3128,128 @@ function fixCarouselBtnA11y() {
|
|||
|
||||
$(document).ready(function () {
|
||||
fixCarouselBtnA11y();
|
||||
});
|
||||
//cycle2無障礙
|
||||
$(document).ready(function() {
|
||||
// 取得頁面上所有的 Cycle2 輪播圖
|
||||
var $allSlideshows = $('.cycle-slideshow');
|
||||
|
||||
/**
|
||||
* 核心無障礙狀態刷新函式
|
||||
*/
|
||||
function refreshCycleA11y($el) {
|
||||
var $items = $el.find('.w-annc__item, .widget-link__item, [class*="cycle-slide"], .widget-pic');
|
||||
|
||||
$items.each(function() {
|
||||
var $slide = $(this);
|
||||
var isActive = $slide.hasClass('cycle-slide-active');
|
||||
|
||||
if (isActive) {
|
||||
// ✅ li 只設 aria-hidden，不加 tabindex
|
||||
$slide.attr('aria-hidden', 'false');
|
||||
$slide.removeAttr('tabindex'); // ← 確保 li 本身沒有 tabindex
|
||||
$slide.find('a, button, input, [tabindex]').attr('tabindex', '0');
|
||||
} else {
|
||||
// 隱藏中的投影片：徹底隔離
|
||||
$slide.attr('aria-hidden', 'true');
|
||||
$slide.removeAttr('tabindex');
|
||||
$slide.find('a, button, input, [tabindex]').attr('tabindex', '-1');
|
||||
}
|
||||
});
|
||||
|
||||
// --- 防鎖死邊界處理 (Shift + Tab) ---
|
||||
var $container = $el.closest('.w-annc, .widget-link_wrapper, .widget-link');
|
||||
var $prevBtn = $container.find('.btn-left, .prev-button');
|
||||
|
||||
$el.find('.cycle-slide-active a, .cycle-slide-active button').first()
|
||||
.off('keydown.a11y').on('keydown.a11y', function(e) {
|
||||
if (e.keyCode === 9 && e.shiftKey) {
|
||||
if ($prevBtn.length) {
|
||||
e.preventDefault();
|
||||
$prevBtn.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 針對 widget-link 非語意化標籤 (如 i 標籤當按鈕) 的無障礙補強
|
||||
*/
|
||||
function refreshCycleA11y($el) {
|
||||
var $items = $el.find('.w-annc__item, .widget-link__item, [class*="cycle-slide"]');
|
||||
|
||||
$items.each(function() {
|
||||
var $slide = $(this);
|
||||
var isActive = $slide.hasClass('cycle-slide-active');
|
||||
|
||||
if (isActive) {
|
||||
// ✅ li 只設 aria-hidden，不加 tabindex
|
||||
$slide.attr('aria-hidden', 'false');
|
||||
$slide.removeAttr('tabindex'); // ← 確保 li 本身沒有 tabindex
|
||||
$slide.find('a, button, input, [tabindex]').attr('tabindex', '0');
|
||||
} else {
|
||||
// 隱藏中的投影片：徹底隔離
|
||||
$slide.attr('aria-hidden', 'true');
|
||||
$slide.removeAttr('tabindex');
|
||||
$slide.find('a, button, input, [tabindex]').attr('tabindex', '-1');
|
||||
}
|
||||
});
|
||||
|
||||
// --- 防鎖死邊界處理 (Shift + Tab) ---
|
||||
var $container = $el.closest('.w-annc, .widget-link_wrapper, .widget-link');
|
||||
var $prevBtn = $container.find('.btn-left, .prev-button');
|
||||
|
||||
$el.find('.cycle-slide-active a, .cycle-slide-active button').first()
|
||||
.off('keydown.a11y').on('keydown.a11y', function(e) {
|
||||
if (e.keyCode === 9 && e.shiftKey) {
|
||||
if ($prevBtn.length) {
|
||||
e.preventDefault();
|
||||
$prevBtn.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 輔助函式：切換後更新 A11y 狀態並鎖定焦點
|
||||
function triggerPostUpdate($el, $activeBtn) {
|
||||
$el.one('cycle-after', function() {
|
||||
setTimeout(function() {
|
||||
refreshCycleA11y($el);
|
||||
$activeBtn.focus();
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 舊有按鈕事件相容與整合
|
||||
*/
|
||||
$(document).on('keydown', '.btn-right, .btn-left', function(e) {
|
||||
if (e.keyCode === 13) {
|
||||
var $btn = $(this);
|
||||
var $el = $btn.closest('.w-annc').find('.cycle-slideshow');
|
||||
triggerPostUpdate($el, $btn);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 綁定 Cycle2 核心事件
|
||||
*/
|
||||
$allSlideshows.on('cycle-initialized cycle-after', function() {
|
||||
var $this = $(this);
|
||||
setTimeout(function() {
|
||||
refreshCycleA11y($this);
|
||||
}, 300);
|
||||
});
|
||||
|
||||
// 初始化執行
|
||||
patchWidgetLinkElements();
|
||||
|
||||
$allSlideshows.each(function() {
|
||||
var $this = $(this);
|
||||
setTimeout(function() {
|
||||
refreshCycleA11y($this);
|
||||
}, 500);
|
||||
});
|
||||
});
|
||||
// 執行 member等高計算，目前改用flexbox故mark掉 by ika 20160105
|
||||
// $(window).load(function() {
|
||||
|
|
|
|||
|
|
@ -1938,7 +1938,7 @@
|
|||
// Widget-11
|
||||
.widget-announcement-11 {
|
||||
.w-annc__postdate-wrap{
|
||||
color: #CEB60F;
|
||||
color: #817003;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
letter-spacing: 1.5px;
|
||||
}
|
||||
|
|
@ -2593,7 +2593,7 @@
|
|||
.i-annc__content,.i-annc__postdate,.category{
|
||||
// border-bottom: 0.0625em dashed #ddd!important;
|
||||
border-top: 0!important;
|
||||
color: #CEB60F;
|
||||
color: #817003;
|
||||
}
|
||||
.i-annc__postdate,
|
||||
.i-annc__category,
|
||||
|
|
|
|||
|
|
@ -20,6 +20,9 @@
|
|||
}
|
||||
// Gallery MODULES
|
||||
.widget-gallery {
|
||||
.button-mid{
|
||||
z-index: 202;
|
||||
}
|
||||
.widget-title {
|
||||
@extend .unity-title;
|
||||
}
|
||||
|
|
@ -31,6 +34,7 @@
|
|||
&.widget1 {
|
||||
border: 5px solid #85BF5E;
|
||||
padding: 0 60px;
|
||||
position: relative;
|
||||
.gallery-button-mid{
|
||||
.next-button{
|
||||
border-radius: 0;
|
||||
|
|
@ -43,9 +47,7 @@
|
|||
color: #fff;
|
||||
cursor: pointer;
|
||||
right: 0;
|
||||
@media(min-width:769px){
|
||||
right: 0.9375em;
|
||||
}
|
||||
|
||||
}
|
||||
.prev-button{
|
||||
border-radius: 0;
|
||||
|
|
@ -58,9 +60,7 @@
|
|||
color: #fff;
|
||||
cursor: pointer;
|
||||
left: 0;
|
||||
@media(min-width:769px){
|
||||
left: 0.9375em;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.cycle-carousel-wrap{
|
||||
|
|
|
|||
|
|
@ -86,14 +86,14 @@
|
|||
<section class="two-column col-sm-7" data-pp="41"></section>
|
||||
</div>
|
||||
<div class="column row">
|
||||
<section class="extra-box col-sm-12 swiper-banner" data-pp="201"></section>
|
||||
<section class="extra-box swiper-banner" data-pp="201"></section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="i_link_bg">
|
||||
<div class="layout-content-inner container">
|
||||
<div class="column row">
|
||||
<section class="extra-box col-sm-12 swiper-banner" data-pp="2011"></section>
|
||||
<section class="extra-box swiper-banner" data-pp="2011"></section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,16 @@
|
|||
<h3 class="gallery-widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h3>
|
||||
|
||||
<ul class="gallery-button-mid">
|
||||
<i class="fa fa-angle-left prev-button" aria-label="上一張" tabindex="0" role="button"></i>
|
||||
<i class="fa fa-angle-right next-button" aria-label="下一張" tabindex="0" role="button"></i>
|
||||
</ul>
|
||||
<div class="cycle-slideshow widget-content"
|
||||
data-level="0"
|
||||
data-list="images"
|
||||
data-cycle-slides="> .widget-pic"
|
||||
data-cycle-fx="carousel"
|
||||
data-cycle-timeout="3000"
|
||||
data-cycle-timeout="0"
|
||||
data-cycle-carousel-visible="1"
|
||||
data-cycle-pause-on-hover="true"
|
||||
data-cycle-log="false"
|
||||
|
|
@ -28,20 +31,22 @@
|
|||
src="{{thumb-src}}"
|
||||
alt="{{alt_title}}"
|
||||
>
|
||||
</a>
|
||||
<a href="{{link_to_show}}" title="{{album-name}}">
|
||||
<div class="mask_title">{{image_description}}</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<ul class="gallery-button-mid">
|
||||
<i class="fa fa-angle-left prev-button" aria-label="上一張"></i>
|
||||
<i class="fa fa-angle-right next-button" aria-label="下一張"></i>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="banner-pager"></div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.banner-pager{
|
||||
display:none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
data-list="images"
|
||||
data-cycle-slides="> .widget-pic"
|
||||
data-cycle-fx="carousel"
|
||||
data-cycle-timeout="3000"
|
||||
data-cycle-timeout="0"
|
||||
data-cycle-carousel-visible="4"
|
||||
data-cycle-pause-on-hover="true"
|
||||
data-cycle-log="false"
|
||||
|
|
|
|||
Loading…
Reference in New Issue