Turbo Table request for improvement(s)

[Primaryw]

What needs to be here for more accessible tables:

In THEAD, all TH elements should have scope="column" in the html unless specified otherwise on case-by-case basis:

Code: Select all

<thead>
  <tr>
    <th scope="column">
        Lorem Ipsum
    </th>
    <th scope="column">
        Lorem Ipsum
    </th>
	...
  </tr>
</thead>

In TBODY, any TH elements should have scope="row" when needed.

Code: Select all

<tbody>
  <tr>
    <th scope="row">
        Lorem Ipsum
    </th>
    <td scope="column">
        Lorem Ipsum
    </td>
	...
  </tr>
</tbody>

Currently, you have to use this sub-optimal method:

Code: Select all

<ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
                <tr>
                    <td *ngFor="let col of columns" >
                            <span *ngIf="col.colName1 == 'Column1'"> Content </span>
                             <span *ngIf="col.colName2 == 'Column2'"> Content </span>
                     </td>
                 </tr>
</ng-template>

:


...Which poses a problem because you cannot force the TD to become a TH when you need one. And you cannot place scope="row" inside a span without effectively creating a new cell within the cell and confusing the screen reader.

The best resulting table structure should be something like this:

Code: Select all

<table>
<thead>
  <tr>
    <th scope="column">
        Lorem Ipsum
    </th>
    <th scope="column">
        Lorem Ipsum
    </th>
	...
  </tr>
</thead>
<tbody>
 <tr>
    <th scope="row">
        Lorem Ipsum
    </th>
     <tr>
    <td>
        Lorem Ipsum
    </td>
    ...
  </tr>
</tbody>
</table>

How can this be accomplished?

I also tried using nested ng-template but this method is extremely confusing to manage and was unsuccessful in the end. I reverted back to using the spans...


Thoughts? Developers?