Description

Accepted

Small interaction area

To improve accessibility and visual design, the target of each page should have at least a 24px activation area. https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html

- Created https://jira.xwiki.org/browse/XWIKI-22677

Still in discussion

This proposal aims to change the pagination display of XWiki tables to a new visual standard.

Problems identified:

1. Inconsistent Layouts: Live Table (LT) and Live Data (LD) have different visual layouts for tables. 
2. Secondary Placement of Pages: The pages listing is currently secondary in the reading flow.
3. Complex Results Info: The current format (“Results # - # out of # per page of #”) is hard to interpret. It requires the user to read the whole sentence to make sense of the numbers.
4. Subtle Selected Page: The selected page is indicated with subtle bold text. I suggest increasing contrast by using the primary action color as the background.
5. Small Interaction Area: The space for mouse interaction on each page is narrow. 

Solutions Proposed

Inconsistent layouts

Ideally, both (LD and LT) would have the same layout. However, with LT being migrated to LD, with time this problem will cease to exist. Discussions on this issue: https://forum.xwiki.org/t/close-move-issues-related-to-livetable/14380/2

Secondary Placement of Pages

The solution proposed here is to bring pages to the beginning of the line, right now it is where the string "Entries # - # of ### ..." is.

Complex results info

Separate into two sections. "Results per page" and "Totalization of Results". Information about totals can be important, so we might show them, but without the count of the results in the active page (# - # of ###) (Thiago's note: I'm waiting feedback on this one). 

Subtle selected page

Improve the visual design of the selected page, making it more obvious. Note that the colored background should follow the primary color of the theme.

Small interaction area

To improve accessibility and visual design, the target of each page should have at least a 24px activation area. https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html

Mockups

Live Data

ControlsAround

Example Table

In context