508-defect-3 [ZOOM]: Legionella water testing table

[1Copenut]

Description

Some pages have tables that are hard to read at 400% zoom. The table could scroll horizontally (or the whole page be allowed to scroll horizontally) or be reworked to fit within the 1280px window without text going to the edge. Screenshot attached below.

Type of Issue

Template

Point of Contact

VFS Point of Contact: Trevor

Acceptance Criteria

• [ ] Page scrolls to the right to allow me to read the full table OR
• [ ] Table CSS is redesigned to make the table easier to read in the window

Environment

• Chrome
• MacOS Mojave
• Server destinations:
  • https://www.va.gov/pittsburgh-health-care/legionella-water-testing/

Steps to Recreate

1. Enter a server destination from above
2. Set browser width to exactly 1280px
3. Press Ctrl + Plus to zoom in. Zoom to at 400%
4. Verify the table is hard to read

WCAG or Vendor Guidance (optional)

• Understanding Success Criterion 1.4.10: Reflow

Screenshots or Trace Logs

[davidconlon]

@1Copenut is this unique to facilities or is this an issue with the design system as a whole?

[mmiddaugh]

I think this issue is resolved. @1Copenut can you please validate at your convenience?

[jenstrickland]

This one does not seem to be resolved. I was unable to scroll to see more to the side.

[mmiddaugh]

My apologies, I thought my browser had zoomed but apparently, it had not. Sending this back to backlog

[mpelzsherman]

I can't reproduce the issue here - I can see the full table no matter how far I zoom in.

Update: the table is indeed cut off at 400%.

[mmiddaugh]

Linking to work being explored by other teams: #13825, #203 and a Slack thread on the subject

[jenstrickland]

The CSS has the table width at 100% and at a viewport of 320 pixels wide the width of the table is 361 pixels.

The table code is also problematic. The <tbody> should not be repeating.

Here is table HTML provided to the PW team.

Public Websites responsive table work: https://github.com/department-of-veterans-affairs/va.gov-team/issues/14157

[mpelzsherman]

Looks like there is a responsive table component that has been approved by the design council.

Once this component is available, we should write tickets to apply it everywhere it is needed.

I think this ticket should be closed, and specific tickets for specific tables should be created.

[mmiddaugh]

Updating this ticket to reflect the Legionella water testing table specifically. Additional issues can be created for other pages with table content.

I hope this approach is acceptable, Jennifer.

[mpelzsherman]

The tables on https://www.va.gov/pittsburgh-health-care/legionella-water-testing/ are coded in Drupal.

Converting them to use the design system component would require re-work in Drupal, b/c the query is outputting the whole table, as opposed to individual cells that we are wrapping in html in the template.

[jenstrickland]

I wrote the code the teams used for the tables. The component that is referenced in that link is for React apps.

The Public Websites team is currently implementing a responsive table in the Benefit Hubs CMS pages, that would be helpful for this work that is in CMS pages. I worked with them on that table, as well. That code should be useful for this work.

[jenstrickland]

Here's the link to the documentation for their dev intent that @ncksllvn and team are working on: https://github.com/department-of-veterans-affairs/va.gov-team/issues/14157

[mpelzsherman]

Per @ethanteague, we can write a JS filter that adds the necessary CSS classes to the Drupal tables so we can then leverage the CSS code used by the Benefit Hubs team. I'm estimating this ticket as a 5 given that approach.

[jenstrickland]

The table y'all have is a comparison table. The one the Public Websites Benefits Hubs team is working on first is a lookup table. They need a comparison table, too, and it's something they plan to work on in the future. I started working on that with them, and have the code started.

For your use case, it is fortunately only four columns, so the base table markup would be the same.

Then there are two choices,

1. Use the non-collapsing pattern since this is a comparison table: https://codepen.io/jenstrickland/pen/NWNOjMO?editors=1100
2. Public Websites is building a version that collapses everything beyond the first column at smaller viewports.

It depends on how you expect users will use this table. Are they looking most for data for a specific year or do they want to scan and compare data over multiple years?

[davidconlon]

@mmiddaugh @mpelzsherman

Want to emphasize/repoint this issue: The problem we need to solve is not necessarily this one Legionella table but is more "If a VAMC editor uses a table for their website, the table does not create zoom issues for veterans"

We can't do bespoke tables on this product. This has to be a scalable, sustainable solution. We will be unable to monitor.

[mmiddaugh]

CMS has this epic to address this issue long term from the editorial side. Timeline currently unknown