update
This commit is contained in:
parent
0ec89e42ab
commit
1a64f7c8e5
|
|
@ -11,7 +11,7 @@
|
||||||
data-cycle-timeout="{{timeout}}"
|
data-cycle-timeout="{{timeout}}"
|
||||||
data-cycle-fx="{{ad_fx}}"
|
data-cycle-fx="{{ad_fx}}"
|
||||||
data-pager=".banner_caption_{{subpart-id}}"
|
data-pager=".banner_caption_{{subpart-id}}"
|
||||||
data-cycle-pager-template="<li role='tab' tabindex='0' aria-selected='false' aria-label='{{title}}'><img src='{{src}}' alt='' aria-hidden='true'></li>"
|
data-cycle-pager-template="<li role='tab' tabindex='0' aria-selected='false'><img src='{{src}}' alt='' aria-hidden='true'></li>"
|
||||||
data-pager-active-class="active-slide"
|
data-pager-active-class="active-slide"
|
||||||
data-cycle-youtube="true"
|
data-cycle-youtube="true"
|
||||||
data-cycle-youtube-autostart="false"
|
data-cycle-youtube-autostart="false"
|
||||||
|
|
@ -559,16 +559,38 @@ function fixBannerPagerA11y($pager) {
|
||||||
// 外層補 tablist role
|
// 外層補 tablist role
|
||||||
$pager.attr('role', 'tablist').attr('aria-label', '輪播影片選擇');
|
$pager.attr('role', 'tablist').attr('aria-label', '輪播影片選擇');
|
||||||
|
|
||||||
|
// 取得對應 banner 的所有 slide
|
||||||
|
var $banner = $pager.closest('.w-ad-banner');
|
||||||
|
var $slides = $banner.find('.w-ad-banner__slide');
|
||||||
|
|
||||||
// 每個 li 補 role/tabindex/aria-label/aria-selected
|
// 每個 li 補 role/tabindex/aria-label/aria-selected
|
||||||
$pager.find('li').each(function(i) {
|
$pager.find('li').each(function(i) {
|
||||||
var $li = $(this);
|
var $li = $(this);
|
||||||
|
|
||||||
// 取得影片標題:優先用 template 已帶入的 aria-label,其次用 img alt,最後 fallback 第N張
|
// 從對應 slide 取得標題
|
||||||
var existingLabel = ($li.attr('aria-label') || '').trim();
|
// 優先順序:data-title > overlay caption 文字 > iframe title > 第N張影片
|
||||||
var imgAlt = ($li.find('img').attr('alt') || '').trim();
|
var $slide = $slides.eq(i);
|
||||||
var label = (existingLabel && existingLabel !== '第' + (i + 1) + '張')
|
var slideTitle = '';
|
||||||
? existingLabel
|
|
||||||
: (imgAlt ? imgAlt : '第' + (i + 1) + '張影片');
|
// 1. 嘗試從 slide 的 data-title 取得
|
||||||
|
slideTitle = ($slide.attr('data-title') || '').trim();
|
||||||
|
|
||||||
|
// 2. 嘗試從 overlay caption 文字取得
|
||||||
|
if (!slideTitle) {
|
||||||
|
slideTitle = ($slide.find('.w-ad-banner__caption_text').text() || '').trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. 嘗試從 iframe title 取得
|
||||||
|
if (!slideTitle) {
|
||||||
|
slideTitle = ($slide.find('iframe').attr('title') || '').trim();
|
||||||
|
// 排除無意義的 iframe title
|
||||||
|
if (slideTitle.toLowerCase() === 'youtube' || slideTitle.toLowerCase() === 'video') {
|
||||||
|
slideTitle = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4. fallback
|
||||||
|
var label = slideTitle || ('第' + (i + 1) + '張影片');
|
||||||
|
|
||||||
$li
|
$li
|
||||||
.attr('role', 'tab')
|
.attr('role', 'tab')
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue