internetarchive / internetarchive/openlibrary

Editions Table Style Touchup

Open
#9,853 1 comment 0 reactions 1 assignee Claimed by @schu96 View on GitHub
Epic Lead: @cdrini Needs: Design Feedback Needs: Designs Priority: 3 Theme: Design Type: Design Proposal
Dominant language
Python
Stars
6.7k
Forks
2k
Avg merge
2d 19h
Merged PRs (30d)
138

Description

## 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.~~

![image](https://github.com/user-attachments/assets/de2827b8-edb0-41a3-854f-885e7e0a622c)
![image](https://github.com/user-attachments/assets/6f8c421e-ec43-485e-804d-f7032256ca49)

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.

![image](https://github.com/user-attachments/assets/590e59c9-82e9-40ef-8111-84fd97c7767f)

~~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.

![image](https://github.com/user-attachments/assets/ae153d5b-4f55-400e-a162-19d694ef7fe5)
![image](https://github.com/user-attachments/assets/dfca3e70-8480-4deb-99af-a1d21800b976)

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

![image](https://github.com/user-attachments/assets/989ec10c-53bb-4f6a-b9fd-273c33513c25)
![image](https://github.com/user-attachments/assets/917c7ee0-4450-4416-a796-74ee304a4240)

## 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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.