矢印キーでフォーカスの左右上下移動

Question

前提

3カラムの中にボタンとリンク、文言があります。
tabキーでフォーカスを移動します。

実現したいこと

tabキーを押してフォーカスを下へ、またはshift + tabで上に移動することはできますが、
矢印キーの上下左右でフォーカス移動したいです。
ボタン1 → ボタン2 → ボタン6 → ボタン6_2 → ボタン7_2 → ボタン8_2 → サブリンク2_2 → サブリンク4 → ボタン12 → ボタン11
というように矢印キーでカラム間を跨いで、好きな方向へ行ったり戻ったりするにはどのようにすればよろしいでしょうか。

該当のソースコード

<div id="wrapper">
  <div class="inner_left">
      <div class="frame_button">
        <button><span>ボタン1</span></button>
        <button><span>ボタン2</span></button>
        <button><span>ボタン3</span></button>
        <button><span>ボタン4</span></button>
        <a href="">サブリンク</a>
        <div tabindex="0">………</div>
      </div>
  </div>
      <div class="inner_right main_content">
          <div class="main_inner"><button><span>ボタン5</span></button>
          <button><span>ボタン6</span></button>
          <button><span>ボタン7</span></button>
          <button><span>ボタン8</span></button>
          <a href="">サブリンク2</a>
          <div tabindex="0">リンク3</div>
            </div>
        <div class="main_inner"><button><span>ボタン5_2</span></button>
          <button><span>ボタン6_2</span></button>
          <button><span>ボタン7_2</span></button>
          <button><span>ボタン8_2</span></button>
          <a href="">サブリンク2_2</a>
          <div tabindex="0">リンク3_2</div>
            </div>
      </div>
      <div class="inner_right">
          <button><span>ボタン9</span></button>
          <button><span>ボタン10</span></button>
          <button><span>ボタン11</span></button>
          <button><span>ボタン12</span></button>
          <a href="">サブリンク4</a>
          <div tabindex="0">リンク5</div>
      </div>
     </div>
     </div>
    </div>
  </div>
</div>

#wrapper{
  align-items:center;
  display:flex;
  justify-content:space-around;
  width:80%;
  margin:0 auto;
  padding:10px;
}

button{
  display:block;
  margin-bottom:10px;
}

.inner_left{
  background:#F6E3CE;
  padding:10px;
}

.inner_right{
  background:#D0F5A9;
  padding:10px;
}
.inner_right.main_content{
    align-items:center;
  display:flex;
  justify-content:space-around;
  width:80%;
  margin:0 auto;
  padding:10px;
}

Answer 1

ボタンにidを振ってカスタムデータで上下左右行きたいボタンのidを指定してやるとよいのでは？

<style>
#btns{
display:flex;
flex-wrap:wrap;
width:100px;
}
#btns button{
width:33%;
}
</style>
<script>
document.addEventListener('keydown',e=>{
  Object.entries({d:"Down",u:"Up",r:"Right",l:"Left"}).forEach(x=>{
    if(e.code==`Arrow${x[1]}` && e.target.matches(`[data-${x[0]}`)){
    document.querySelector(e.target.dataset[x[0]]).focus();
    }
  });
});
</script>
<div id="btns">
<button id="b1" data-r="#b2" data-d="#b4">1</button>
<button id="b2" data-l="#b1" data-r="#b3" data-d="#b5">2</button>
<button id="b3" data-l="#b2" data-d="#b6">3</button>
<button id="b4" data-r="#b5" data-u="#b1" data-d="#b7">4</button>
<button id="b5" data-l="#b4" data-r="#b6" data-u="#b2" data-d="#b8">5</button>
<button id="b6" data-l="#b5" data-u="#b3" data-d="#b9">6</button>
<button id="b7" data-r="#b8" data-u="#b4">7</button>
<button id="b8" data-l="#b7" data-r="#b9" data-u="#b5">8</button>
<button id="b9" data-l="#b8" data-u="#b6">9</button>
</div> 

Comments

[skillUp]

方向性を示していただき
ありがとうございます。

Answer 2

⭐️ 動作確認用サンプル： https://jsfiddle.net/2ub63Lto/

処理の概要

• まずは、フォーカス可能な要素に座標番号のデータ属性をJSで動的に付与します。
  • 例えば、data-coord="0-0"を付与
  • → <button data-coord="0-0"><span>ボタン1</span></button>
  • JSにより自動で付与されますので、自分で考えながらHTMLに座標番号を書かなくてもいいです。
