title: How to make `<tr>` accessible by keyboard (no javascript)
body: <p><em>Context:  I'm using bootstrap 4.1 in a vue.js app.</em> </p>
  
  <p>I have a table that shows the results of a user performed search. </p>
  
  <p>The users are able to "see mode details" by clicking on any row of this results table. So far so good with the mouse.</p>
  
  <p>How do I make the same table accessible with the keyboard?</p>
  
  <p>Expected outcome:</p>
  
  <ol>
  <li>users perform a search</li>
  <li>the data is shown in the table</li>
  <li>by pressing <kbd>TAB</kbd> they focus the <code>&lt;table&gt;</code></li>
  <li><em>(the "current row" gets highlighted)</em></li>
  <li>by hitting <kbd>ENTER</kbd> they are able to "see more details" of the given highlighted row</li>
  </ol>
  
  <p><strong>Questions:</strong></p>
  
  <ul>
  <li>Is there a browser-native way to achieve this?  </li>
  <li>Is there a way to do it without javascript? </li>
  </ul>
  
  <hr>
  
  <hr>
  
  <p>So far:
  <a href="https://i.stack.imgur.com/8HQQg.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8HQQg.gif" alt="enter image description here"></a></p>
  
  <p>This is done by using a <code>&lt;table&gt;</code> element with <code>tabindex="0"</code> on each <code>&lt;tr&gt;</code> element.
  I'm now adding some javascript magic to make the click/enter user interaction trigger to show more details in another div.
  Thanks all for the help. </p>