Several lux grids should actually be lux data tables

[sandbergja]

Current display

The following screens use the lux grid component to present tabular data.

• https://lockers-and-study-spaces-staging.princeton.edu/lockers/
• https://lockers-and-study-spaces-staging.princeton.edu/locker_applications/awaiting_assignment
• https://lockers-and-study-spaces-staging.princeton.edu/locker_applications/
• https://lockers-and-study-spaces-staging.princeton.edu/locker_assignments/
• https://lockers-and-study-spaces-staging.princeton.edu/study_rooms/

Desired display

Using a data-table instead would provide several benefits:

• screen reader users could navigate the table using the table controls. Presenting tabular data without tabular markup is a WCAG 1.3.1 failure, so I'm adding the accessibility-A label.
• each row would not be announced as an "article" by voiceover
• data-table comes with column sorting controls
• less repetition in the UI
• better semantics

Acceptance criteria

• Each page above uses a <data-table> instead of a <grid>
• I can successfully use these keyboard commands to navigate these tables using Voice Over in Safari.
• I have checked these pages using one of the following browser extensions and confirmed that migrating to a data-table does not add any level A or level AA issues:
  • axe dev tools
  • Lighthouse
  • Wave

Notes

• See also the WCAG H51 technique: Using table markup to present tabular information
• This issue was discovered by @sdellis , @christinach , and me.