I have a table where every <tr> opens the <tr> below it.
How can I make it accessible to the user
so that they can know the <tr> is clickable and will open the <tr> below it?
Example:
<table>
<thead>
<tr>
<th>bla1</th>
<th>bla2</th>
</tr>
</thead>
<tbody>
<tr class="infoBlock" data-id="t1">
<td></td>
<td></td>
</tr>
<tr class="detailsBlock" data-id="t1">
<td></td>
<td></td>
</tr>
<tr class="infoBlock" data-id="t2">
<td></td>
<td></td>
</tr>
<tr class="detailsBlock" data-id="t2">
<td></td>
<td></td>
</tr>
</tbody>
</table>
The user (who uses a screen reader) needs to know that when they click
<tr class="infoBlock" data-id="t1">
it opens
<tr class="detailsBlock" data-id="t1">
I know that the aria-expanded attribute can be used on <button> and <a>.
https://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions