You essentially have a "disclosure widget". The button that opens/closes the section would have aria-expanded
set to true/false.
However, I would not literally add a new row to the table because that might confuse screen readers. When the table is first navigated to, the user will hear the table has four rows (including the header) and four columns. When you click the "more info" button, the table will now have five rows but the screen reader is not going to tell the user that another row appeared. If the user was navigating down the column and hearing the row numbers (which are normally announced by screen readers), they'd end up on row five when earlier they heard there were only four rows in the table.
I don't know if this would work for your case, but in the demo code, the extra info is related to the person so it could just be hidden information (css display:none) that exists in the first table cell. When you select the button, the information is revealed (css display:block).
Also, you would either need to make the name a row header (<th scope="row">
) or you'd need to associate the person's name with the "more info" button so that the screen reader knows which person they're getting more info about.
I don't know react but the generated html would either look like this (with row headers):
<tr>
<th scope="row">Avicii</th>
<td>Progressive House</td>
<td></td>
<td>
<button>More info</button>
</td>
</tr>
<tr>
<th scope="row">Kygo</th>
<td>Tropical House</td>
<td></td>
<td>
<button>More info</button>
</td>
</tr>
or would look like this (with additional information associated with the button):
<span id="moreInfoID" class="sr-only">more info about </span>
...
<tr>
<td id="name1">Avicii</td>
<td>Progressive House</td>
<td></td>
<td>
<button aria-labelledby="moreInfoID name1">More info</button>
</td>
</tr>
<tr>
<td id="name2">Kygo</td>
<td>Tropical House</td>
<td></td>
<td>
<button aria-labelledby="moreInfoID name2">More info</button>
</td>
</tr>
The latter is a bit more work. I would recommend the first one.
(You can see info on the sr-only
class at What is sr-only in Bootstrap 3?).
Also, your example shows the new row added has tabindex="0"
. Since the new information is not an interactive object, it should not receive keyboard focus and shouldn't have tabindex.