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.