search

cloud-gov / cg-ui

for the 2024 18F-supported cloud.gov product UI formerly known as the Stratos Dashboard
Other
3 stars 0 forks source link

USWDS Table React components #444

Closed echappen closed 2 weeks ago

echappen commented 3 weeks ago

Changes proposed in this pull request:

Notes

These components aim to comply with the accessibility tests for USWDS Table.

I considered using USWDS Layout Grid utilities for this, but using an html table won out due to the built-in accessibility benefits (MDN strongly discourages using aria: table roles instead of an html table). Cell sizing with Layout Grid was also a challenge. You can compare the two approaches on /prototype/tables.

The drawback to using USWDS Table (and potentially any larger USWDS component that we may modify) is that certain styles could not be overridden with utility classes, so CSS selectors must be used. I did my best to keep whatever styling I could in utilities and use selectors only when necessary.

Related issues

first part of #428

Submitter checklist

Security considerations

None, UI only

echappen commented 2 weeks ago

@beepdotgov This isn't hooked up to real data yet (I'll probably do that in another PR given the size of this one), but I think this is ready for an initial design review. Check out the same prototype page we were using: /prototype/tables

I’m at sort of an impasse with the sticky elements:

  1. I couldn’t get both vertical and horizontal sticky elements to work together using this proposed method (I'll keep trying)

  2. I also can’t seem to make the table both .usa-table--sticky-header and .usa-table-container--scrollable. I can do one or the other, but not both.

    • If we had to pick one, I’d prefer making it horizontally scrollable in order for it to pass accessibility zoom magnification tests (without horizontal scroll, you can’t see all content at 200% zoom)

    While I try to get #1 working, any thoughts on which direction to go provisionally for #2?

beepdotgov commented 2 weeks ago

@echappen This is looking fantastic so far. Seriously, you’ve done a remarkable job wiring all this together.

I’ll add a couple design notes to a review comment here shortly. But! To your questions:

I couldn’t get both vertical and horizontal sticky elements to work together using this proposed method (I'll keep trying)

Sounds great, keep me posted! (If it’s not doable, that’s fine — that really was a stretch goal.)

I also can’t seem to make the table both .usa-table--sticky-header and .usa-table-container--scrollable. I can do one or the other, but not both.

Between the two of these, making the table scrollable definitely feels like the better approach here. +1 from me.

That said, I’m curious: can we define the breakpoint the table uses to switch over to the stacked view? I’d be comfortable dealing with some line wrapping, and switching over to the card-like view of the table a little earlier.

echappen commented 2 weeks ago

That said, I’m curious: can we define the breakpoint the table uses to switch over to the stacked view?

@beepdotgov Unfortunately I can't find a setting for that for just the table component (if you scroll to the Table heading you'll see all the options). I think you can adjust what the mobile and mobile-lg etc breakpoints are, but that would be a global change.

beepdotgov commented 2 weeks ago

Looks like you’re spot-on, @echappen — I just poked around briefly in the uswds source, and it looks like it’s fixed at mobile-lg. (I’ve asked in #uswds-public to confirm, though.)

If we’re locked into that breakpoint, then yes: let’s stick with the scrollable tables on wider viewports 🙌🏻

beepdotgov commented 2 weeks ago

(I’ve asked in #uswds-public to confirm, though.)

(Quick note to confirm that, yes, the breakpoint is hard-coded in the USWDS source. We could definitely create a custom breakpoint for our tables, but it’d require some non-utility css.)