js

assets/javascripts/app.js

@@ -2871,6 +2871,48 @@ $(document).ready(function() {
     subtree: true
   });
 
+});
+//萬用表格無障礙
+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(fixSearchInputA11y, 500);
 });
   // 執行 member等高計算，目前改用flexbox故mark掉 by ika 20160105
   // $(window).load(function() {