[Ic-Select] - selected item does not have focus indicated visually when menu opened
- 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

4) now press the ArrowDown key - selection changes to "Latte", but it also has a background color:

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