Make the tree page file browser a table to support blind users/screen readers.

[tonyfast]

Issue Area # 2

• Expectation: Tables used appropriately, clearly organized, and labeled. (WCAG Criteria 1.3.1 (A) & 4.1.2 (A))
• Observed: Main table (tree page) is not a real table; it is made of <div>s within <div>s not Table > THEAD/TBODY > TR > TH/TD. Without this blind users/screen readers cannot decipher that this is row data or what element corresponds to what row, how many rows there are, etc.

[tonyfast]

ref: #6800 (comment)

This is needed for blind users because properly made semantic <table>s give them a full suite of additional capability than if artificially constructed to look like such. These things include:

1. Visiting cells on a table it will announce the column (or row or both) it belongs to based on the <th> elements
2. Allows them to read the whole row at a time
3. They can copy entire rows
4. They can with a keyboard shortcut jump to top of table, bottom of table, left, or right.
5. They can list all tables on the page
6. They can jump straight to them if they know it exists (same way they can jump to the <h1>, <h2>s, etc. just by pressing "H"). So kind of a usability thing for this one but just speeds up their workflows tremendously.

[tonyfast]

the current implementation of the file browser represents each file as an element in an unodered list. each list item contains labels and spans to comprise each row. the labels should be th elementsand thespanshould betdelement. eachlishould be atrinside oftable`.

it is probably possible to add explicitly aria roles and labels, but table semantics would go further.

@gabalafou since you work on #13577 i thought you might have some input about how hard it would be to implement this file browser as a table instead of unordered list.

the sorting nature of the tables means we have a little extra work to make things assistive based on the APG sortable tables

[gabalafou]

For fun I went and changed all of the tags in Notebook 7 file browser to be table-specific, and it looks basically the same:

Which is good news!

[tonyfast]

thats really cool. i thought it was going to be a more imposing change. wild.

[tonyfast]

would it be possible to upstream the WIP changes to see if it is better on binder?