Web Staff Client - Accessibility with tables that aren't really tables

[Terran McCanna]

Screen readers such as JAWS have a difficult time understanding and translating data that is visually laid out in a table format but is not really a table. When a screen reader is reading something like the items in a bootstrap grid (such as the list of search results produced by a patron search, a list of items out on a patron's account, a list of bills, patron summary info, etc.), it reads every element continuously but does not explain to the user how the grid is laid out

Example of how NVDA (free screen reader software) currently reads the column headers and the first line in a patron search results grid (I hid some of the columns to simplify the example - screenshot attached):

Number
Checkbox Not Checked Row Select a Column
ID
Card
Profile
Visited Link Last Name
Visited Link First Name
Clickable Visited Link 1
Checkbox Not Checked Select Row
Clickable 2799
Clickable 373565
Clickable Patron
Clickable Smith
Clickable Alexandra

Same example if it were in an HTML table:

Table with two rows and seven columns
Row 1
Column 1 Number
Column 2 Checkbox Not Checked Row Selector Column
Column 3 ID
Column 4 Card
Column 5 Profile
Column 6 Visited Link Last Name
Column 7 Visited Link First Name
Row 2
Number Column 1 Visited Link 1
Row Selector Column Column 2 Checkbox Not Checked Select Row
ID Column 3 2799
Card Column 4 373565
Profile Column 5 Patron
Last Name Column 6 Smith
First Name Column 7 Alexandra

Bootstrap grid navigation might be improved by using aria to make screen readers understand them as tables, but it will require experimentation and testing to be sure.

[Jane Sandberg (sandbergja)]

Related bug in the OPAC: https://bugs.launchpad.net/evergreen/+bug/1467645

[Stephanie Leary (stephanieleary)]

Big proposed change incoming!

This branch rewrites the Angular eg-grid markup to use tables instead of divs:
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/LP1615781-eg-grid-tables

This introduces significant changes to the way column size, alignment, wrapping, and tooltips are handled. Aside from the accessibility benefits, the advantage of using tables is that we can let the browser set the column sizes automatically based on the contents. Text wraps automatically and does not show a tooltip. In other words, we assume that you should see all the data in the table cell.

All columns have a set of class names derived from the IDL field name, path, and datatype. This will allow us to write very precisely targeted styles for specific columns. There is some styling in place for certain columns, especially barcodes and numbers, which I have detailed here:
https://wiki.evergreen-ils.org/doku.php?id=dev:eg-grid:styling

You can resize columns on the fly. Each column has a blue resize slider, visible on hover/focus near the right edge of the column header. See below for detailed notes on how this works.

While this work was undertaken primarily to address the accessibility issues with div-based grids, the tables necessitated a rewrite of the column width controls, since the old flex=N sizing mechanism no longer applies. This branch therefore includes fixes for several other bugs related to column width and tooltips:

Bug 1778311 Web Client - Columns Can't be Resized on the Fly
Bug 1802169 Grid Column Headers too narrow
Bug 1858684 Angular grids: filter UI wider than grid columns
Bug 1878634 Show full column heading on mouseover in web client grids
Bug 1963708 Item Table has Confusing Hover Display Text
Bug 2057692 Grid column and action menu config dropdowns should allow multiple changes at once
Bug 1965835 Grid Configurations require a relog to apply as expected

This work makes it much easier to address bug 1645862, web client: Set default widths for some grid columns.

Since the Holdings View was the first thing most people wanted to look at when I initially demonstrated this work, I have included a commit that corrects the indentation in the locations / barcode column. We might want to separate this for backporting.

This branch does not change the underlying logic of grids, other than replacing the [flex] input with a character-based [size]. The column management component has been heavily revised to use tables in its own display, to reflect the new options, and to add drag and drop for rearranging columns. The old column width component has been removed.

I anticipate all this will need further refinement! Please let me know what you think.

The nitty gritty details…

Resizing columns:

You can either use the mouse or tab over to the slider using the keyboard and then move it with the left or right arrow keys. You can also set the width as a number of characters using the Manage Columns dialog. The character count will reflect changes you’ve made using the slider, but it does not auto-save; you will need to save grid settings from the settings menu or the Manage Columns dialog. You can reset a col...

[Jane Sandberg (sandbergja)]

Wow lots of great stuff in this branch, thanks, Stephanie! Two quick observations:
* I get a failing test when running npm run test: "AdminPageComponent initialFilterValues input sets initialFilterValue on grid-column"
* Noting that the keyboard support from bug 1816480 seems to be gone now. It's definitely appropriate that the roles are gone, but perhaps the keyboard interactions are still useful.

[Andrea Neiman (aneiman)]

Noting that this work was funded by King County Library System.

[Stephanie Leary (stephanieleary)]

I have updated the branch to correct the issues Jane spotted in #4. Thanks, Jane!

I've also added an improvement to the column resizing so that you can shrink a column to be narrower than its longest word. Admin > Hold Matchpoint Weights is a good place to try this out.

There is also a change to the TypeScript compile version. My colleagues have stated a preference for a fixed target rather than a moving one, so I've used ES2021 instead of ESNext.

I've left these follow-up commits visible for now, but they can be squashed later.

[Jane Sandberg (sandbergja)]

I am a huge fan of this branch! Thanks for these improvements, Stephanie. I noticed a few more things when looking at it today:

* The flair column is huge, and cannot be resized. (For example, in Booking > Create Reservations when there's just one bookable resource, the flair column expands to fill up much of the width of the screen, which looks odd)
* When I tried using the arrow keys to resize columns on the Acquisitions Line Item Search, the arrow press also caused the grid to move to the next page
* The "actions for selected rows" and "Show grid options" buttons are slightly smaller than the pagination buttons.
* `ng lint` has two complaints, both of which can be resolved automatically with `ng lint --fix`

[Stephanie Leary (stephanieleary)]

I'll work on these, Jane. Thanks for going over this so thoroughly!

[Andrea Neiman (aneiman)]

This is available on public test server https://festivus.evergreencatalog.com/ (admin / demo123 ; Concerto data) - fixes pending for issues noted in comment #7.

[Stephanie Leary (stephanieleary)]

I've added a commit to the branch to address the issues Jane found, and Festivus has been updated.

[Terran McCanna (tmccanna)]

I am really loving this, Stephanie! I found two more little things:

1) On a screen where some columns are filterable and some aren't, the column headers don't line up nicely. (See Server Admin > Circulation Duration Rules for example). Perhaps the column headers can be aligned at the top of the row rather than the bottom?

2) When there is no content in the grid, the dropdown for the gear icon gets truncated to the height of the grid. For example, if you open the Holds Pull List for a branch with no holds listed, the gear icon only shows the top 3 options. (It is still scrollable, just less usable than before.)

[Stephanie Leary (stephanieleary)]

I've updated the branch. The additions were getting a little out of hand, so I've rebased it. There are four relevant commits. Festivus is up to date.

I'm not totally happy with the solution for the grid settings dropdown on empty tables, but let me know what you think!

[Blake GH (bmagic)]

All,

I've gone through the code and tested the grids in various scenarios. I printed the grid with selected rows. Everything worked as expected! I've signed off and I went ahead and pushed to main!

Thanks everyone for so much great testing and feedback. Giving me more confidence to push.

Huge upgrade for Evergreen!

-Blake-