• 左上を起点として(x=0, y=0)とすると、各要素の座標は以下の画像の通りとなります。

• JavaScriptでフォーカス可能な要素を全て取得し、2次元配列に格納して、繰り返し処理で座標番号を付与しています。

• 矢印キーを押下したら現在の座標番号を取得し、移動先の座標番号を計算します。

座標計算の例

• 例えば、現在フォーカスしている要素が「ボタン7」の場合 → 座標番号は1-2
• 矢印キー押下時の座標の増減値と、計算結果（＝移動先の座標）は以下の表の通り。

'1-2' 基準の例	←	→	↑	↓
座標の増減値	[-1,0]	[1,0]	[0,-1]	[0,1]
移動先の座標	'0-2'	'2-2'	'1-1'	'1-3'

• あとは、例えば←キーの場合、data-coord="0-2"の要素にフォーカスしてやるだけです。

完成コード例

htmlに.focusable-containerとfocusable-itemというclassを追加

<div id="wrapper">
  <div class="inner_left">
    <div class="frame_button focusable-container"> <!-- class追加 -->
      <button class="focusable-item"><span>ボタン1</span></button> <!-- class追加 -->
      <button class="focusable-item"><span>ボタン2</span></button> <!-- class追加 -->
      <button class="focusable-item"><span>ボタン3</span></button> <!-- class追加 -->
      <button class="focusable-item"><span>ボタン4</span></button> <!-- class追加 -->
      <a href="" class="focusable-item">サブリンク</a> <!-- class追加 -->
      <div class="focusable-item" tabindex="0">………</div> <!-- class追加 -->
    </div>
  </div>
  <div class="inner_right main_content">
    <div class="main_inner focusable-container"> <!-- class追加 -->
      <button class="focusable-item"><span>ボタン5</span></button> <!-- class追加 -->
      <button class="focusable-item"><span>ボタン6</span></button> <!-- class追加 -->
      <button class="focusable-item"><span>ボタン7</span></button> <!-- class追加 -->
      <button class="focusable-item"><span>ボタン8</span></button> <!-- class追加 -->
      <a class="focusable-item" href="">サブリンク2</a> <!-- class追加 -->
      <div class="focusable-item" tabindex="0">リンク3</div> <!-- class追加 -->
    </div>
    <div class="main_inner focusable-container"> <!-- class追加 -->
      <button class="focusable-item"><span>ボタン5_2</span></button> <!-- class追加 -->
      <button class="focusable-item"><span>ボタン6_2</span></button> <!-- class追加 -->
      <button class="focusable-item"><span>ボタン7_2</span></button> <!-- class追加 -->
      <button class="focusable-item"><span>ボタン8_2</span></button> <!-- class追加 -->
      <a class="focusable-item" href="">サブリンク2_2</a> <!-- class追加 -->
      <div class="focusable-item" tabindex="0">リンク3_2</div> <!-- class追加 -->
    </div>
  </div>
  <div class="inner_right focusable-container"> <!-- class追加 -->
    <button class="focusable-item"><span>ボタン9</span></button> <!-- class追加 -->
    <button class="focusable-item"><span>ボタン10</span></button> <!-- class追加 -->
    <button class="focusable-item"><span>ボタン11</span></button> <!-- class追加 -->
    <button class="focusable-item"><span>ボタン12</span></button> <!-- class追加 -->
    <a class="focusable-item" href="">サブリンク4</a> <!-- class追加 -->
    <div class="focusable-item" tabindex="0">リンク5</div> <!-- class追加 -->
  </div>
</div>

cssに以下を追加

*:focus {
  border: 1px solid blue;
  border-radius: 0.2em;
}

const wrapper = document.querySelector('#wrapper');
const focusableContainers = document.querySelectorAll('.focusable-container');
const focusableItemsMap = [...focusableContainers].map(fc => [...fc.querySelectorAll('.focusable-item')]);
const focusableItems = focusableItemsMap.flatMap(elems => elems);

window.addEventListener('DOMContentLoaded', setDataCoord, false);
wrapper.addEventListener('keydown', manipulateFocus, false);

function setDataCoord() {
  const coords = [...focusableItemsMap].flatMap((elems, x) => elems.map((_, y) => `${x}-${y}`));
  focusableItems.forEach((elem, i) => elem.dataset.coord = coords[i]);
}

