This commit is contained in:
parent
499adab9b3
commit
c4857338fc
|
|
@ -3310,6 +3310,149 @@ $(document).ready(function () {
|
|||
$btn.focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
$(document).ready(function () {
|
||||
var $searchBox = $('.search-box');
|
||||
var $btn = $('.btn-search');
|
||||
var $input = $('.input-search');
|
||||
|
||||
// ✅ 將按鈕移到 input 之前，Tab 順序變為：按鈕 → input → 送出
|
||||
$btn.insertBefore($input);
|
||||
|
||||
// ✅ 補充 aria-label 說明展開收合功能
|
||||
$btn.attr('aria-label', '展開或收合搜尋欄');
|
||||
$btn.attr('title', '展開或收合搜尋欄');
|
||||
|
||||
// 點擊按鈕展開/收合
|
||||
$btn.on('click', function () {
|
||||
var isExpanded = $btn.attr('aria-expanded') === 'true';
|
||||
if (isExpanded) {
|
||||
$btn.attr('aria-expanded', 'false');
|
||||
$btn.attr('aria-label', '展開搜尋欄');
|
||||
$('.search-box').removeClass('searching');
|
||||
$input.blur();
|
||||
} else {
|
||||
$btn.attr('aria-expanded', 'true');
|
||||
$btn.attr('aria-label', '收合搜尋欄');
|
||||
$('.search-box').addClass('searching');
|
||||
$input.focus();
|
||||
}
|
||||
});
|
||||
|
||||
// focusin 同步狀態
|
||||
$searchBox.on('focusin', function () {
|
||||
$btn.attr('aria-expanded', 'true');
|
||||
$btn.attr('aria-label', '收合搜尋欄');
|
||||
$searchBox.addClass('searching');
|
||||
});
|
||||
|
||||
// focusout 同步狀態
|
||||
$searchBox.on('focusout', function () {
|
||||
setTimeout(function () {
|
||||
if (!$searchBox.find(':focus').length) {
|
||||
$btn.attr('aria-expanded', 'false');
|
||||
$btn.attr('aria-label', '展開搜尋欄');
|
||||
$searchBox.removeClass('searching');
|
||||
}
|
||||
}, 150);
|
||||
});
|
||||
|
||||
// Escape 收合
|
||||
$input.on('keydown', function (e) {
|
||||
if (e.keyCode === 27) {
|
||||
$btn.attr('aria-expanded', 'false');
|
||||
$btn.attr('aria-label', '展開搜尋欄');
|
||||
$searchBox.removeClass('searching');
|
||||
$btn.focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
function fixTabKeyboardNav() {
|
||||
setTimeout(function () {
|
||||
var $tablist = $('.member-plugins[role="tablist"]');
|
||||
var $tabs = $tablist.find('a[role="tab"]');
|
||||
|
||||
// 初始化 roving tabindex 和 aria-selected
|
||||
$tabs.each(function (i) {
|
||||
var $tab = $(this);
|
||||
var isActive = $tab.closest('li').hasClass('active');
|
||||
$tab.attr({
|
||||
'tabindex': isActive ? '0' : '-1',
|
||||
'aria-selected': isActive ? 'true' : 'false'
|
||||
});
|
||||
});
|
||||
|
||||
// 方向鍵切換頁籤
|
||||
$tabs.on('keydown', function (e) {
|
||||
var $current = $(this);
|
||||
var currentIndex = $tabs.index($current);
|
||||
var $target;
|
||||
|
||||
if (e.keyCode === 39 || e.keyCode === 40) {
|
||||
// 右鍵或下鍵：下一個
|
||||
e.preventDefault();
|
||||
$target = $tabs.eq((currentIndex + 1) % $tabs.length);
|
||||
} else if (e.keyCode === 37 || e.keyCode === 38) {
|
||||
// 左鍵或上鍵：上一個
|
||||
e.preventDefault();
|
||||
$target = $tabs.eq((currentIndex - 1 + $tabs.length) % $tabs.length);
|
||||
} else if (e.keyCode === 36) {
|
||||
// Home：第一個
|
||||
e.preventDefault();
|
||||
$target = $tabs.first();
|
||||
} else if (e.keyCode === 35) {
|
||||
// End：最後一個
|
||||
e.preventDefault();
|
||||
$target = $tabs.last();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新 roving tabindex 和 aria-selected
|
||||
$tabs.attr({ 'tabindex': '-1', 'aria-selected': 'false' });
|
||||
$target.attr({ 'tabindex': '0', 'aria-selected': 'true' });
|
||||
$target.focus().trigger('click');
|
||||
});
|
||||
|
||||
// 點擊頁籤時同步更新狀態
|
||||
$tabs.on('click', function () {
|
||||
$tabs.attr({ 'tabindex': '-1', 'aria-selected': 'false' });
|
||||
$(this).attr({ 'tabindex': '0', 'aria-selected': 'true' });
|
||||
});
|
||||
|
||||
}, 500);
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
fixTabKeyboardNav();
|
||||
});
|
||||
function removeBareUrlLinks() {
|
||||
setTimeout(function () {
|
||||
$('.dtr-control a').each(function () {
|
||||
var $a = $(this);
|
||||
var text = $a.text().trim();
|
||||
var href = $a.attr('href') || '';
|
||||
|
||||
// 判斷連結文字是否為網址（以 http:// 或 https:// 開頭）
|
||||
if (/^https?:\/\//i.test(text)) {
|
||||
$a.replaceWith(text);
|
||||
}
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
removeBareUrlLinks();
|
||||
});
|
||||
$(document).ready(function () {
|
||||
$('.widget-breadcrumb .breadcrumb li:last-child a').attr('aria-current', 'page');
|
||||
|
||||
// 若尚未有 nav 包住，自動加上
|
||||
$('.widget-breadcrumb .breadcrumb').each(function () {
|
||||
if (!$(this).closest('nav').length) {
|
||||
$(this).wrap('<nav aria-label="麵包屑導覽"></nav>');
|
||||
}
|
||||
});
|
||||
});
|
||||
// 執行 member等高計算，目前改用flexbox故mark掉 by ika 20160105
|
||||
// $(window).load(function() {
|
||||
|
|
|
|||
|
|
@ -17358,9 +17358,6 @@ img.sppb-element-lazy.sppb-element-loaded {
|
|||
}
|
||||
|
||||
.sppb-reset-button-styles {
|
||||
background: 0 0;
|
||||
border: none;
|
||||
outline: 0;
|
||||
text-align: inherit
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -395,6 +395,7 @@ body {
|
|||
color:#fff;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
padding: 1em 0.5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
Loading…
Reference in New Issue