Open schu96 opened 1 week ago
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! 5) Create a separate PR for this one since it will likely be a little bit more meaty.
To answer your question about the files:
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 :+1: Let us know if you have any further questions!
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
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 thea
element containing the word edition.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.
Feedback Questions
Most of the changes I'd like to make to the AE table are within
js/editions-table/index.js
andlegacy-datatables.less
, but I noticed that a separate HTML and CSS template was made ineditions_datatable.html
andeditions.less
.Is there a preference for keeping the two sets of editions table, or to reuse the FE table template?
Decisions
Stakeholders