Enhance Modal Accessibility in WithSearchBox with RemoveScroll and FocusLock #6976
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request addresses issues with users accidentally scrolling outside the modal or tabbing to elements behind the modal in the
WithSearchBox
component. It implements the use ofRemoveScroll
andFocusLock
within the modal to enhance accessibility and improve user experience.Changes Made:
RemoveScroll
to prevent scrolling outside of the modal.FocusLock
to maintain keyboard focus within the modal.Validation
To validate these changes, reviewers should:
WithSearchBox
modal.Related Issues
Check List
npm run format
to ensure the code follows the style guide.npm run test
to check if all tests are passing.npx turbo build
to check if the website builds without errors.