feat(GifPlayer): adds component to pause and play gifs for a11y

[jnm2377]

Rel carbon-design-system/design-language-website#411

This component adds pause and play functionality for gifs by replacing the gif with a static image (much like the way ArtDirection uses different images).

It made the most sense to add this component to Gatsby since we use gif's in our Carbon site and IDL site.

New

• GifPlayer

Changed

• ImageGallery functionality to work with GifPlayer

Review

• Go to the GifPlayer page in the left nav to see a working example
• Also review the example in the ImageGallery page
• Check for visually correct styles
• Check for a11y issues (I ended up adding aria-hidden="true/false" bc even though the styles use display:none to toggle between the gif/static image, I still see the hidden images in the DOM). cc: @dakahn

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/carbon-design-system/gatsby-theme-carbon/7j8tv9ipg
✅ Preview: https://gatsby-theme-carbon-git-fork-jnm2377-create-gif-pause.carbon-design-system.now.sh

[dakahn]

This is SO cool! Thanks for problem solving so quickly around 2.2.2 violations against our gifs.

There's a little inconsistency with how the focus state is showing in Firefox

and in Chrome/Edge

Maybe not a blocker, but thought I'd bring it up anyway. 👍

[dakahn]

As an aside -- it could be cool to explore making the gif player an aria-live region that can notify the user that the gif has been played or paused. We use this pattern in our Loading component:

[dakahn]

Checked the focus on FF Windows 10 and it looks great!