[Ic-Pagination] - Wrong element receives focus

[ad9242]

Summary of the bug

When using the complex pagination type with a large number of pages, the wrong element can receive focus after an item is selected

🪜 How to reproduce

Tell us the steps to reproduce the problem:

1. Go to page: 'storybook'
2. In the first example, click on the "5" button
3. See that 5 is marked as selected, but "6" now has focus

Whilst not an accessibility issue, this is quite confusing as it feels like the focus has moved to the next button.

📸 Screenshots or code

before:

after:

🧐 Expected behaviour

Suggestion is that focus should be on the button corresponding to the number clicked.

📝 Acceptance Criteria

If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

Given a pagination page number When the page is selected via keyboard or mouse Then focus should be placed on the corresponding page number button and not moved to any other

[ad9242]

fixing this may help with #1808

[MI6-255]

Is this the right decision? Do other libraries do this?

[GCHQ-Developer-094]

Have investigated and this does indeed replicate MUI behaviour (https://mui.com/material-ui/react-pagination/). However I cannot find the logic or reasoning as to why they have designed it this way, as the majority of other libraries I have tried do not replicate this behaviour.

Given MUI seems to be the exception, and logically it makes sense that focus should stay on the selected elements (irrespective of it being last in the sequence of the current view) - I suggest we change make the change.