js

assets/javascripts/app.js

@@ -3494,9 +3494,8 @@ $(function() {
                 // ✅ li 補上 role="checkbox" 讓螢幕閱讀器正確播報
                 $li.attr('role', 'checkbox');
 
-                // ✅ 初始化 aria-checked 狀態
-                var isChecked = $li.find('input[type="checkbox"]').prop('checked');
-                $li.attr('aria-checked', isChecked ? 'true' : 'false');
+                // ✅ 初始化 aria-checked 狀態（用 active class 判斷，見下方說明）
+                $li.attr('aria-checked', $li.hasClass('active') ? 'true' : 'false');
             });
         }, 800);
     }
@@ -3507,25 +3506,27 @@ $(function() {
         fixCheckItemA11y();
     });
 
-    // ✅ 改用委派綁在 document 上：不管 .check-item 是非同步才出現、
-    // 還是後來被 reorganize_roles_ul() 整批重新產生，都不會失效
-    $(document).off('keydown.checkItemA11y').on('keydown.checkItemA11y', '.check-item', function(e) {
-        if (e.which === 13 || e.which === 32) {
-            e.preventDefault();
-            var label = this.querySelector('label');
-            if (label) {
-                label.click(); // 直接點 label，瀏覽器會自動連動勾選 checkbox，click 事件也會正常往上冒泡
-            }
-        }
-    });
+  $(document).off('keydown.checkItemA11y').on('keydown.checkItemA11y', '.check-item', function(e) {
+      if (e.which === 13 || e.which === 32) {
+          e.preventDefault();
+          var checkbox = this.querySelector('input[type="checkbox"]');
+          if (checkbox) {
+              checkbox.click(); // 直接點 checkbox 本身，只會觸發「一次」click，不會像點 label 那樣被轉發成兩次
+          }
+      }
+  });
 
-    // ✅ click 後同步 aria-checked 狀態（同樣改用委派，避免被其他地方的 .off("click") 意外清掉）
-    $(document).off('click.checkItemA11y').on('click.checkItemA11y', '.check-item', function() {
-        var $li = $(this);
-        var isChecked = $li.find('input[type="checkbox"]').prop('checked');
-        $li.attr('aria-checked', isChecked ? 'true' : 'false');
-        $('.check-item').not($li).attr('aria-checked', 'false');
-    });
+  $(document).off('click.checkItemA11y').on('click.checkItemA11y', '.check-item', function() {
+      // 用 active class 判斷選取狀態，比讀 checkbox.checked 穩定：
+      // 視窗大小改變時 reorganize_roles_ul() 會用 outerHTML 重建 li，
+      // class="active" 會被保留下來，但 checkbox 的 checked 屬性不會
+      setTimeout(function(){
+          $('.check-item').each(function(){
+              var $item = $(this);
+              $item.attr('aria-checked', $item.hasClass('active') ? 'true' : 'false');
+          });
+      }, 0);
+  });
 });