diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index b3532c8..0704a1c 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -2873,6 +2873,44 @@ $(document).ready(function() { }); //萬用表格無障礙 +function fixSortLinkA11y() { + $('a').filter(function () { + return $(this).find('.universal-th-icon').length > 0; + }).each(function () { + var $link = $(this); + + // === Step 1: 移除 display:none 的 span === + $link.find('span').each(function () { + if ($(this).css('display') === 'none' || $(this).attr('style') && $(this).attr('style').indexOf('display: none') !== -1) { + $(this).remove(); + } + }); + + // === Step 2: 取得 aria-label === + var ariaLabel = $link.attr('aria-label') || ''; + + // 若 aria-label 空白或含未替換模板變數,從旁邊 .universal-th-text 補 + if (!ariaLabel || ariaLabel.indexOf('{{') !== -1) { + var $th = $link.closest('th, div[class*="col-"]'); + var colName = $th.find('.universal-th-text').text().trim(); + ariaLabel = colName ? '重新排序' + colName : '排序'; + $link.attr('aria-label', ariaLabel); + } + + // === Step 3: 補上 title 屬性 === + if (!$link.attr('title')) { + $link.attr('title', ariaLabel + '(在本視窗開啟)'); + } + + // === Step 4: 確保圖示有 aria-hidden === + $link.find('.universal-th-icon').attr('aria-hidden', 'true'); + + // === Step 5: 補上 visually-hidden 連結文字 === + if ($link.find('.visually-hidden').length === 0) { + $link.append('' + ariaLabel + ''); + } + }); +} function fixSearchInputA11y() { $('input[type="search"], input[type="text"]').each(function () { var $input = $(this); @@ -2912,7 +2950,10 @@ function fixSearchInputA11y() { } $(document).ready(function () { - setTimeout(fixSearchInputA11y, 500); + setTimeout(function () { + fixSortLinkA11y(); + fixSearchInputA11y(); + }, 500); }); // 執行 member等高計算,目前改用flexbox故mark掉 by ika 20160105 // $(window).load(function() {