js

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('<span class="visually-hidden">' + ariaLabel + '</span>');
+    }
+  });
+}
 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() {