Feat/marquee enhance #5846
Open
Feat/marquee enhance #5846
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… on click functionality
…sibility with aria attributes
commit: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
🔗 Linked issue
Resolves #
❓ Type of change
👌 Enhancement (improving an existing functionality)
✨ New feature (a non-breaking change that adds functionality)
🐞 Bug fix (fixes a teardown error in tests)
📚 Description
This PR enhances the Marquee component with focus on accessibility, speed control, and a new interactive pause mechanism.
Key Enhancements:
Accessibility Improvements:
Added motion-reduce:animate-none to support users with motion sensitivities.
Applied aria-hidden="true" to duplicated marquee content to optimize screen reader experience.
pauseOnClick Functionality:
Users can now click the marquee to toggle between playing and paused states.
Implemented smart event filtering to ensure inner interactive elements (buttons, links) remain functional without triggering the pause.
Animation automatically resumes when clicking outside the component using onClickOutside.
Custom Duration: Added a duration prop (in seconds) to allow dynamic control over scrolling speed.
Visual Feedback: Added a hover-enabled overlay to indicate the marquee is interactive when pauseOnClick is enabled.
Bug Fixes & Tooling:
Test Stability: Resolved a ReferenceError: document is not defined in
Slideover.spec.ts
by introducing unmount() in accessibility tests.
Updated Tests: Optimized
Marquee.spec.ts
with new cases for duration and interaction logic, and updated snapshots across the library to reflect structural theme changes.
📝 Checklist
I have linked an issue or discussion.
I have updated the documentation accordingly.