mi6
[Ic-Select] - selected item does not have focus indicated visually when menu opened
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:
-
go to https://mi6.github.io/ic-ui-kit/branches/develop/react/?path=/story/react-components-select-single--default-value
-
using the keyboard, focus on the select (it should have the value Cappuccino)
-
press enter to open the select - see the item has a tick marking selection
-
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, 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)
Additional info
SelectOnEnter already exists on Select - https://mi6.github.io/ic-ui-kit/branches/develop/react/?path=/story/react-components-select-single--emitting-ic-option-select-on-enter Could potentially solve the pagination bar issue by implementing this?
The question for design is - when a Select is opened via keyboard, where should the focus indicator appear?
Currently you have to press the down arrow to see an individual item selected (therefore moving off the item you originally had selected but couldn't see)
From looking at this page in Storybook, I think this has been resolved.
Tabbing onto the page number dropdown opens the dropdown list correctly with focus state around it, the currently selected item in the list is checked and has the focus background colour applied.
Propose we close this ticket.
