fix: dropdown-menu

[naman9271]

Description

This PR addresses the issue where the dropdown menu (e.g., "Venue" or navigation items) was not accessible via keyboard navigation. It ensures that keyboard users can open, close, and navigate the dropdown menu seamlessly, with proper focus indicators and ARIA attributes for accessibility.

Key Changes:

• Added keyboard event handlers for Enter, Space, and Arrow keys to open/close the dropdown and navigate between menu items.
• Implemented ARIA attributes (aria-expanded, aria-controls) for accessibility.
• Added CSS focus styles for visual feedback on the trigger and dropdown items.

Issue Reference

Fixes #544 (Replace with the actual issue number if applicable).

Steps to Reproduce (Before Fix)

1. Navigate to AsyncAPI Conference.
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).

Changes Made

• Keyboard Event Handlers:

  • keydown event listeners for Enter

• ARIA Attributes:

  • aria-expanded: Indicates whether the dropdown is open.
  • aria-controls: Links the trigger with the dropdown content.

• Focus Styles:

  • Added visible focus indicators for both trigger and dropdown menu items.

Expected Behavior (After Fix)

1. Users can open/close the dropdown using Enter, Space, or Arrow keys.
2. Focus is visible on the trigger and menu items.
3. Users can navigate dropdown options with Arrow keys or Tab.

Screenshots or Video (Optional)

Before

406753703-5b687b08-9cf3-442a-af46-2454af7cfd20.mp4

After

dropmenu-fixed.mp4

Testing Instructions

1. Navigate to AsyncAPI Conference.
2. Use the Tab key to focus on the dropdown trigger (e.g., "Venue").
3. Press Enter or Space to open the dropdown.
4. Use ArrowUp and ArrowDown keys to navigate menu items.
5. Press Esc to close the dropdown.

Checklist

• Code follows the project's coding standards.
• Changes have been tested for accessibility.
• Documentation and comments added where necessary.
• Screenshots or screen recordings added (if applicable).
• No console errors or warnings.

Possible Future Improvements

• Consider implementing mouse hover support for improved usability.
• Add unit tests for keyboard event handling.

Reviewer Notes

Please verify:

• Keyboard functionality is working as expected.
• Focus indicators are visible and appropriately styled.
• ARIA attributes are correctly implemented and validated.

---

Thank you for reviewing this PR! Let me know if you need further details or modifications.

[naman9271]

hey @ashmit-coder please check this PR i think it resolves the issue

[netlify]

✅ Deploy Preview for peaceful-ramanujan-288045 ready!

Name	Link
🔨 Latest commit	5ea199f
🔍 Latest deploy log	https://app.netlify.com/sites/peaceful-ramanujan-288045/deploys/67f3c05dacbfea00082463a5
😎 Deploy Preview	https://deploy-preview-545--peaceful-ramanujan-288045.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Jaishree2310]

@AceTheCreator I would like to work on this
Can i raise a PR?

[AceTheCreator]

Nice work!

@naman9271, kindly look into your code changes, they're not well formatted

[naman9271]

@AceTheCreator please check i have run the npm run lint and it shows no warnings as you can see here

please review that again

[AceTheCreator]

@ashmit-coder, your review is needed :)

[naman9271]

@ashmit-coder Kindly Review this PR

[AceTheCreator]

@ashmit-coder, pinging you one more time on this PR

[ashmit-coder]

Sure @AceTheCreator

[ashmit-coder]

Hey @naman9271 the conference logo is not visible to me

[naman9271]

just fixing this failed tests

[naman9271]

@ashmit-coder please have a look now i have fixed the errors

[AceTheCreator]

cc @ashmit-coder