search

novuhq / hacksquad-website

Contribute code, meet community members, participate in workshops, and win more SWAG 🚀
https://hacksquad.dev
MIT License
254 stars 189 forks source link

🐛 Bug Report: Accordion in FAQ / Q&A triggers on any keypress #154

Open adeyinkaezra123 opened 11 months ago

adeyinkaezra123 commented 11 months ago

📜 Description

In the Q&A section, the expanded state of a chosen drawer toggles frequently with each keypress, causing keyboard-based navigation to feel unstable. This makes actions keyboard-based navigation a bit wobbly or in my case link navigation to a new with Ctrl + click page disabled.

👟 Reproduction steps

  1. Go to the Q&A section, expand a drawer.
  2. Press any key on the keyboard, and notice how the drawer expands and contracts on keypress
  3. Also try scrolling with the Arrow Down ⬇️ key, notice that the effect still persists.

👍 Expected behavior

The Accordion component should not be triggered by just any keypress, preferably, Escape, and probably clicking outside the borders of the component should hide the drawers. Additionally, the Tab key can also be used to expand the next drawer, whilst hiding the previous one

👎 Actual Behavior with Screenshots

A video would do more justice

https://github.com/novuhq/hacksquad-website/assets/65364356/7e1fbaa7-d5af-4ca3-8198-c9b3c4f942ab

💻 Operating system

Windows

🤖 Node Version

v18.17.1

📃 Provide any additional context for the Bug.

No response

👀 Have you spent some time to check if this bug has been raised before?

Are you willing to submit PR?

Yes I am willing to submit a PR!

mpatwa98 commented 11 months ago

I would like to work on this. Can you assign it to me?

ManishGupta2003 commented 10 months ago

👋 Hello there,

I've reviewed the issue and I can see that the Accordion component in the Q&A section is currently exhibiting undesirable behavior with keyboard-based navigation, as described. Each keypress appears to toggle the drawer, leading to an unstable experience.

To resolve this issue, I'm planning to implement the following changes:

  1. Disable the Accordion's response to every keypress. It should only expand and contract when specific keyboard events occur.

  2. Define keyboard shortcuts: I'll set up keyboard shortcuts, such as the Tab key to navigate between drawers, and the Escape key to close the currently open drawer.

  3. Implement the ability to close the open drawer by clicking outside the component's boundaries.

I'll work on these changes and submit a pull request to address the issue. Please feel free to provide any additional feedback or suggestions.

Thank you for bringing this to our attention, and I'll keep you updated on the progress.

Best regards, Manish gupta