Carbon: Data Table: modifiers with headers in body cells

[elizabethsjudd]

What package(s) are you using?

• [x] carbon-components
• [ ] carbon-components-react

Detailed description

Describe in detail the issue you're having.

<th> cells in the table body aren't getting the correct background color/border when using the zebra modifier. When using size modifiers (compact, tall, short), the cell spacing is also unaffected.

Is this issue related to a specific component?

Data Table with modifiers

What did you expect to happen? What happened instead? What would you like to
see changed?

The th cells match the rest of the cells in the row

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

10.7.3

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

Watson Health Design Pattern & Asset Library (we have developer available to help with this contribution)

Steps to reproduce the issue

1. Have a <th> cell within the body of a table with the zebra or a size modifier

Please create a reduced test case in CodeSandbox

https://codesandbox.io/s/zebra-datatable-wtlyu

Additional information

Grey 90 screen shot

[elizabethsjudd]

@carbon-design-system/developers This is a blocking issue for us to use Carbon 10. Could you provide an ETA?

[tw15egan]

th inside of tbody is not a supported pattern of ours, thus it will likely need to be overridden on the user end. If you'd like to see this supported, we'd welcome a PR to add in this functionality.

[elizabethsjudd]

@tw15egan - this is an accessibility enhancement (headers SHOULD be in the body) and was allowed for this issue: https://github.com/carbon-design-system/carbon/issues/2280. Why would we not be allowed to add it for the modifiers?

[tw15egan]

My mistake. WIll reopen and will accept any PR to fix this issue

[elizabethsjudd]

Thanks @tw15egan! Can you assign this issue to @ChevonNwosu and he'll be able to submit a PR with the fixes.

[tw15egan]

Hmm, not letting me assign...

[vpicone]

Did design sign off on this? Having th elements visibly indistinguishable from td elements seems like it would be an a11y concern for folks not using a screen reader. The size thing makes sense, but it seems like even for row headers/vertical headers we’d want them to have the same background as the actual headers.

Would they lose all visual indicators of being table headers then?

[vpicone]

All of the w3c table examples use distinct styles for headers (whether they're in thead or tbody) https://www.w3.org/WAI/tutorials/tables/

[dakahn]

pinging @carbon-design-system/design for some feedback here

[aagonzales]

I'm a little lost, is this just asking if the zebra stripes are rendering correctly? Because its not and is a known issue that @laurenmrice was looking into.

[ChevonNwosu]

@aagonzales The ask is that Data Tables with the Zebra modifier have their header elements within the table body match the background/colors of the rest of the row. Is this the work that @laurenmrice is currently working on and is it currently being tracked within an issue or PR?

If not, I can submit a PR to fix this issue.

[laurenmrice]

This is the issue I am working on for correcting the zebra stripe appearance in data table, there is not a pr yet. https://github.com/carbon-design-system/carbon/issues/3143

[ChevonNwosu]

Hi @dakahn, why was this closed?

[elizabethsjudd]

This request isn't to have separate design styles for headers in the body. WH and Carbon had a whole conversation around this in https://github.com/carbon-design-system/carbon/issues/2280

In regards to a11y (@dakahn) , most of the time it's implied that the first column is the row header so it's common design to not have it styled differently but for screen reader users it's much harder to follow the grid layout without the visuals which is why you should almost always have row headers in your tables so they can understand the "grid".

These bugs are blocking our release and are simple fixes which we are offering to provide so we don't have to copy and paste code from Carbon as individual overwrites.

[aagonzales]

Ok to clarify this issue wasn't talking about the table row header being the same color but the first column in the data table itself not taking on the zebra stripe style.

The red indicators the problem area you are referring to correct?

[elizabethsjudd]

@aagonzales yes you are correct. The first column in those rows use a <th> in the code but it does not need to be styled differently than other cells in the row. Basically we want to target td AND th cells found in the table body in the CSS instead of having to copy and paste all of the styles from Carbon to overwrite it (not maintainable).

There are also issues with the size modifiers as the first cell is not getting the correct spacing which causes the entire row to be incorrect.

[vpicone]

W3C recommends styling td differently than th throughout tables. Maybe we should be styling the th to match the other th rather than their row.

most of the time it's implied that the first column is the row header so it's common design to not have it styled differently

All of two header/irregular header examples from W3C follow that recommendation throughout their tables: https://www.w3.org/WAI/tutorials/tables/. One of the examples demonstrates an offset row header that would be undetectable without a screen reader.

[elizabethsjudd]

I could be persuaded that they should look different that was a great reference @vpicone however ALL of their examples have th cells in the rows which is what we need to support. I'm now proposing a stop-gap and allow us to use the proper markup (with the th cells) and design can re-assess how they visually looking in a different issue.

[tw15egan]

Agreeable To-Do list?

• [ ] th supported inside tbody with proper sizing
• [ ] Determine styles for th when placed inside tbody

I agree with Vince that they should receive the same styles as th inside thead, as that seems to be the w3 standard.

[elizabethsjudd]

@carbon-design-system/developers

@ChevonNwosu can work on the first item in the todo list if you want to assign it to him.

[aagonzales]

Wait change the style of the first column everywhere or is this just for a particular use-case? Because I think there are two use-cases and one style does not work for both of them. List view of table vs spreadsheet of table

(its hard to follow along when y'all get technical)

[elizabethsjudd]

@aagonzales the work Chevon is going to do is going to make a stop gap so that table headers are supported in the table body without changing the styles of them (extend the current CSS selectors).

The future work that involves design is to come up what table headers should look like when they are within a table body. Based on the WAI standards linked to above the design for headers and standard table cells should look different. In almost all cases, tables should have headers within the table body (commonly it's the first cell but not always) so that screen reader users can understand the "grid" of the table. Using the screen shot from Vince in https://github.com/carbon-design-system/carbon/issues/3946#issuecomment-587224097, if a user reaches the cell with 10 as the content they need to understand that it belongs with both July and Gerard so both of them should be table headers. With the current samples of tables provided by Carbon they would only get July and would have to navigate to other cells to try and determine which row it belongs to.