a11y reduced motion #1
Conversation
…ced motion is preferred by user.
…for reduced motion setting.
.eslintrc.json
Outdated
| @@ -6,6 +6,7 @@ | |||
| "plugin:github/typescript" | |||
| ], | |||
| "globals": { | |||
| "CustomElementElement": "readonly" | |||
| "CustomElementElement": "readonly", | |||
| "module": true | |||
There was a problem hiding this comment.
PS: also added this to prevent module.exports throwing a lint error
There was a problem hiding this comment.
What lint error are you getting. When I remove this locally and run npm test I don't get any errors.
There was a problem hiding this comment.
This is the error I get:
…ribute will override the window media match. If data-reduced-motion is set to true, the component will NOT animate. If data-reduced-motion is set to false, the component WILL animate.
|
@jamieshark; If you pull the main branch into this pull request, you should see CI running the tests. |
There was a problem hiding this comment.
Overall this looks good to me.
I wouldn't give implementors the option to opt-out of the accessibility feature, and there are some minor whitespace and markdown changes unrelated to the PR feature, but I'm overall 👍🏻 on this change.
I want to make sure @nholden is approving before we merge, though, as his team are the primary users of this component.
.eslintrc.json
Outdated
| @@ -6,6 +6,7 @@ | |||
| "plugin:github/typescript" | |||
| ], | |||
| "globals": { | |||
| "CustomElementElement": "readonly" | |||
| "CustomElementElement": "readonly", | |||
| "module": true | |||
There was a problem hiding this comment.
What lint error are you getting. When I remove this locally and run npm test I don't get any errors.
…eslint config entry.
…the test from setting delay to 0 when user has reduced motion set on their system). Removes code paths and mentions of attribute data-reduced-motion because including an escape hatch right now might be a bit confusing.
…ue check. Also adds a condition to skip the await call for lines if lineDelay is not 0.
There was a problem hiding this comment.
This is 💯 . Thank you for all the back-and-forth, @jamieshark! 💖
@koddsson: what do you think about merging this now and waiting until #3 is merged to cut a new release?
This PR adds functionality to the
<typing-effect>component to handle the case where a user has a reduced motion setting. This change was originally brought on to accommodate a reduced-motion version of the new sign up page, but I figure that anywhere else this component is being used, we'll probably want the same behavior rather than having to apply it to every instance.If reduced motion is preferred, the lines will append immediately to the content rather than being typed out with the character and line delay.
Comparison
Current
New
(refereshed a couple times bc it happens fast ⏩ )
Testing
Unit tests
I added a unit test to confirm that having the
window.matchMediareturningtruefor reduced motion will set the delay to0, but I wasn't sure how to mock thewindowobject in karma here. @koddsson - do you have any ideas where we could mock this value to be set within the test? (without adding another library / dependency). I tried overridingglobal.window.matchMediabut ran into an error saying I was "setting" a "getter".To manually test reduced motion