NVDA is skipping table cells when they contain input or select tags

When I activate the "+" button which adds a new row to the table, NVDA then no longer focuses on each cell individually and skips over them. If you let it read out one of the cells it does focus on, it instead reads them all at once.

JSfiddle to demonstrate the issue: https://jsfiddle.net/0nc29jr6/1/

const rowStr="<tr><td><input class="inp1" name="inp1"/></td><td><select class="sel1" name="sel1"></select></td><td><input class="inp2" name="inp2"/></td><td><select class="sel2" name="sel2"></select></td><td style="display:flex"><div><input value="+" type="button" class="inp3" name="inp3"/></div><div><input value="-" type="button" class="inp4" name="inp4"/></div></td></tr>"

$(document).ready(function() {
  addRow();
})

function addRow() {
  let row = $(rowStr);
 
  row.find(".sel1").append("<option>opt1</option><option>opt2</option>");
  row.find(".sel2").append("<option>opt3</option><option>opt4</option>");
  row.find(".inp3").on("click", addRow);
  row.find(".inp4").on("click", function() {
    remRow(row);
  })
  
  $("#tbody1").append(row);
}

This only seems to be an issue when the table specifically contains input elements like these. Using Tab seems to navigate properly but using the arrow keys does not.

You need to sign in to view this answers

Related Post