mi6 / mi6/ic-ui-kit

[Ic-Pagination] - Wrong element receives focus

Open
#1,871 3 comments 0 reactions 0 assignees View on GitHub
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:
![image](https://github.com/mi6/ic-ui-kit/assets/116102637/d7a9c108-234e-4397-9ec6-47f964549da9)

after:
![image](https://github.com/mi6/ic-ui-kit/assets/116102637/d6a70cfc-1742-414e-9a86-a2f38b212dcd)

## 🧐 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.