Unify and fix accessibility of the various Pagination components

afercia commented 7 months ago

Description

The editor uses a few user interfaces where pagination buttons are in place. For example:

dataviews
patterns explorer
global styles revisions
possibly other places I may have missed

While theoretically these pagination are very similar and should work in a very similar way, they are all different and use different components.

From an accessibility perspective, there are a few issues. Most notably:

Buttons get dynamically disabled while they are focused, thus triggering a focus loss. See https://github.com/WordPress/gutenberg/issues/56547
The buttons don't show a tooltip so that their accessible name isn't visually exposed.

I'd tend to think these pagination tools should work and look the same way throughout the whole user interface. It's also a good opportunity to fix the most relevant accessibility issuses and abstract some code.

Screenshots:

Dataviews pagination:

01 pagination dataviews

Patterns explorer pagination:

02 pagination patterns explorer

Global styles revisions pagination:

03 revisions pagination

NEW: Pages pagination: note: as far as I can tell this is the only case where the buttons do not trigger a focus loss because they use arira-disabled instead of disabled. Tooltips work as well. The implementation of the current page indicator is arguable though as it's a mix of translatable strings and labeling / value of the <select> element.

new pages pagination

Step-by-step reproduction instructions

Test one of these paginations for example the global styles one.
Go to Site editor > Styles > Revisions.
Use the keyboard and Tab to the 'Last page' button.
Observe the button doesn't show a tooltip.
Press Enter.
Observe the 'Last page' button is now not focusable because it has a disabled HTML attribute.
Observe focus is lost: press Tab again and observe the tab order starts from scratch from the document root.