Staging Review finding: use va-table for tabular data

shiragoodman commented 1 month ago

Need help? Please review how to read a Staging Review ticket. Tag @platform-governance-team-members on Slack if you need further assistance.

Product Information

Team: Appointments Product: Appointments Feature: Appointment Details Redesign

Findings details

VA.gov Experience Standard - issue: User encounters a component or pattern that isn't considered a best practice. VA.gov Experience Standard - category: Consistency Launch-blocking: No Design System review: No Collab Cycle Reviewer: @it-harrison (QA)

Description

The tables that display the upcoming, pending, and past appointments are not rendered using the va-table web component but instead rely on an imposter component.

Recommended action

Use the va-table component for appointments

References

Accessibility Defect Severity: N/A
WCAG Success Criteria: N/A
Modality: N/A
Design System Component: Table
Design System Pattern or Template: N/A
Design System Foundation: N/A
Content Style Guide: N/A
Context: N/A

Next Steps for the VFS Team

[x] Questions? For the most timely response, comment on Slack in your team channel tagging @platform-governance-team-members with any questions or to get help validating the issue.
[x] Ticket ownership: If you believe that this issue is out of scope, not your team's responsibility, or a Design System issue, comment and tag @platform-governance-team-members on your team channel in Slack to provide an explanation and who you believe is responsible. The Governance team will follow up.
[x] Close this ticket when the issue has been resolved or validated by your Product Owner.

outerpress commented 1 month ago

@ldelacosta I'm sure we had this conversation when the lists went through staging review a long while back. Could you dig around and see if this was mentioned in any of those tickets?

Also @vbahinwillit @Cieramaddox do you have any memory around why we went the div route vs using the va-table component?

vbahinwillit commented 1 month ago

@outerpress - The va-table component is new to me. However, the appointment list has some complex layout requirements so I'm not sure this components meets all of the requirements.

outerpress commented 1 month ago

@it-harrison I agree with @vbahinwillit. Looking at VA table I think it would require too much customization to meet our needs. This is also out of scope for the details redesign. More details below, but that's the BLUF for why I'm going to close this one out. Please feel free to reopen if you disagree though! Thanks.

I don't see a way to customize how VA table collapses. The appointment list keeps the data in a column on the smallest screen make it easy to scan through multiple appointments on the same day. va-table collapses everything into individual rows.

The appointment list rows also collapses on tablet in a custom way that I'm not seeing a way to recreate with va-table

Each row in the appointment list is clickable. There doesn't seem to be a way to do this with va-table.

FYI @ldelacosta @Cieramaddox

shiragoodman commented 1 month ago

@outerpress opening this one back up. We ask that our Staging Review issue tickets remain open until the issue is resolved.

If you don't want to use the va-table component, then that's fine, however what you have now is an imposter version of that component. Meaning your options are use the va-table component or come up with another solution. You can't continue to have it coded to look like va-table without using va-table. Does that make sense? You're also free to partake in experimental design to modify the va-table component if it doesn't currently meet your teams needs.

cc @humancompanion-usds @it-harrison

outerpress commented 1 month ago

That makes sense, thanks @shiragoodman ! I'll file an experimental design ticket and add it here.

humancompanion-usds commented 1 month ago

@outerpress - Can you achieve what you want with any of the 8 USWDS variations? If so, let us know so we can prioritize getting that variation implemented. If not, then I'd question the design and use of a table.

outerpress commented 1 month ago

@humancompanion-usds I'm setting up ED ticket 3090 to bring this one to the design council to help suss this out. @rtwell has a bunch of great questions there - I'll add this comment to that ticket for context.

The main features not covered by va-table:

Entire row is clickable. I think we could just make the title (the bolded data) clickable if we need to though.
Shows multiple appointments on the same day
Keeps date consistent while collapsing appointment data on the same page

I don't have the original CC ticket handy but for background we landed on this pattern to create a responsive view of appointment data that would be easier to scan, and let users see more appointments on the page.

outerpress commented 1 month ago

@it-harrison @shiragoodman notes from the DSC discussion on these lists

The overview is that we want to keep iterating on these appointment summary lists, working with the other health care teams to create a more modular pattern while looking at similar lists - medications was called out specifically.

We were given direction not to use tables - that tables are problematic for screenreader users, and this is more focused on layout than specific to tabular data. (@artsymartha68 let me know if I'm mis-remembering this)

So given the options:

use the va-table component
come up with another solution

I'm looking for recommendations on how to make the appointment lists less table-like --either in how it's coded, or visually -- to meet those needs. We can consider that as we work on iterating on (all of) these lists over time.

I'll drop this here as a possible answer to my own question - we could work on meeting the requirements while using more semantic elements to help folks navigate. We thought about this with Angela Fowler and Josh Kim back in the day: https://codepen.io/outerpress/pen/mdzBWmz

Happy to bring this to office hours too, or continue the discussion elsewhere.

shiragoodman commented 1 month ago

@outerpress I think it might make sense for you to bring this to Design Office Hours as Ian and I are likely not the right people to provide guidance on the solution. @humancompanion-usds FYSA

department-of-veterans-affairs / va.gov-team