リンク付きリストの「もっと見る」ボタンを押した時のフォーカス位置

主にリスト形式の表示で、最初に数件を表示しておいて「もっと見る」ボタンをクリックする毎に数件ずつ追加表示するという見せ方があります。

キーボードで操作できなければならないのは当然ですが、「もっと見る」ボタンにフォーカスして [Enter] キーを押したあと、フォーカスは「もっと見る」ボタンにあるので、そのまま次にフォーカスを移動するとボタンの上に追加表示されたリストを飛ばすことになります。特にスクリーンリーダーを利用している場合は追加表示されたリストが認識できない可能性があります。

そこで、「もっと見る」ボタンで [Enter] キーを押したあと、フォーカスを「もっと見る」ボタンにフォーカスする前の位置に戻すことで、リストの続きにフォーカス出来るようにしてみました。

ただし、この方法は新着情報などリンクがあるリストであることが前提です。

元となるコードは以下を流用させていただいています。
【jQuery】「もっと見る」ボタンの実装 – Qiita

HTML

<ul id="list">
  <li><span class="date">2022年xx月xx日</span><a href="xxx">記事タイトル</a></li>
  <li><span class="date">2022年xx月xx日</span><a href="xxx">記事タイトル</a></li>
  <li><span class="date">2022年xx月xx日</span><a href="xxx">記事タイトル</a></li>
  <li><span class="date">2022年xx月xx日</span><a href="xxx">記事タイトル</a></li>
  <li><span class="date">2022年xx月xx日</span><a href="xxx">記事タイトル</a></li>
   :
</ul>
<button type=button id="moreBtn">もっと見る</button>
<button type=button id="closeBtn">閉じる</button>

jQuery

$(function() {
  var $numberListLen = $("#list li").length;
  var defaultNum = 3; // デフォルトの表示数
  var addNum = 10;    // ボタンクリックで追加表示させる数
  var currentNum = 0; // 現在の表示数
  
  $('#info').each(function() {
    $(this).find('#moreBtn').show();
    $(this).find('#closeBtn').hide();
    $(this).find('li:not(:lt('+defaultNum+'))').hide();
    currentNum = defaultNum;
    
    $('#moreBtn').click(function() {
      beforeNum = currentNum - 1; // クリック前の数
      currentNum += addNum;
      $(this).closest('#list').find('li:lt('+currentNum+')').slideDown();
      
      // 一旦フォーカスして外す
      $(this).closest('#list').find('li:eq('+beforeNum+') a').focus().blur(); 
      
      if($numberListLen <= currentNum) {
        currentNum = defaultNum;
        indexNum = currentNum - 1;
        $('#moreBtn').hide();
        $('#closeBtn').show();
        
        $('#closeBtn').click(function() {
          $(this).closest('#info').find('li:gt('+indexNum+')').slideUp();
          $(this).hide();
          $('#moreBtn').show();
        });
      }
    });
  });
});

これで、「もっと見る」ボタンで [Enter] キーを押したあと、[Tab] キーを押すと追加されたリストの先頭に移動します。