feat(component): new pauseOnHover prop to <Carousel>, provide quick information with chance to pause #918
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Codecov ReportPatch coverage:
Additional details and impacted files@@ Coverage Diff @@
## main #918 +/- ##
==========================================
- Coverage 99.54% 99.53% -0.01%
==========================================
Files 163 167 +4
Lines 6621 6918 +297
Branches 401 417 +16
==========================================
+ Hits 6591 6886 +295
- Misses 30 32 +2
☔ View full report in Codecov by Sentry. |
|
Hey, thank you for submitting this, I love the idea, as someone who is personally quite frustrated with carousels in general in component libraries, lol. I don't have time to get to this right now but I wanted to let you know we see your contribution! I'll ask @rluders if he has an opportunity but I know he is about to give me some feedback on his PR to add Datepicker. |
…nformation with chance to pause A new property on the <Carousel> component, `pauseOnHover`, will improve accessibility, allow for a faster flow of information, and help users find desired information quicker. From the Web Accessibility Initiative in "What makes a carousel accessible?", they note: "Users must be able to pause carousel movement because it can be too fast or distracting, making text hard to read." (www.w3.org/WAI/tutorials/carousels/) Currently, there is no built in feature to accomplish this. Developers will either have to disable the `slide` property, or make the `slideInterval` property very long to allow users to read necessary information. With the `pauseOnHover` property, users will have a quick way, both on mobile and desktop, to pause on the desired slide. Furthermore, this allows developers to display more information at a faster pace to users because users have a choice at which slide to stop and read, but can still have a general understanding of information displayed on other slides.
There was a problem hiding this comment.
Well, in fact, this is a very cool feature and it works as expected. It lacks unit tests, but TBH I have no idea how we could test it, and its implementation looks very simple, so I'll not consider this a blocker.
Thank you @Pewaukee for your contribution.
Summarize the changes made and the motivation behind them.
A new property on the component,
pauseOnHover, will improve accessibility, allow for a faster flow of information, and help users find desired information quicker. From the Web Accessibility Initiative in "What makes a carousel accessible?", they note: "Users must be able to pause carousel movement because it can be too fast or distracting, making text hard to read." (www.w3.org/WAI/tutorials/carousels/) Currently, there is no built in feature to accomplish this. Developers will either have to disable theslideproperty, or make theslideIntervalproperty very long to allow users to read necessary information. With thepauseOnHoverproperty, users will have a quick way, both on mobile and desktop, to pause on the desired slide. Furthermore, this allows developers to display more information at a faster pace to users because users have a choice at which slide to stop and read, but can still have a general understanding of information displayed on other slides.For changes in code, added an additional parameter to
<Carousel>and an additional state variableisHoveringto check if the user is hovering on the root component. Also defined a few additional callback functions to use on the parent<div>. Works on desktop by hovering, works on mobile by touching and pressing.Reference related issues using
#followed by the issue number.#902
If there are breaking API changes - like adding or removing props, or changing the structure of the theme - describe them, and provide steps to update existing code.