mi6 / mi6/ic-ui-kit

[Ic-Select] - selected item does not have focus indicated visually when menu opened

Open
#3,019 4 comments 0 reactions 0 assignees View on GitHub
select component
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

## Summary
The selected item in the options does not have the focused styling when the menu is opened

## 💬 Description
When the ic-select is opened, although the selected item is marked with tick, it does not have the focussed background styling. This makes it particularly jarring to use with a keyboard, especially when some page content changes as a result of using the arrow keys to navigate the select options (eg in the pagination items per page control in data-table).

Once an arrow key is used to change the value, the new value does have the background styling

To Recreate:

1) go to https://mi6.github.io/ic-ui-kit/branches/develop/react/?path=/story/select-single--default-value
2) using the keyboard, focus on the select (it should have the value Cappuccino)
3) press enter to open the select - see the item has a tick marking selection
![image](https://github.com/user-attachments/assets/787f3182-f5f3-465d-80a9-cb5bfa8dd00a)

4) now press the ArrowDown key - selection changes to "Latte", but it also has a background color:
![image](https://github.com/user-attachments/assets/0613e7e1-debc-432e-ba60-e97b254f037c)

An example of this causing a jarring experience can be seen on the [data-table pagination example](https://mi6.github.io/ic-ui-kit/branches/develop/canary-web-components/?path=/story/web-components-data-table--pagination-example), if you interact via the keyboard as described above

## 💰 Use value
Changing the item to have the selected background color would avoid confusing of which item is focussed, especially for keyboard users

## 📝 Acceptance Criteria

*Given* an item is selected in an ic-select
*When* the menu is opened
*Then* the selected item should have the selected background styling (in addition to the check mark)

> Please update the [Cypress snapshot for this behaviour](https://github.com/mi6/ic-ui-kit/blob/main/packages/react/cypress-image-diff-screenshots/baseline/IcSelect.cy.tsx/default-value-open.png). The snapshot should show the default value as focussed when the select is first opened

## Additional info
SelectOnEnter already exists on Select - https://mi6.github.io/ic-ui-kit/branches/develop/react/?path=/story/select-single--emitting-ic-option-select-on-enter
Could potentially solve the pagination bar issue by implementing this?

Contributor guide

Open the contributing guide

Research direction

Start with the IcSelect behavior shown in the default-value-open Cypress snapshot at packages/react/cypress-image-diff-screenshots/baseline/IcSelect.cy.tsx/default-value-open.png, then inspect the Select implementation and its existing SelectOnEnter behavior. Reproduce the keyboard interaction from the issue and update the behavior so the initially selected item has selected styling when the menu opens; refresh the snapshot and verify the acceptance criteria.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend, testing
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
74/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.