-
-
Notifications
You must be signed in to change notification settings - Fork 4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Create right table view #40014
Create right table view #40014
Conversation
2c8bc71
to
69ded80
Compare
f44a0a6
to
fbc4c88
Compare
what would you say is it an acceptable solution in your eyes? |
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:
In theory it must be fixed by 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 |
@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"). |
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 We tried to make a table according to the w3 tutorial: Tables with Multi-Level Headers I tested the table with NVDA screen reader and it works awful even on w3 example. It doesn't support the For example, a cell with an app "Calendar" in a Name column is read as
I asked one accessibility community and they asked that most of screen readers doesn't support 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? |
Thank you @michaelnissenbaum!
That part was already implemented, it was just hidden as visually-hidden
Please see Grigorii's answer.
Yes, i will do it (just forgotten because of other difficulties). |
@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) |
@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. |
@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. |
Thank you @michaelnissenbaum again!
The issue is:
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/? |
@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. |
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 right implementation is under: https://html.spec.whatwg.org/multipage/tables.html#attr-th-scope. should be |
fbc4c88
to
2fce495
Compare
c756e3a
to
65af3a3
Compare
65af3a3
to
bb218d2
Compare
/compile and amend / |
bb218d2
to
3f9b709
Compare
Fixed ESLint errors with formatting, no noticeable changes. |
8cfc291
to
a360c37
Compare
Acceptance tests selectors updated according to layout update |
Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>
a360c37
to
8b60295
Compare
Summary
Create right table view for list of the apps
Checklist