Editions Table Style Touchup

[schu96]

Description

Within the editions table that is found within a work, I noticed some potential visual and accessibility changes that can make it easier for users to navigate through this table. However these proposed changes are not completely straightforward to make since there are two distinct editions table files: the Featured Editions table (FE) and the All Editions table (AE).

Relevant Designs

1. The pagination buttons at the bottom of the table do not make it entirely clear which page the user is currently viewing.

2. The selected edition within the table is only slightly darker compared to other editions within the table and could potentially benefit from stronger contrasting colors or maybe an indicator icon.

3. Keyboard navigation within the edition/availability row has redundant behavior. Pressing Tab from the search bar moves focus into the th containing the edition. Pressing Tab again will move focus into the a element containing the word edition.

4. The icons within the edition/availability row are not actually functional. Clicking on any part of the table header will toggle between the sorting parameters. The only visual indication of editions/availability being sorted ascending or descending order is a small text arrow next to the header text.

5. Magic select only works for the first page of edition results.

Feedback Questions

Most of the changes I'd like to make to the AE table are within js/editions-table/index.js and legacy-datatables.less, but I noticed that a separate HTML and CSS template was made in editions_datatable.html and editions.less.

Is there a preference for keeping the two sets of editions table, or to reuse the FE table template?

Decisions

Stakeholders

[cdrini]

Howdy @schu96 ! Thanks for compiling this list! 😊

For 1, try to match (or potentially reuse if possible) the styling of our normal pagination widget, eg from search page:

For 2, please feel free to propose some designs!

For 3, good catch, fixes welcome! Likely setting tabindex=0 from the "^V" buttons and from the book cover might be the best bet

For 4, designs welcome!

For 5, this one will be a bit tough, since it might require some clever hooking into the way the editions table plugin works, but fix very much welcome!

Overall, I think you can:

1. Create a PR for 1 & 3 right now; those are quick changes which we should be able to test/get merged in quickly
2. Propose designs for 2 & 4; those will need some feedback before we commit. But if you prefer to design with CSS, then feel free to open up a draft PR once you have a design you think is good and we can provide feedback there. Just be prepared that we might ask for changes!
3. Create a separate PR for this one since it will likely be a little bit more meaty.

To answer your question about the files:

• Any JS changes will likely be in js/editions-table/index.js as you correctly surmised. For (5), you might also potentially need to make some changes to openlibrary/plugins/openlibrary/js/ile/utils/SelectionManager/SelectionManager.js . This is the file that handles the ability to select various things throughout the site.
• It appears like legacy-datatables is the styling from the plugin itself, and our openlibrary-specific overrides are in editions.less. So any css changes should be in editions.less 👍

Let us know if you have any further questions!