Focus state being reset by browser in pagination component

[mr-gabe49]

Pagination component improvement:

Originally posted by @pavish in #963 (comment)

Issue:

1. Ellipsis is shown and user clicks on it (i.e the arrow).
2. The page number changes but ellipsis/arrow is now not present because it is not required. Eg., Ellipsis is present when active page is 7. Clicking on it changes active page to 2, and ellipsis is no longer present.
3. Since the last focused element is no longer present on the dom, the focus state is reset by the browser.

We should be resolving this by manually setting focus on the current active page when ellipsis/arrow disappears. In the above example, when we click on the ellipsis and page number is changed to 2, we should be doing element.focus() to focus the button with page number 2. We can add a data-page attribute to help query the element.

[priyang12]

@pavish @seancolsen hi, can i work on this issue?

[kgodey]

Go ahead @priyang12, thanks!

[priyang12]

@kgodey hi i think i have resolved this issue here is a

Screen.Recording.2022-03-22.at.1.58.00.PM.mov

clip of it . I have changed the color to red for better check but i have removed it later.

[seancolsen]

@priyang12

i think i have resolved this issue

It sounds like you're making some progress. That's great! Have you opened a PR with your work? I don't see one. Make sure to link your PR to this ticket by placing the text Fixes #1040 in the top of the description. Your above screencap would be great to include in the PR description too. We can use the PR to continue discussing your fix.

[priyang12]

@seancolsen I have one PR 1200 open so I can't make another one. should I make a new branch and make a pull request?

[pavish]

@priyang12 Yes, please create new branches for each of the issue you're working on and open separate PRs.