Incorrect tabbing sequence within Data Grid

[jamesuhl]

Description

Using only the TAB key (and SHIFT-TAB) to navigate the Data Grid (i.e. keyboard-only users). The tab order skips the column headers at the top and starts in the first row under the column headers.

• ignite-ui version: (latest)
• browser: any

Steps to reproduce

1. Set-up and run the code for jQuery-UI Data Grid as demonstrated on Infragistics website shown here: https://www.igniteui.com/grid/html-binding
2. Use the TAB key to navigate forward through the table (SHIFT-TAB to navigate backward).

Result

The user must tab through the entire table before accessing the column header row back at the top. (This is not the expected behavior and is a problem for screen-reader users.)

The <thead> is rendered below the <tbody> in the DOM. The order in the DOM dictates the tab order.

Expected result

The expected tab order would be to navigate left-to-right* along the top column headers first before tabbing into the first row of data.

The <thead> needs to render above the <tbody> in the DOM.

This is invalid HTML. The <thead> tag must be used as a child of a <table> element, after any <caption> and <colgroup> elements, and before any <tbody>, <tfoot>, and <tr> elements. Ref: https://www.w3schools.com/tags/tag_thead.asp

Note

It would also help some screen readers associate the data with its column header if the component forced a <th scope="col"> on the header.

[jamesuhl]

In the meantime, I created a callback function that inserts the <thead> before the <tbody> after the table is rendered. This appears to work. It would be better if it was fixed in the original code.