search

nodejs / nodejs.org

The Node.js® Website
https://nodejs.org
MIT License
6.23k stars 6.26k forks source link

Accessibility Issues with Scrolling and Focus in WithSearchBox Modal #6975

Open 47anjan opened 3 months ago

47anjan commented 3 months ago

Enter your suggestions in details:

The WithSearchBox modal currently has the following accessibility issues:

  1. Accidental Scrolling: When the modal content is larger than the viewport, users can accidentally scroll the entire page behind the modal. This disrupts their focus and makes it challenging to interact with the modal content.
  2. Focus Loss: When navigating the modal using the keyboard, users might inadvertently tab past the modal boundaries and interact with elements on the underlying page. This behavior is confusing and disrupts the intended interaction with the modal.

Steps to Reproduce:

  1. Open the WithSearchBox modal.
  2. Attempt to scroll the page when the modal content exceeds the viewport size.
  3. Use the Tab key to navigate through the modal elements and observe if the focus moves to elements outside the modal.

Expected Behavior:

  1. Scrolling should be restricted to the modal content, preventing any accidental scrolling of the underlying page.
  2. Keyboard focus should be locked within the modal, ensuring that users cannot tab to elements outside the modal.

Benefits:

Additional Information:

Implementing these changes will significantly improve the accessibility and usability of the WithSearchBox modal. This enhancement aligns with the goal of providing an inclusive and seamless experience for all users.

ovflowd commented 2 months ago

Hey @anjankarmakar10 are these issues still relevant? We recently completely changed the Search Box component to one from a 3rd party, Orama.

Could you verify these issues, and if new or similar still exist, I could ask for @micheleriva to give a look into them :)

micheleriva commented 2 months ago

Hi @ovflowd, we'll try to complete the PR for the new searchbox ASAP. It'll include a good number of bugfixes and accessibility issues. (#6908)