[BUG] Dropdown - Keyboard accessibility - When the user hit on up and down arrow keys on the keyboard, dropdown list items is not selected

[HarshithaNous]

[BUG] Dropdown Web component - Keyboard accessibility - When the user hit on up and down arrow keys on the keyboard, dropdown list items is not selected

Steps to reproduce the behavior on Docs section:

1. Go to Dropdown web component
2. Click on Docs section
3. Scroll down to Dropdown Element
4. Hit on Tab key on the keyboard
5. Dropdown element should be selected
6. Hit on Enter key on the keyboard
7. Dropdown list should be displayed
8. Hit on Up and Down arrow keys to select the drop down list items
9. Dropdown list items is not selected accordingly

Steps to reproduce the behavior on Canvas section:

1. Go to Dropdown web component
2. Click on Canvas section
3. Hit on Tab key on the keyboard
4. Dropdown element should be selected
5. Hit on Enter key on the keyboard
6. Dropdown list should be displayed
7. Hit on Up and Down arrow keys to select the drop down list items
8. Dropdown list items is not selected accordingly

Expected behavior The first item in the dropdown list should be preselected and when user hit on up and down arrow keys on the keyboard, the list of items on the dropdown should be selected accordingly

Current behavior The list of items is not selected when the user hit on up and down arrow keys on the keyboard

Please refer the below screenshots:

• Browser Tested - Edge, Chrome and Firefox

[coliff]

We've since made many improvements to keyboard accessibility for the Dropdown component including opening with Enter and Space and Escape to close.

Furthermore, a user can tab into the dropdown and tab down the list of items. If you find this an acceptable solution please feel free to close the issue. Otherwise I suggest we mark this issue as low priority.

[prashanth-offcl]

@HarshithaNous closing this issue based on @coliff comment. Kindly reopen this issue if you need more changes.