сосредоточиться на одном столбце таблицы

Question

Вот мой STACKBLITZ

<table class="example-focus-monitor" cdkTrapFocus>
  <tr>  
    <th><button>dont focus</button></th>
    <th><button>focus</button></th>
  </tr>
  <tr>
    <th><button>dont focus</button></th>
    <th><button>focus</button><button>also focus</button></th>
  </tr>
  <tr>
    <th><button>dont focus</button></th>
    <th><button>focus</button></th>
  </tr>
  <tr>
    <th><button>dont focus</button></th>
    <th><button>focus</button><button>also focus</button></th>
  </tr>
</table>

• Я хочу сохранить фокус только на правом столбце. Так что это должно идти сверху вниз, если я продолжаю нажимать клавишу Tab.
• Я в основном хочу пропустить фокус на кнопках 'Dont Focus'

Как я могу это сделать?

Answer 1

Атрибут tabindex определяет порядок перехода элемента (когда для навигации используется кнопка «tab»). Присвоение отрицательного значения сделает его не сфокусированным.

Попробуйте вот так:

  <tr>  
    <th><button tabindex="-1">dont focus</button></th>
    <th><button tabindex="1">focus</button></th>
  </tr>
  <tr>
    <th><button  tabindex="-1">dont focus</button></th>
    <th><button tabindex="2">focus</button><button>also focus</button></th>
  </tr>

Рабочая демонстрация

Answer 2

Вы можете использовать tabindex = '- 1' . Отрицательное значение указывает, что элемент недоступен с помощью последовательной навигации по клавиатуре.

<p>my Table</p>
<table class="example-focus-monitor" cdkTrapFocus>
  <tr>  
    <th><button tabIndex='-1'>dont focus</button></th>
    <th><button>focus</button></th>
  </tr>
  <tr>
    <th><button tabIndex='-1'>dont focus</button></th>
    <th><button>focus</button><button>also focus</button></th>
  </tr>
  <tr>
    <th><button tabIndex='-1'>dont focus</button></th>
    <th><button>focus</button></th>
  </tr>
  <tr>
    <th><button tabIndex='-1'>dont focus</button></th>
    <th><button>focus</button><button>also focus</button></th>
  </tr>
</table>

<button>should never be focused when using tab and focus inside table</button>