NVDA screen reader and Chrome 86/87 seem not to support aria-owns and grids when grid rows are not nested within grid

0
votes

I originally posted this issue here: https://github.com/nvaccess/nvda/issues/11811 but got no reply so far.

Long ago in our aging app I was using aria-owns, NVDA screen reader (v2020.3) and Chrome (v86/87) to read several DIVs as a grid. (The reason for using aria-owns is that our website has a DOM structure were the grid header is separated from the grid rows.)

This solution was working quite well on Chrome and to some extent in Firefox. It was even reading out nested grids in Chrome. Coming back to this today, unfortunately it seems that via Chrome it no longer works.

Steps to reproduce: Here is a short demo to reproduce. A DIV-based grid with aria-owns, where the grid rows are not inside the grid:

<div role="grid" aria-owns="row1 row2">
</div>

<div id="row1" role="row"><div role="gridcell">apple</div><div role="gridcell">banana</div></div>                
<div id="row2" role="row"><div role="gridcell">dog</div><div role="gridcell">cat</div></div>

See here on codepen.

In Firefox (82.0.2 64bit): NVDA reads this as table and allows table navigation. Speech viewer shows: "frame table with 2 rows and 2 columns row 1 column 1 apple" and NVDA allows navigation.

In Chrome (86.0.4240.183 Official Build 64-bit): NVDA reads this as table and allows table navigation. Speech viewer shows: "frame table with 0 rows and 0 columns apple".

In Chrome 70 - this works as expected.

Any idea?

1
google-chromescreen-readers

1 Answers

0
votes

It seems that by wrapping with 'rowgroup' this finally works also in Chrome 86/87, example.

<input type='button' id='btn' value='click' />

<div role="grid" aria-owns="row1 row2" id="myGrid">
</div>

<div>
  <div role='rowgroup' id="row1" aria-rowindex='1'>
    <div role="row">
      <div role="gridcell" aria-colindex='1'>apple</div>
      <div role="gridcell" aria-colindex='2'>banana</div>
    </div>
  </div>
</div>

<div>
  <div role='rowgroup' id="row2" aria-rowindex='2'>
    <div role="row">
      <div role="gridcell" aria-colindex='1'>dog</div>
      <div role="gridcell" aria-colindex='2'>cat</div>
    </div>
  </div>
</div>

So I guess that Chrome 70 was perhaps less strict with standards or the standards may have changed over the years.

However, there is a different problem with Chrome 86/87 adding some of the aria properties dynamically is not working with a screen reader (but it does on Firefox 83)

Full issue reported here: enter link description here