js

assets/javascripts/app.js

@@ -2974,6 +2974,89 @@ $(document).ready(function() {
     subtree: true
   });
 
+});
+//萬用表格無障礙
+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);
+
+    // 已有對應 label 就跳過
+    var inputId = $input.attr('id');
+    if (inputId && $('label[for="' + inputId + '"]').length) return;
+
+    // 已有 aria-label / aria-labelledby / title 就跳過
+    if ($input.attr('aria-label') || $input.attr('aria-labelledby') || $input.attr('title')) return;
+
+    // 從 placeholder 取得說明文字
+    var placeholder = $input.attr('placeholder') || '';
+
+    // 從最近的 th 或欄位標題取得欄位名稱
+    var colName = '';
+    var $th = $input.closest('th, div[class*="col-"]');
+    if ($th.length) {
+      colName = $th.find('.universal-th-text').text().trim();
+    }
+
+    // 組合標籤文字
+    var label = '';
+    if (colName && placeholder) {
+      label = colName + '搜尋';
+    } else if (colName) {
+      label = colName + '搜尋';
+    } else if (placeholder) {
+      label = placeholder;
+    } else {
+      label = '搜尋關鍵字';
+    }
+
+    $input.attr('aria-label', label);
+    $input.attr('title', label);
+  });
+}
+
+$(document).ready(function () {
+  setTimeout(function () {
+    fixSortLinkA11y();
+    fixSearchInputA11y();
+  }, 500);
 });
   // 執行 member等高計算，目前改用flexbox故mark掉 by ika 20160105
   // $(window).load(function() {