Grid column and action menu config dropdowns should allow multiple changes at once
Bug #2057692 reported by
Stephanie Leary
This bug affects 2 people
Affects | Status | Importance | Assigned to | Milestone | |
---|---|---|---|---|---|
Evergreen |
Confirmed
|
Wishlist
|
Unassigned |
Bug Description
Under Grid Options, the interfaces for Manage Columns and Manage Action Menus use standard Bootstrap dropdown buttons for each option that can be toggled. Since these buttons close the dropdown when pressed, the user has to re-open the dropdown for each column or menu action they want to toggle. This is an accessibility issue for keyboard / screen reader users.
It should be possible to select / de-select multiple options at once using checkboxes.
Changed in evergreen: | |
status: | New → Confirmed |
Changed in evergreen: | |
importance: | Wishlist → Undecided |
description: | updated |
To post a comment you must log in.
Here is a branch that changes the green check / yellow X toggle buttons to checkboxes: https:/ /git.evergreen- ils.org/ ?p=working/ Evergreen. git;a=shortlog; h=refs/ heads/user/ sleary/ LP2057692- grid-config- checkboxes
In the grid options dropdown, the order of the columns is now different. Visible columns are shown first, in the order they appear in the grid. Hidden columns are listed after the visible columns, in alphabetical order. (There is no divider between the two, because the underlying code returns a single array of columns.)
This branch also revises the grid column config modal for various accessibility improvements. Among other things, it turns the up/down buttons into a single drag and drop handle that has keyboard support for the up and down arrow keys.
Testing the grid column chooser:
1. Visit any grid that has configuration options for the columns and the actions menu. (I'm using a bib record's Record Notes tab in the attached screenshot.)
2. Click the gear icon ("Show Grid Options"). Below the divider line, you should see a "Columns" heading followed by checkboxes instead of the green check / yellow X badges.
3. Verify that the visible columns appear in order with their checkboxes checked, and hidden columns are listed alphabetically afterward with unchecked boxes.
4. Uncheck a box. The column should immediately disappear from the grid, and the dropdown menu should remain open until you click outside it.
5. Check a hidden column. Its name should move up into the checked-box list of visible columns, and (if you can see it behind the dropdown) the column should be immediately visible in the grid.
6. Click outside the dropdown to close it, or press the gear icon again.
Testing the grid config modal:
1. Click the gear icon and choose "Manage Columns."
2. Verify that the column names appear in the expected order, and that their checkboxes accurately reflect their visibility.
3. Use the four-way arrow icon button to drag a column elsewhere.
4. Close the modal and verify that the column moved where you expected it to.
5. Open the modal again and press the "Save" button at the bottom. Navigate to another page, then come back. The changes you made to the column order and visibility should be preserved.
Testing the grid actions menu:
1. Click the gear icon and choose "Manage Actions Menu."
2. Verify that the actions' checkboxes accurately reflect their visibility.
3. Uncheck an action and close the modal.
4. Open the grid actions menu. Verify that the option you unchecked is no longer listed.