All slices of a sunburst should be reported.
For nested layers, should nest tables into the appropriate cell. (Yes, this is valid and works well whereas complex table markup such as stretched table columns don't work very well.)
Example (simplified) component:
function() {
// if a label was provided, use that to make the name; otherwise, use the graph type
const tableCaption = label ? `${label} data` : `${graphType} data`;
<figure>
<canvas role="presentation">
<div class="echScreenReaderOnly">
<dl>...</dl>
<table>
<caption>{tableCaption}</caption>
<thead>
<tr>
<th>Category</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">US Population</th>
<td>300 Million</td>
</tr>
</tbody>
</table>
</div>
</canvas>
</figure>
}Extra credit: (can be moved to a future ticket)
If there is a high number of slices, we should use the same logic for when labels get visually hidden. Only show the same labels in the table. Then render a show more cells button that adds more rows to the table and moves focus back to the tableto the table.
All slices of a sunburst should be reported.
For nested layers, should nest tables into the appropriate cell. (Yes, this is valid and works well whereas complex table markup such as stretched table columns don't work very well.)
Example (simplified) component:
Extra credit: (can be moved to a future ticket)
If there is a high number of slices, we should use the same logic for when labels get visually hidden. Only show the same labels in the table. Then render a
show more cellsbutton that adds more rows to the table and moves focus back to the tableto the table.