High Contast mode support

[sarahannnicholson]

When turning on windows high contrast mode, the handle button looks like:

This is because the arrows are made using css instead of an svg.

Requesting that this swap be made so that out of the box, this carousel is more accessible on the web. - Yes, people can replace the handle with other components, but this is a small feature request that would make an impact for the default usage.

[nerdyman]

Thanks for raising this @sarahannnicholson. I've added to a subtask of the #154 v4 release.

I haven't used high contrast mode much so I'm not sure why the line behind the button is being switched to black but the button still has the white colours with transparent borders for the arrows also switching to white. I'll try a few things out and see if it can behave consistently, also open to PRs!

[nerdyman]

This has been released in the latest beta version. The handle arrows and borders will always be white now. The --rcs-handle-color CSS variable can be used to change their colour.

See the Handles docs for more info.

npm i react-compare-slider@beta
pnpm i react-compare-slider@beta
yarn add react-compare-slider@beta

[nerdyman]

Leaving this open until the stable v4 release goes out.