Making Skeleton component A11y Friendly: increase colour contrast and reduced motion

[Sayde Deng]

Problem statement

As a user relying on accessible technology, I'd like to be able to see higher contrast and reduced motion on the loading screen using skeleton so I can properly interact with the site.

Recommendation

1. Change the colour to use Raven Grey

Hex: #71757B
JS: colorGreyRaven

2. Disable animation with media query
   https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

Meta

• TDS version (npm or DSM): Skeleton component Version: 3.0.1
• Willing to develop solution: Maybe
• Has workaround: No
• High impact: Medium

Screenshots

• Include any relevant screenshots

[Varun Jain]

Hey @saydex , great recommendations, you can submit a PR!