function manipulateFocus(event) {
  const keys = {'ArrowLeft': [-1, 0], 'ArrowRight': [1, 0], 'ArrowUp': [0, -1], 'ArrowDown': [0, 1]};

  for (const [key, [x, y]] of Object.entries(keys)) {
    if (event.key === key) {
      event.preventDefault();
      const currentCoord = event.target.dataset.coord;
      const targetCoord = currentCoord ? currentCoord.replace(/(\d+)-(\d+)/, (_, px, py) => [Number(px) + x, Number(py) + y].join('-')) : '0-0';
      const [targetElem] = document.querySelectorAll(`[data-coord="${targetCoord}"]`);
      if (targetElem) targetElem.focus();
      return;
    }
  }
}

コメントによる解説付きJavaScriptコード

処理の内容をわかりやすくするために、コメントで解説を書きました。
コードの内容は上記のものと全く同じです。

/**
 * 要素の取得
 */
// #wrapper要素を取得
const wrapper = document.querySelector('#wrapper');

// .focusable-container要素を取得
const focusableContainers = document.querySelectorAll('.focusable-container');

// それぞれの.focusable-containerの中身の要素を取得し、containerごとに2次元配列に格納する
const focusableItemsMap = [...focusableContainers].map(fc => [...fc.querySelectorAll('.focusable-item')]);

// ↑を一次元配列化する
const focusableItems = focusableItemsMap.flatMap(elems => elems);

/**
 * イベントリスナー設定
 */
window.addEventListener('DOMContentLoaded', setDataCoord, false); // ページロード時
wrapper.addEventListener('keydown', manipulateFocus, false); // キーを押している間

/**
 * 座標番号（data-coord属性）を要素に付与する関数
 */
function setDataCoord() {
  // 座標を生成
  const coords = [...focusableItemsMap].flatMap((elems, x) => elems.map((_, y) => `${x}-${y}`));

  // 一旦こういう形の2次元配列を生成してから
  // [
  //   ['0-0', '0-1', '0-2', '0-3', '0-4', '0-5']
  //   ['1-0', '1-1', '1-2', '1-3', '1-4', '1-5']
  //   ['2-0', '2-1', '2-2', '2-3', '2-4', '2-5']
  //   ['3-0', '3-1', '3-2', '3-3', '3-4', '3-5']
  // ]

  // 1次元配列化しています
  // ['0-0', '0-1', '0-2', '0-3', '0-4', '0-5', '1-0', '1-1', '1-2', '1-3', '1-4', '1-5', '2-0', '2-1', '2-2', '2-3', '2-4', '2-5', '3-0', '3-1', '3-2', '3-3', '3-4', '3-5']

  // 生成した座標をデータ属性として、.focusable-itemに付与していく
  focusableItems.forEach((elem, i) => elem.dataset.coord = coords[i]);
}

/**
 * 矢印キーでフォーカスを操作する関数
 */
function manipulateFocus(event) {

  // 矢印キーによって加算される座標値
  const keys = {'ArrowLeft': [-1, 0], 'ArrowRight': [1, 0], 'ArrowUp': [0, -1], 'ArrowDown': [0, 1]};

  // オブジェクトkeysの中身を一つずつ確認
  for (const [key, [x, y]] of Object.entries(keys)) {

    // 押したキーとオブジェクトkeysのプロパティ名が一致するとき、
    if (event.key === key) {

      // デフォルトの矢印キーの動きを停止
      event.preventDefault();

      // 現在フォーカスしている操作ボタンの座標番号を取得
      const currentCoord = event.target.dataset.coord;

      // 移動先の座標番号を計算（矢印キー押下時、何もフォーカスしていなかったら移動先の座標は'0-0'）
      const targetCoord = currentCoord ? currentCoord.replace(/(\d+)-(\d+)/, (_, px, py) => [Number(px) + x, Number(py) + y].join('-')) : '0-0';

      // 移動先の要素を取得する
      const [targetElem] = document.querySelectorAll(`[data-coord="${targetCoord}"]`);

      // その座標番号を持つ要素が存在していたら、その要素をフォーカスする
      if (targetElem) targetElem.focus();

      // ここで繰り返し処理を完全に終了（残りのオブジェクトの中身はチェックされないので無駄な処理を少なく！）
      return;
    }
  }
}

Comments

[skillUp]

丁寧に説明していただきありがとうございます。
色々な画面に対応できそうですね。
勉強になります。