Screen reader support for header week numbers breaks tailwind class

[eduardo-otte]

Describe the bug
The accessibility improvements added in #5731 introduce a new CSS class (sr-only) that clash with Tailwind's own sr-only class, causing the class to ignore Tailwind's breakpoints.

To Reproduce
In a project that uses both react-datepicker and Tailwind, create a new component that uses the sr-only with a breakpoint. The sr-only class will always be applied, even when not expected to.

<button className="sr-only sm:not-sr-only">
    Click here
</button>

Expected behavior
The classes in react-datepicker should be scoped to the component's tree and avoid using universal names that might conflict with other tools.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu
• Browser: Vivaldi (chromium)
• Version: 7.5.3735.62

[balajis-qb]

I'll fix it.

[eduardo-otte]

Thank you, @balajis-qb!

[crcollver]

This seems to be related to what I'm still experiencing in 8.7.0. I noticed this display issue was introduced in 8.5.0, so I've reverted to a version before that for now. However, I'm also using Tailwind with a few custom styles. Regardless if these custom styles are enabled, I still get this duplicate display of the Weekday names (both "Saturday" and "Sa" are being displayed in my screenshot).

I'm not super familiar with the inner-workings of this library, so I'm not sure if this is something I need to adjust on my end.

[balajis-qb]

It should be resolved in the recent release 8.7.0. Can you try and share your code if it's still not working.

[oprichnik]

Hi, is there any update on that ? it seems not to have been fix.

[martijnrusschen]

This issue is already fixed in the current codebase.