Skip to content

fix: dropdown-menu #545

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix: dropdown-menu #545

wants to merge 1 commit into from

Conversation

naman9271
Copy link
Contributor

@naman9271 naman9271 commented Jan 28, 2025 •
edited
Loading

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 naman9271 closed this Jan 28, 2025
@naman9271 naman9271 reopened this Jan 28, 2025
@naman9271
Copy link
Contributor Author

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

@netlify Netlify
Copy link

netlify bot commented Feb 10, 2025 •
edited
Loading

✅ Deploy Preview for peaceful-ramanujan-288045 ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit afbd449
🔍 Latest deploy log https://app.netlify.com/projects/peaceful-ramanujan-288045/deploys/686006fa4c80310008ee4a3f
😎 Deploy Preview https://deploy-preview-545--peaceful-ramanujan-288045.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

AceTheCreator
AceTheCreator requested changes Mar 9, 2025
View reviewed changes
Copy link
Member

@AceTheCreator AceTheCreator left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work!

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

@naman9271
Copy link
Contributor Author

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

please review that again

@naman9271 naman9271 requested a review from AceTheCreator March 9, 2025 11:54
@AceTheCreator
Copy link
Member

@ashmit-coder, your review is needed :)

@naman9271
Copy link
Contributor Author

@ashmit-coder Kindly Review this PR

@AceTheCreator
Copy link
Member

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

@ashmit-coder
Copy link
Collaborator

Sure @AceTheCreator

@ashmit-coder
Copy link
Collaborator

Hey @naman9271 the conference logo is not visible to meScreenshot_20250324_232527_Chrome.jpg

@naman9271
Copy link
Contributor Author

just fixing this failed tests

@naman9271
Copy link
Contributor Author

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

@AceTheCreator
Copy link
Member

cc @ashmit-coder

@AceTheCreator
Copy link
Member

@naman9271 kindly resolve the conflicts in your PR 🙏🏽

@naman9271 naman9271 closed this Jun 28, 2025
@naman9271 naman9271 force-pushed the fix-dropdown-menu branch from 20de56d to a862120 Compare June 28, 2025 15:14
@naman9271 naman9271 reopened this Jun 28, 2025
@naman9271
Copy link
Contributor Author

@AceTheCreator, @ashmit-coder, @Mayaleeeee, @thulieblack Please review this PR, now whole thing fixed

the conflicts are coming due to typescript migration but it is now fixed so please review 🙏 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@thulieblack thulieblack Awaiting requested review from thulieblack thulieblack is a code owner

@Mayaleeeee Mayaleeeee Awaiting requested review from Mayaleeeee Mayaleeeee is a code owner

@ashmit-coder ashmit-coder Awaiting requested review from ashmit-coder ashmit-coder is a code owner

@AceTheCreator AceTheCreator Awaiting requested review from AceTheCreator AceTheCreator is a code owner

Requested changes must be addressed to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Accessibility] Dropdown menu not keyboard-navigable and lacks focus styles
3 participants
@naman9271 @AceTheCreator @ashmit-coder