Test the USWDS stack mode. You might notice although the data is stacked correctly there are no headings on it.
That's because uswds does table rows twice with an attribute as seen in the example below.
https://github.com/uswds/uswds/blob/develop/packages/usa-table/src/usa-t...
Add the attribute and add the header properties to the table body as seen in their example.
By missing the heading attributes on mobile it violates the a11y benefits as one can't tell what one is looking at.
| Comment | File | Size | Author |
|---|---|---|---|
| #5 | Screenshot 2024-10-09 at 1.05.49 PM.png | 334.96 KB | bernardm28 |
| #5 | Screenshot 2024-10-09 at 1.06.25 PM.png | 363.85 KB | bernardm28 |
| #3 | Screenshot 2024-10-09 at 12.35.33 PM.png | 85.8 KB | bernardm28 |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes, plain diff MR !86changes, plain diff MR !84
Comments
Comment #2
smustgrave commentedDid you apply the filters on the text formatter?
Comment #3
bernardm28 commentedI did, but USWDS does not include the data label. So the table will be stacked but the table headings will be hidden.
https://designsystem.digital.gov/components/table/#component-variants-table
They say, that part of the implementation they left up to the developers due to the complexity of how many variations there can be I imagine.
Comment #5
bernardm28 commentedHere is what the before and after look like.
Before
After
The code above does make a few assumptions but for basic scenarios it gets you there and might be easier to modify for more advanced used cases.
Comment #6
bernardm28 commentedPretty cool how USWDS is stacking the tables with just CSS. But kind of unfortunate that means somethings they could not solve, like the table headings.
Comment #7
bernardm28 commentedComment #8
bernardm28 commentedComment #9
smustgrave commentedThe filter should be fixed vs aftermarket in this case
Comment #10
smustgrave commented1 are you setting the table header in the ckeditor?
Is the uswds stackable filter turned on.
Not able to reproduce.
Comment #14
smustgrave commentedActually did find a bug where scope="row" was not being set.
#3481732: Stacked table without header causes warnings I'm going to log an error that a table is missing a header and add a warning on the text formatter if you don't set the filter.