Skip to content

Table pagination

Grigor Malo requested to merge table-pagination into master

Pagination:

  • pagination elements now have an aria-label: "Page x , Current Page" for current page, "Go to page y" for other pages
  • current pagination page has aria-current=true
  • refactor Pagination into its own component, use it in List and Table components
  • apply accessibility fixes in the Pagination component
    • remove tabindex from <li>, make <a> tags focusable by adding an href
    • on click of <a> prevent default and delegate click to parent <li> (bcs that's the element where the click event is attached)
    • apply aria-label, aria-current to the <a> tags accordingly
    • make previous and next buttons into <a> tags, fix their interactivity
    • expose ref to pagination <nav> wrapper
    • pagination can be customized with the pagination.itemRender prop, which takes a function same as itemRender from antd (demo in stories)

Other fixes:

  • "Select all" checkbox on top of the table in UserList should display correctly (intermediate state was buggy)

Test notes:

  • check that pagination is working fine in Lists and Tables (check in stories, also in Discover, Dashboard, UserList in the app)
  • test keyboard interaction (tab through the pages, activate with Enter)
Edited by Grigor Malo

Merge request reports