Lot of accessibility issues

Certain implementation decisions that were made for the pagination component have resulted in some serious inaccessibility issues. These include:

• The programmatic label for all pager buttons uses the title attribute which is sub-optimal. aria-label is the best attribute to use as it works with more screen readers.
• The programmatic label for page number pager buttons only includes the page number itself and cannot be changed so screen readers will only ever announce eg. "2" instead of something more helpful like "Page 2".
• Since a pagination component includes navigation elements, it should necessarily be wrapped in a nav element with appropriate programmatic label (eg. <nav aria-label=”pagination”>).
• The active page is not identified (using aria-current="page") and is, therefore, not announced by screen readers.
• Instead of having the focusable/actionable pager elements be the anchor or button within each <li> element, the focusable elements in the Pagination component are the <li> elements. This results in the following issues:
  • a suboptimal screen reader UX because, when an element is focused, a screen reader will announce “clickable item 2” instead of something more helpful like "page 2 link".
  • the focusable element is only actionable via the ENTER key only rather than the SPACE and ENTER keys.
  • using UP/DOWN keys has unexpected/undesirable results.

For reference, here is a good example of an accessible pagination component.

Start at the Pagination component implementation and inspect how pager labels, page state, navigation structure, and focusable elements are rendered. Use the W3C pagination example linked in the issue as the accessibility reference. Done means screen readers receive useful page labels, navigation and current-page semantics, and pager items use appropriate actionable elements and keyboard behavior.