[Accessibility] Dropdown menu not keyboard-navigable and lacks focus styles

[naman9271]

Describe the bug.

The dropdown menu (e.g., "Venue" or navigation items) is not fully accessible via keyboard navigation. Users cannot open/close the dropdown using the keyboard, and focus states are missing, making it difficult for keyboard/screen reader users to interact.

Expected behavior

• Dropdown opens/closes with Enter, Space, or Arrow keys.
• Focus is visible on the trigger and dropdown items.
• Users can navigate dropdown options with Tab or arrow keys.
• Actual Behavior
• Dropdown does not respond to keyboard input.
• No visual focus indicator on the trigger or menu items.

Possible Solution

• Add keyboard event handlers (keydown for Enter, Space, Arrow keys).
• Implement ARIA attributes (aria-expanded, aria-controls).
• Add CSS focus styles for visibility.

Screenshots

tab-issue.mp4

How to Reproduce

1. Navigate to the website (https://conference.asyncapi.com/).
2. Use the Tab key to focus on the dropdown trigger (e.g., "Venue").
3. Press Enter or Space to open the dropdown.
4. Observe that the dropdown does not open.
5. Attempt to navigate dropdown items with Arrow keys (fails).

🥦 Browser

None

👀 Have you checked for similar open issues?

• I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to work on this issue ?

Yes I am willing to submit a PR!

[naman9271]

hey @ashmit-coder @thulieblack please assign this issue to me
I have fixed this issue in my local environment

[harikrishna-au]

Hello, @ashmit-coder and @thulieblack, could you please assign me the issue? I’d be glad to fix it right away