fgu_a4_dark/modules/archive/archive_index13.html.erb

<div class="i-archive index-archive-13">
  <h3 class="i-archive-title">
    <span>{{page-title}}</span>
  </h3>
  <ul class="archive-categories nav nav-tabs" role="tablist" data-list="categories" data-level="0" data-no-edit="true">
    <li class="nav-item {{active_class}}" role="presentation">
      <a href="#{{category-id}}" role="tab" data-toggle="tab" title="{{category-title}}" >{{category-title}}</a>
    </li>
  </ul>
  <div class="tab-content" data-list="categories" data-level="0">
    <div class="tab-pane {{active_class}}" id="{{category-id}}" role="tabpanel" aria-labelledby="{{category-id}}-tab">
      <ul class="archives-ul" data-list="archives" data-level="1">
        <li class="archive-li">
        <div class="i-archive__item-wrap">
          <dt class="i-archive__category-item">
            <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
              <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
            </span>
            <span class="i-archive__archive-title">{{archive-title}}</span>
            <span class="description" style="margin-top: 0.5em;clear: both;width: 100%;position: relative;display: block;">{{description}}</span>
          </dt>
          <dl class="i-archive__file-list" data-list="files"  data-level="2">
            <dd class="i-archive__file-wrap">
              <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
            </dd>
          </dl>
        </div>
        </li>
      </ul>
      {{link_to_edit}}
    </div>
  </div>
</div>
<script>
  $(function() {
      function fixArchive13TabA11y() {
          setTimeout(function() {
              var $tabList = $('.index-archive-13 .archive-categories[role="tablist"]');
              if ($tabList.length === 0) return;

              var $tabs = $tabList.find('a[role="tab"]');

              // ✅ 補上每個 tab 的必要 ARIA 屬性
              $tabs.each(function(i) {
                  var $tab = $(this);
                  var $li = $tab.closest('.nav-item');
                  var panelId = ($tab.attr('href') || '').replace('#', '');
                  var tabId = panelId + '-tab';

                  // 補上 id 供 tabpanel 的 aria-labelledby 對應
                  $tab.attr('id', tabId);

                  // 補上 tabindex：active 為 0，其餘為 -1（roving tabindex 模式）
                  var isActive = $li.hasClass('active');
                  $tab.attr({
                      'tabindex': isActive ? '0' : '-1',
                      'aria-selected': isActive ? 'true' : 'false',
                      'aria-controls': panelId
                  });

                  // ✅ 補上 tabpanel 的 aria-labelledby
                  $('#' + panelId).attr('aria-labelledby', tabId);
              });

              // ✅ 方向鍵在 tab 間移動（roving tabindex 模式）
              $tabList.on('keydown', 'a[role="tab"]', function(e) {
                  var $currentTab = $(this);
                  var $allTabs = $tabList.find('a[role="tab"]');
                  var currentIndex = $allTabs.index($currentTab);
                  var $targetTab = null;

                  // 左方向鍵 / 上方向鍵
                  if (e.which === 37 || e.which === 38) {
                      e.preventDefault();
                      var prevIndex = currentIndex > 0 ? currentIndex - 1 : $allTabs.length - 1;
                      $targetTab = $allTabs.eq(prevIndex);
                  }

                  // 右方向鍵 / 下方向鍵
                  if (e.which === 39 || e.which === 40) {
                      e.preventDefault();
                      var nextIndex = currentIndex < $allTabs.length - 1 ? currentIndex + 1 : 0;
                      $targetTab = $allTabs.eq(nextIndex);
                  }

                  // Home：跳到第一個
                  if (e.which === 36) {
                      e.preventDefault();
                      $targetTab = $allTabs.first();
                  }

                  // End：跳到最後一個
                  if (e.which === 35) {
                      e.preventDefault();
                      $targetTab = $allTabs.last();
                  }

                  if ($targetTab && $targetTab.length > 0) {
                      // ✅ roving tabindex：只有目標 tab 可聚焦
                      $allTabs.attr('tabindex', '-1').attr('aria-selected', 'false');
                      $targetTab.attr('tabindex', '0').attr('aria-selected', 'true');
                      $targetTab.focus();
                      // ✅ 觸發 Bootstrap tab 切換
                      $targetTab.tab('show');
                  }
              });

              // ✅ 點擊時同步 aria-selected 和 tabindex
              $tabList.on('shown.bs.tab', 'a[role="tab"]', function() {
                  var $allTabs = $tabList.find('a[role="tab"]');
                  $allTabs.attr('tabindex', '-1').attr('aria-selected', 'false');
                  $(this).attr('tabindex', '0').attr('aria-selected', 'true');
              });

          }, 500);
      }

      fixArchive13TabA11y();
  });
</script>
<style>
.index-archive-13{
  .i-archive__status-wrap {
    display: block;
    width: 100%;
  }
  .i-archive__status-wrap {
    width: 100%;
  }
  .i-archive__item-wrap{
    display:flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .archives-ul {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.1);
    padding: 1em;
    border:1px solid #cccccc3b;
  }
} 
.i-archive__file-wrap {
    font-size: 1.2em;
    margin: 0;
    padding: 0.5em 0 0;
    border-radius: 0.125em;
}


  .index-archive-13 .archives-ul .archive-li{
    list-style-type: disc;
  }
  .index-archive-13 .archive-description{
    color: #9b9b9b;
  }
</style>