I'm working with a data table constructed from DIVs and styled as a CSS grid (not my idea! and I've been asked to leave it that way, so please just accept that as an immutable condition). My task is to make it accessible and, for now, I'm testing with ANDI in Chrome on Windows. It's an Angular application with Bootstrap, if that makes a difference.
(UPDATE at another's request: ANDI is a detailed web accessibility analytical tool published by the US Social Security Administration at https://www.ssa.gov/accessibility/andi/help/install.html. It's a favelet, you just save a bookmark to it and then click the bookmark when you have a page up in your browser.)
When I open the page in the browser and turn on ANDI, it finds the table, with its 13 columns and 100 data rows in addition to the header row, but it flags two errors:
- "ARIA table has no [role=row] rows."
- "<table[role=table]> has 1313 cells not contained by [role=row]."
And, indeed, while ANDI marks the table with a dashed border, it doesn't mark the cells, nor does it respond to my hovering the cursor over them.
There's an Angular component element, the data row component, <app-content-row>, in the middle of this. I wondered whether that could be source of the problem, but I tried removing it, leaving only the row with the column headers, and ANDI gave me the same report.
I can't provide the full code for proprietary reasons, and for clarity I'm going to leave out the directive (_ngcontent-wjw-c154, in this instance) that Angular inserts into every element, but looking at it in the Chrome inspector window, it starts, basically, with:
<div role="table" class="..." ...>
<div role="rowgroup" style="display: contents;">
<div role="row" ...>
<div role="columnheader" ...>ID</div>
<div role="columnheader" ...>Name</div>
<div role="columnheader" ...>Start Date</div>
<!-- More columnheaders -->
</div>
</div>
<div role="rowgroup style="display:contents;">
<app-content-row ...>
<div role="row" ...>
<div role="rowheader" ...>137</div>
<div role="rowheader" ...>Frapjab Industries</div>
<div role="cell" ...>04/15/2008</div>
<!-- More cells -->
</div>
<!-- More rows -->
</app-content-row>
</div>
</div>
Above is my second attempt. In my first attempt, I didn't even have the role="rowgroup" divs wrapped around the header row and around the data rows, and I guessed that maybe they, unlike thead and tbody in an HTML table, were required. In my third attempt, guessing that maybe the role="row" divs had to be directly inside the role="rowgroup" element, I removed the second "rowgroup" div and instead stuck role="rowgroup" into the <app-content-row> tag. That role did carry through to the code displayed in the Chrome inspector. But it made no difference in the ANDI outcome.
My fourth attempt, removing the data rows (including the Angular component tags they're wrapped in, leaving only the column header row:
<div role="table" class="..." ...>
<div role="rowgroup" style="display: contents;">
<div role="row" ...>
<div role="columnheader" ...>ID</div>
<div role="columnheader" ...>Name</div>
<div role="columnheader" ...>Start Date</div>
<!-- More columnheaders -->
</div>
</div>
</div>
Still no good. So the Angular component tags had nothing to do with it.
Are there any common causes of ANDI failing to find the table structure defined by the roles, or unable to see the defined roles? Is there anything it seems I've missed?
