How to make `<tr>` accessible by keyboard (no javascript) - html

Question

Context: I'm using bootstrap 4.1 in a vue.js app.
I have a table that shows the results of a user performed search.
The users are able to "see mode details" by clicking on any row of this results table. So far so good with the mouse.
How do I make the same table accessible with the keyboard?
Expected outcome:
users perform a search
the data is shown in the table
by pressing TAB they focus the <table>
(the "current row" gets highlighted)
by hitting ENTER they are able to "see more details" of the given highlighted row
Questions:
Is there a browser-native way to achieve this?
Is there a way to do it without javascript?
So far:
This is done by using a <table> element with tabindex="0" on each <tr> 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.

Answer 1

This is about as close as I think you can get without javascript.
You need to use css tables and not HTML tables and set the a tag as a table-row. Then set the "href" of the a tag to a hidden div with the more info. Use the :target psuedo class to make the hidden info visible.
You can now tab through the rows. However you need to press Return to activate the link (at least in Chrome)
.table {
display: table;
}
.table>.head,
.table>a {
display: table-row;
}
.table>.head>span,
.table>a>span {
display: table-cell;
padding: 5px;
}
.table>a:focus {
background-color: #CCC;
}
.moreInfo>div {
display: none;
}
.moreInfo>div:target {
display: block;
}
<div class="table">
<div class="head">
<span>Id</span>
<span>Name</span>
<span>Date</span>
</div>
<a href="#data1">
<span>1</span>
<span>Some Name</span>
<span>9 Jan 2019</span>
</a>
<a href="#data2">
<span>2</span>
<span>Another Name</span>
<span>10 Jan 2019</span>
</a>
</div>
<div class="moreInfo">
<div id="data1">Some more info on the first item</div>
<div id="data2">Some more info on the second item</div>
</div>

Answer 2

I'm pretty sure that the CSS solution won't be accessible.
In fact the CSS solution is even probably going to make the accessibility less good compared to if you have been used a <table> even without any JavaScript or ARIA.
If you really can't use JavaScript for whatever reason, I would still advice to keep the <table>
If the data presented is really tabular data, screen reader users won't understand anything if you don't use a true <table>.
Some screen readers try to present CSS tables like if they were true HTML tables, but often they fail in doing it really well, and many screen readers don't do anything special so the user see a serie of divs and spans.
Additionally, keyboard and screen reader users are used to:
- tab once to get into the table, tab once more to get out of it
- up/down arrow to move from row to row inside the table
- left/right arrow to move between columns if it's relevant in your case
IF you really want something accessible, that's what you need to do. And it's perfectly undoable without JavaScript.
Why don't you want use JavaScript ?

Answer 3

I can not imagine another way without using javascript! Here is the answer to your question!
You have to use tabindex = "0". But to focus you would have to use javascript
<div>
<a href="#" tabindex="0">
<p>hi</p>
</a>
<a href="#">
<p>hello</p>
</a>
<a href="#">
<p>woah</p>
</a>
<a href="#">
<p>oops</p>
</a>
<a href="#">
<p>Love</p>
</a>
</div>

Answer 4

You can use tabindex for the table, it works perfectly fine
<form>
First: <input tabindex="1" type="text">
Third: <input tabindex="3" type="text"> <br>
Second : <input tabindex="2" type="text">
Forth : <input tabindex="4" type="text"><br>
</form>