Update pagination style and kb navigation for editions table

[schu96]

Addresses #9853 tasks 1 and 3

Refactor

Technical

Adds a background to pagination button to make it easier for users to see which page they are currently viewing.

Prevents users from tabbing into the a element within the editions table header row, and adds an outline for the currently focused element within the row. Arrow keys left and right can be also used to switch between the two header rows.

Pressing enter within a section of the table header row will now update the arrow indicator for ascending/descending order.

Testing

Go to a works page and scroll down to the editions table.

Verify that the current paginated button has a grey background with black text.

Tab into the editions table header row and use Enter/ArrowLeft/ArrowRight/Tab/Shift + Tab to test added keyboard navigation.

Screenshot

2024-09-17.08-21-20.mp4

Stakeholders

@cdrini

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 0% with 20 lines in your changes missing coverage. Please review.

Project coverage is 16.35%. Comparing base (ce16a79) to head (40c16b0).
Report is 411 commits behind head on master.

Files with missing lines	Patch %	Lines
...ary/plugins/openlibrary/js/editions-table/index.js	0.00%	11 Missing and 9 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #9883      +/-   ##
==========================================
+ Coverage   16.06%   16.35%   +0.29%     
==========================================
  Files          90       92       +2     
  Lines        4769     4927     +158     
  Branches      832      865      +33     
==========================================
+ Hits          766      806      +40     
- Misses       3480     3576      +96     
- Partials      523      545      +22     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[cdrini]

Hmm, would it work if we added the tabindex="-1" to the html here?

openlibrary/openlibrary/templates/type/work/editions_datatable.html

Lines 16 to 17 in dc927e5

	<th class="title" title=""><a href="javascript:;">$_('Edition')<span></span></a></th>
	<th class="read" title=""><a href="javascript:;">$_('Availability')<span></span></a></th>

If we put it there, I think we won't need the keydown listener, since then the tabbing can behave like the browser default! And since you restored the focus state of the th, it should have the outline and everything!