fix(ui-time-select,ui-simple-select,ui-select): add missing keyboard …

[ToMESSKa]

…interactions and fix duplicate SR announcements

INSTUI-4526

ISSUE:

• in Select, SimpleSelect and TimeSelect, while navigation through the options, an option was announced twice:
  • for VoiceOver, the cause was that while navigating the options with keyboard, the input value updates too, causing the screen reader to announce the changed input value as well
  • for NVDA the cause was that that some of the examples included an Alert, which caused reading option twice
• in Select, SimpleSelect and TimeSelect, when no option is selected and user presses down arrow, the focus does not jump to the first option as recommended by the official APG patterns
• in Select, SimpleSelect and TimeSelect, when no option is selected and user presses up arrow, the focus does not jump to the last option as recommended by the official APG patterns
• for Select, these keyboard interactions were implemented in the examples, while for SimpleSelect and TimeSelect, the source code itself was modified

TEST PLAN:

screenreader annoucements:

• go through every example in Select, SimpleSelect and TimeSelect, VoiceOver and NVDA should announce an option only once when navigating with down and up arrow buttons: eg 'Alaska not selected' instead of 'Alaska, Alaska not selected'

keyboard interactions:

• in Select, SimpleSelect and TimeSelect, set the initially selected option to none in the example if needed in order to make the input empty e.g.:
  • In Select set the intial inputValue and selectedOptionId state values to null
  • in SimpleSelect/TimeSelect setting value or defaultValue to value=' ' or defaultValue=' '
• go through the example with keyboard interactions only
• when no option is selected initially and user presses down arrow, the listbox should open and the first option should be highlighted and focused (instead of not focusing/highlighting anything)
• when no option is selected initially and user presses up arrow, the listbox should open and the last option should be highlighted and focused (instead of not focusing/highlighting anything)
• in SimpleSelect it should work with grouped options and mixed grouped and non-grouped options e.g.: only the last option is a non-grouped option

[github-actions]

PR Preview Action v1.6.1
Preview removed because the pull request was closed.
2025-06-13 10:10 UTC

[ToMESSKa]

I removed these Alerts as it was the cause of NVDA announcing every option twice

[ToMESSKa]

with VoiceOver, while navigating the options with keyboard, the input value updates too, causing the screen reader to announce the changed input value and the option as well. This behavior (the input changing while just navigating through options) is not implemented in any official APG examples, so this was removed by the recommendation of Dan.

[matyasf]

very nice work! I've found just a smaller issue.

[matyasf]

This code is a bit misleading, since one might think that this is always a keyboardEvent. This is not the case, this can be either a MouseEvent or a KeyboardEvent. I think the best way would be to check the event.type, e.g.

if (event.type.startsWith('key')) {

BTW we should type these onRequest... functions properly, not just to a generic SyntheticEvent

[ToMESSKa]

I fixed this, check please.

[matyasf]

Same issue as the code in SimpleSelect

[ToMESSKa]

I fixed this, check please.