[Ic-Pagination] - Wrong element receives focus
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
## 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' ](https://mi6.github.io/ic-ui-kit/branches/develop/web-components/?path=/story/web-components-pagination--complex)
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
Contributor guide
Research direction
Start with the Storybook complex pagination example linked in the issue and reproduce the focus change by selecting page 5 with the mouse and keyboard. Trace the pagination component from that example to identify how the selected page and focus are updated. Done means focus remains on the corresponding page-number button after either interaction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100