Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Tables can be implemented within the Proof of Concept (https://github.com/Lullabot/olivero-poc).
Designs
Figma designs are at https://www.figma.com/file/x5zBLbvoW1jsvyAOt4Gp9I/Olivero-Theme---Public...
Accessibility
According to @andrewmacpherson, the designs are accessible, but we need to account for row-level headers.
andrewmacpherson 13 minutes ago
We don't actually have tables with row-level headers, yet. But I asked Claro to anticipate that we would.andrewmacpherson 12 minutes ago
Bear in mind, row level header may not be the first column.mherchel 12 minutes ago
interesting. Would changing the typography of the row-level headers be sufficient?mherchel 11 minutes ago
or do we also need to add borders?andrewmacpherson 10 minutes ago
Maybe, just bold text might do it. In fact, I think that is what I'm proposing to bodge into Seven as a quick, non-disruptive fix.andrewmacpherson 9 minutes ago
You can be as creative as ye like though, early days and all.mherchel 9 minutes ago
:thumbsup:andrewmacpherson 9 minutes ago
Basically, something to address both scenarios here. https://www.w3.org/WAI/tutorials/tables/two-headers/
The tables should be responsive
Tables will overflow with horizontal scrolling at smaller screens. To achieve the overflow border, we can use this technique: http://lea.verou.me/2012/04/background-attachment-local/
| Comment | File | Size | Author |
|---|---|---|---|
| olivero-table-rwd.png | 47.23 KB | mherchel | |
| olivero-table-full.png | 55.36 KB | mherchel |
Comments
Comment #2
proeungmherchel That great news! Thanks for providing the update and creating this ticket! Assigning myself to work on this issue.
Comment #3
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commentedThanks for grabbing the chat about row-level headers @mherchel
Adding related issues for core modules and Claro theme. Adding the row-level heading feature to Views table displays will be a very powerful tool for site builders.
Note that row-level table headers are possible right now, because authors can create tables in a node body field, assuming the text formats permit them.
Another thing table designs would benefit from is a style for table captions. This could be a
captionelement, but it's also possible to add table captions using figure/figcaption. A general design for captions could work for both kinds of markup.On the designs so far, I really like the clear row borders. They are a big help for readability. People with dyslexia often find them useful, and they are a huge help to people using screen magnifier software, when the whole row can't fit in their viewport.
I skim-read the Lea Verou article. Bear in mind that background images/gradients, or box-shadow, won't work in Windows high contrast mode. Real borders will be more robust. There are tricks you can do with a transparent border, so that you see box-shadow in the full colour mode, and a border in windows high-contrast mode. See https://stackoverflow.com/questions/52589391/css-box-shadow-vs-outline/5...
Comment #4
proeung@mherchel Here's the PR for the tables POC. Let me know if you have any questions. https://github.com/Lullabot/olivero-poc/pull/18
Comment #5
mherchelThanks! Review left.
Comment #6
proeungChanging the status of this issue to match this PR - https://github.com/Lullabot/olivero-poc/pull/18#issuecomment-558273201.
Comment #7
katannshaw CreditAttribution: katannshaw at Lullabot commented@mherchel and @proeung: I reviewed the tables in the POC at https://deploy-preview-18--olivero-poc.netlify.com/ and they look great especially when compared to W3C tutorials tables with one header at https://www.w3.org/WAI/tutorials/tables/one-header/
One thing we'll have to plan for in the future are more complex tables when it comes to scope="row" as well as matching id and header attributes.
- Kat
Comment #8
proeung@katannshaw Thanks for reviewing my PR! @mherchel I think we can safely merge this PR, can you take a look and let me know if you have any questions before it can be merged? https://github.com/Lullabot/olivero-poc/pull/18#issuecomment-558273201
Comment #9
proeungMarking this issue as fixed since the work has been merged to the master branch of the POC repo. Please create follow-up tickets, if you see any issues. Thanks!