Pagination: Screenreader issues

[silvalaura]

Unexpected behavior when using a screen reader:

Steps to reproduce problem 1

• Open Pagination;
• Turn on the screen reader;
• Select the classic Pagination;
• Set more than 7 active items (count);
• Focus on the 5th item (before dots) using a keyboard;
• Press the Right arrow;
• Notice that the screen reader announces 'dot dot dot'. Furthermore, to select the next element, you must press the Right arrow 3 times (through all dots).

Note: Works with the Left arrow as well.

--

Steps to reproduce problem 2

• Open Pagination;
• Turn on the screen reader;
• Select the classic Pagination;
• Focus on the last item using a keyboard;
• Press the Right arrow;
• Notice that the screen reader announces some letters. Also, focus is lost, to get back, you must press the Left arrow after passing all the “invisible items” backwards.

Note: Works with the Left arrow for the first item as well.

--

Steps to reproduce problem 3

• Open https://next--upbeat-sinoussi-f675aa.netlify.app/api/pagination/#basic_usage or https://react-magma.cengage.com/version/4.6.0/api/pagination/#simple_pagination.
• Focus on any item using a keyboard;
• Press the Right/Left arrow;
• Notice that the focus doesn't move.

Note: If you turn on a screen reader, the focus will move as expected.

--

The screen reader doesn't read the expanded list.

Steps to reproduce problem 4

• Open Pagination;
• Turn on the screen reader;
• Select simple pagination;
• Focus on it using a keyboard;
• Press Enter/Space to expand it;
• Navigate through the expanded list using Top/Bottom arrows;
• Notice that the screen reader doesn't read expanded items. (It will read only Page number {selectedNumber} of {maxNumber} pages selected)