Accessibility: Button Contrast

[Ibabalola]

Describe the bug Default buttons within the modal were found to fail minimum non-text contrast requirements. This issue can be found with the previous and next month buttons on the page. Users who find it difficult to differentiate between low contrast colours will have an issue locating the focus on the element.

<button type="button" class="react-datepicker__navigation react-
datepicker__navigation--previous" aria-label="Previous Month"><span class="react-
datepicker__navigation-icon react-datepicker__navigation-icon--previous">Previous
Month</span></button>

To Reproduce Steps to reproduce the behavior:

Open the react date picker via modal or custominput

Expected behavior Ensure that interactive non-text content on the page achieves a minimum contrast ratio of 3:1 against the background/adjacent colours. The arrows need to contrast against the light grey background.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[Sahil-177]

Hi @Ibabalola,

I saw your issue regarding the contrast requirements for the previous and next buttons in the ReactDatePicker. Have you found a solution to customize the icon colors?

I'm also trying to change the color of the navigation icons (previous and next arrows) in ReactDatePicker, but the styles aren't reflecting, even when using Tailwind CSS or regular CSS. Any advice on how to apply these changes would be appreciated.

Thanks!

[Ibabalola]

Hi @Sahil-177

Yes, I have found a solution by importing a customized .css file containing an updated stylesheet with changed styles to customize the styles for the icons to get the right color ratios to pass our accessibility audit.

I'm using Remix, which allows me to CSS Bundling my own version of the react-datepicker.css file to customize the icon colors.

The default styles from react-datepicker can be found here node_modules/react-datepicker/dist/react-datepicker.css

I hope this helps.