vertical_3c/modules/announcement/_annc_widget4.html.erb

<div class="w-annc  widget-announcement-4">
  <div class="w-annc__more-wrap clearfix">
    <h3 class="w-annc__widget-title">
      <span>{{widget-title}}</span>
    </h3>
    <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
  </div>
  <ul class="w-annc__list  row" data-level="0" data-list="announcements">
    <li class="w-annc__item  col-md-4" data-href="{{link_to_show}}" tabindex="0" role="link">
	
	 <div class="w-annc__item_inner"  >
		<div class="w-annc__img-wrap" style="position:relative">
			<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
			<div class="transitionfade"></div>
		</div>
		<div class="w-annc__content-wrap">
		<div class="w-annc__meta">
			<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
			<span class="w-annc__status label {{status-class}}">{{status}}</span>
			</span>
			<span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
			<i class="fa-regular fa-calendar"></i>
			<span class="w-annc__postdate">{{postdate}}</span>
			</span>
			<span class="w-annc__category-wrap">
			<i class="fa-solid fa-list"></i>
			<span class="w-annc__category">{{category}}</span>
			</span>
		</div>
		<h4 class="w-annc__entry-title">
			<span class="w-annc__title" >{{title}}</span>
		</h4>
		<p class="w-annc__subtitle">{{subtitle}}</p>
		</div>
	 </div>

    </li>
  </ul>
</div>
<style type="text/css">
.w-annc__item_inner{
	cursor: pointer;
}
.widget-title-a {
  display: block;
}
	[data-subpart-id="{{subpart-id}}"] .bullseye{
		overflow: hidden;
	}
</style>
<script>
  $(document).ready(function(){
    $(document).on('click', '.w-annc__item[data-href]', function(e){
      var url = $(this).data('href');
      var title = $(this).data('title');
      if(!url) return;
      var isExternal = !(url.indexOf('/') === 0);
      if(isExternal){
        window.open(url, '_blank', 'noopener noreferrer');
      } else {
        window.location.href = url;
      }
    });
  });
  $(document).ready(function(){
    $(document).on('click keydown', '.w-annc__item[data-href]', function(e){
      // 鍵盤只接受 Enter(13) 或 Space(32)
      if(e.type === 'keydown' && e.which !== 13 && e.which !== 32) return;
      // 避免 Space 捲動頁面
      if(e.type === 'keydown' && e.which === 32) e.preventDefault();
      
      var url = $(this).data('href');
      if(!url) return;
      var isExternal = !(url.indexOf('/') === 0);
      if(isExternal){
      window.open(url, '_blank', 'noopener noreferrer');
      } else {
      window.location.href = url;
      }
    });
  });
$(document).ready(function() {
  var $widget = $('.widget-announcement-4');

  function getAnncItems($list) {
    return $list.find('.w-annc__item[data-href]:visible');
  }

  function getActiveTabIndex($tabs) {
    return $tabs.filter('.active').index($tabs.filter('.active').parent().find('.nav_tabs_filter li'));
    // 更簡單的寫法：
  }

  // 1. 頁籤行為攔截
  $(document).on('keydown', '.nav_tabs_filter li', function(e) {
    if (e.which !== 9) return;

    var $tabs = $widget.find('.nav_tabs_filter li');
    var $list = $widget.find('.w-annc__list');
    var index = $tabs.index(this);

    if (index === -1) return;

    if (!e.shiftKey) {
      e.preventDefault();
      e.stopImmediatePropagation();
      $(this).click();
      setTimeout(function() {
        var $items = getAnncItems($list);
        if ($items.length > 0) {
          $items.first().focus();
        } else {
          if (index < $tabs.length - 1) {
            $tabs.eq(index + 1).focus();
          }
        }
      }, 150);
    } else {
      if (index > 0) {
        e.preventDefault();
        e.stopImmediatePropagation();
        var $prevTab = $tabs.eq(index - 1);
        $prevTab.click();
        setTimeout(function() {
          var $prevItems = getAnncItems($list);
          if ($prevItems.length > 0) {
            $prevItems.last().focus();
          } else {
            $prevTab.focus();
          }
        }, 150);
      }
    }
  });

  // 2. w-annc__item 行為攔截
  $(document).on('keydown', '.w-annc__item[data-href]', function(e) {
    if (e.which !== 9) return;

    var $this = $(this);
    if ($widget.find($this).length === 0) return;

    var $list = $widget.find('.w-annc__list');
    var $tabs = $widget.find('.nav_tabs_filter li');
    
    // 關鍵修正：從 active tab 取得當前 index
    var activeTabIdx = $tabs.index($tabs.filter('.active'));

    var $allItems = getAnncItems($list);
    var currentIdx = $allItems.index($this);

    if (e.shiftKey) {
      e.preventDefault();
      e.stopImmediatePropagation();
      if (currentIdx === 0) {
        // 回到當前 active 的頁籤
        $tabs.eq(activeTabIdx).focus();
      } else {
        $allItems.eq(currentIdx - 1).focus();
      }
    } else {
      if (currentIdx === $allItems.length - 1) {
        // 最後一筆 -> 跳到下一個頁籤
        if (activeTabIdx < $tabs.length - 1) {
          e.preventDefault();
          e.stopImmediatePropagation();
          $tabs.eq(activeTabIdx + 1).focus();
        }
        // 已是最後一個頁籤的最後一筆，自然流出
      } else {
        e.preventDefault();
        e.stopImmediatePropagation();
        $allItems.eq(currentIdx + 1).focus();
      }
    }
  });
});
</script>