Create right table view

[JuliaKirschenheuter]

• Resolves: [BITV] 9.1.3.1e/8.1 - The apps table represents a table element and should be implemented as such. #37899

Summary

Create right table view for list of the apps

Before	After

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)

[JuliaKirschenheuter]

Hi @michaelnissenbaum

what would you say is it an acceptable solution in your eyes?

[ShGKme]

There is a problem with multi-level table in the bundles view.

Sub headers like "Hub bundle" all works as headers via screen readers.

So when a user reads a "Calendar" app cell in "Name" column in "Hub bundle" section it reads:

Name
Enterprise bundleDownload and enable all
Hub bundleDownload and enable all
Groupware bundleDownload and enable all
Social sharing bundleDownload and enable all
Education EditionDownload and enable all  column 2  clickable  Calendar

In theory it must be fixed by headers attribute that allows to set what exactly headers has each cell. Unfortunately it is not supported by most of screen readers as far as I know 😭

It could be a good alternative to separate it to different tables having 1 caption per table. But then they will have independent column widths... 🥲. (We also cannot make columns fixed).

The only option I can see here is to not use <th> for bundle headers. To make it just a table cell

[michaelnissenbaum]

@JuliaKirschenheuter The code snippet you sent me, from my perspective, is not accessible. If we intend to structure the content as a data table, we need meaningful column headers like "Name," "Version," etc., which we don't have in this case. As for the text "Enterprise bundle," it should be treated as a caption - refer to https://www.w3.org/WAI/tutorials/tables/caption-summary/, or a heading. Additionally, please avoid using regular headings ("h") within column headers ("th").

[ShGKme]

Hello @michaelnissenbaum!

The complex part is that "Enterprise bundle" is not the table caption, but sub-header, the header of a part of the table. This is why we cannot use <caption> here.

We tried to make a table according to the w3 tutorial: Tables with Multi-Level Headers
/ Example 2: Table with three headers related to each data cell

I tested the table with NVDA screen reader and it works awful even on w3 example. It doesn't support the headers attribute, so it always read all the sub-header for each cell.

For example, a cell with an app "Calendar" in a Name column is read as

Name
Enterprise bundleDownload and enable all
Hub bundleDownload and enable all
Groupware bundleDownload and enable all
Social sharing bundleDownload and enable all
Education EditionDownload and enable all  column 2  clickable  Calendar

I asked one accessibility community and they asked that most of screen readers doesn't support headers attribute and multi-header tables in general.

Could we ask you help here?

What software should we use for testing screen reading? Or is it fine to just follow the standard even if it is not well supported by the screen readers?

Maybe in this specific case, we can make sub-headers in the table not headers but just cells?

[JuliaKirschenheuter]

Thank you @michaelnissenbaum!

If we intend to structure the content as a data table, we need meaningful column headers like "Name," "Version," etc., which we don't have in this case.

That part was already implemented, it was just hidden as visually-hidden <tr>: apps-header visually-hidden This part is not a big deal.

As for the text "Enterprise bundle," it should be treated as a caption - refer to https://www.w3.org/WAI/tutorials/tables/caption-summary/, or a heading.

Please see Grigorii's answer.

Additionally, please avoid using regular headings ("h") within column headers ("th").

Yes, i will do it (just forgotten because of other difficulties).

[JuliaKirschenheuter]

@michaelnissenbaum i'm wondering how it could be possible that examples from https://www.w3.org/WAI/tutorials/tables/multi-level/ are not accessible (massive screen reader problem)

[michaelnissenbaum]

@JuliaKirschenheuter Screen readers are software products and therefore not flawless (bug free). It's also important to use the right combination of screen reader and browser and to test with different browser/screen reader combinations. In my experience, the WAI examples are generally fine and work in most cases.

[michaelnissenbaum]

@ShGKme I might be misunderstanding, but from my point of view, it could be possible to divide the contents of the page into separate tables with captions or headings like "Enterprise Bundle" and "Hub Bundle." In this case, we no longer have any issues.

[JuliaKirschenheuter]

Thank you @michaelnissenbaum again!

it could be possible to divide the contents of the page into separate tables with captions or headings like "Enterprise Bundle" and "Hub Bundle."

The issue is:

"It could be a good alternative to separate it to different tables having 1 caption per table. But then they will have independent column widths... 🥲. (We also cannot make columns fixed)."

Could we implement a table like "Table with three headers related to each data cell" from https://www.w3.org/WAI/tutorials/tables/multi-level/?

[michaelnissenbaum]

@JuliaKirschenheuter You can do that. Just make sure the headings are correctly linked. Refer to the description of the test step here: https://ergebnis.bitvtest.de/pruefschritt/bitv-20-web/bitv-20-web-9-1-3-1f-zuordnung-von-tabellenzellen.

[JuliaKirschenheuter]

In example2, "Table with three headers related to each data cell", https://www.w3.org/WAI/tutorials/tables/multi-level/ there is wrong implementation of <th scope="colgroup">

right implementation is under: https://html.spec.whatwg.org/multipage/tables.html#attr-th-scope. should be <th scope=rowgroup>

[AndyScherzinger]

/compile and amend /

[ShGKme]

Fixed ESLint errors with formatting, no noticeable changes.

[ShGKme]

Acceptance tests selectors updated according to layout update